JS面向?qū)ο髮?shí)現(xiàn)飛機(jī)大戰(zhàn)
本文實(shí)例為大家分享了JS面向?qū)ο髮?shí)現(xiàn)飛機(jī)大戰(zhàn)的具體代碼，供大家參考，具體內(nèi)容如下
主頁(yè)面
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <title>Title</title> <style> .bg{ width: 530px; height: 600px; position: relative; margin: 100px auto; background: url('bg.png') no-repeat 0 -9399px; } .plane{ width: 60px; height: 53px; position: absolute; left: 235px; bottom: 10px; background: url('my_air.gif') no-repeat; } .enemy{ position: absolute; } .buttle{ width: 9px; height: 37px; position: absolute; background: url('my_ari_1.gif') no-repeat; } .bomp{ width: 160px; height: 160px; position: absolute; background: url('0.gif') no-repeat; } </style></head><body><div id='bg'> <div id='plane'></div></div></body><script type='text/javascript' src='http://www.hdgsjgj.cn/bcjs/buttle.js'></script><script type='text/javascript' src='http://www.hdgsjgj.cn/bcjs/enemies.js'></script><script src='http://www.hdgsjgj.cn/bcjs/jquery-3.0.0.min.js'></script><script> //bg移動(dòng)begin var bg_height=-9399; function bg_move(){ var bg=document.getElementById('bg'); bg_height+=3; if (bg_height>0){ bg_height=-9399; } bg.setAttribute('style','background: url(’bg.png’) no-repeat 0 '+bg_height+'px'); } setInterval(bg_move,30); //bg移動(dòng)over //通過(guò)獲取鍵盤的key值來(lái)控制飛機(jī)的方向begin document.onkeydown = function(){ var key=event.keyCode; var plane =document.getElementById('plane'); switch (key){ case 37: plane_Left(); break; case 38: plane_Top(); break; case 39: plane_Right(); break; case 40: plane_Bottom(); break; case 32: fire(); break; } }; //通過(guò)獲取鍵盤的key值來(lái)控制飛機(jī)的方向over //飛機(jī)的方向begin var planeLeft=235; var planeBottom=10; //聲明全局變量planeBottom、planeLeft用來(lái)讓飛機(jī)移動(dòng) function plane_Left(){ if(planeLeft>0){ planeLeft-=8; document.getElementById('plane').setAttribute('style','left:'+planeLeft+'px'+';'+'bottom:'+planeBottom+'px'); } } function plane_Right(){ if(planeLeft<470){ planeLeft+=8; document.getElementById('plane').setAttribute('style','left:'+planeLeft+'px'+';'+'bottom:'+planeBottom+'px'); } } function plane_Top(){ if(planeBottom<550){ planeBottom+=8; document.getElementById('plane').setAttribute('style','left:'+planeLeft+'px'+';'+'bottom:'+planeBottom+'px'); } } function plane_Bottom(){ if(planeBottom>10){ planeBottom-=8; document.getElementById('plane').setAttribute('style','left:'+planeLeft+'px'+';'+'bottom:'+planeBottom+'px'); } } //飛機(jī)的方向over function enemyShow(){ var number = parseInt(Math.random()*10); for(var i=0;i<number;i++){ var enemies=new enemiesShow(); } } setInterval(enemyShow,3000); function fire(){ var bottom=planeBottom+5+53; var left=planeLeft+30-5; var buttle = new buttleDemo(left,bottom); }</script></html>
子彈
/** * Created by echo22 on 2016/7/29. */function buttleDemo(left,bottom){ var buttleLeft =left; var buttleBottom = bottom; var id; var Move; inti(); function inti(){ id=getRandom(); var str = '<div class=’buttle’ id=’b'+id+'’></div>'; $('#bg').append(str); $('#b'+id).css({'left':buttleLeft,'bottom':buttleBottom}); Move=setInterval(buttleMove,10); } //獲取隨機(jī)ID function getRandom(){ return parseInt(Math.random()*10000); } //子彈的移動(dòng) function buttleMove(){ if(buttleBottom<550){ buttleBottom+=10; $('#b'+id).css('bottom',buttleBottom); if(JudgeShot()){ dispire(); } } else { dispire(); } } //清除子彈 function dispire(){ $('#b'+id).remove(); clearInterval(Move); } //判斷子彈與敵機(jī)的碰撞位置 function JudgeShot(){ var enemy=$('.enemy'); for (var i=0;i<enemy.length;i++){ var enemy_top=$('.enemy').eq(i).css('top'); var enemy_left=$('.enemy').eq(i).css('left'); enemy_bottom=600-getInt(enemy_top); enemy_left=getInt(enemy_left); console.log(enemy_left); if (buttleLeft>enemy_left&&buttleLeft<enemy_left+50&&buttleBottom>enemy_bottom&&buttleBottom<enemy_bottom+60){ $('.enemy').eq(i).remove(); var bomp='<div class=’bomp’ id=’bo'+id+'’></div>'; $('#bg').append(bomp); $('#bo'+id).css({'left':buttleLeft-70,'bottom':buttleBottom-100}); setTimeout(gundan,50); return true; } } return false; } function getInt(str){ var result = str.substring(0,(str.length-2)); return parseInt(result); } function gundan(){ $('#bo'+id).remove(); }}
敵機(jī)
/** * Created by echo22 on 2016/7/29. */function enemiesShow(){ var id; init(); function init(){ var type=getEnemyType(); var enemyLeft=getEnemyLeft(); getEnemyPlane(type,enemyLeft); getLine(); } function getEnemyPlane(type,left){ console.log(111); id=parseInt(Math.random()*10000); var width; var height; if(type==1){ width=47; height=72; } else { width=64; height=56; } var enemy='<div class=’enemy’ id=’e'+id+'’ ></div>'; $('#bg').append(enemy); $('#e'+id).css({'width':width,'height':height,'left':left,'background':'url(’d_j_'+type+'.gif’) no-repeat'}); } function getEnemyType(){ return (parseInt(Math.random()*10/5)>0)?1:3; } function getEnemyLeft(){ return parseInt(Math.random()*(530-64)); } function getLine(){ Math.random()>0.5?zhiLine():quLine(); } function zhiLine(){ $('#e'+id).animate({ 'top':'520px' },3000,function(){ $('#e'+id).remove(); }) } function quLine(){ $('#e'+id).animate({ 'top':'200px', 'left':getEnemyLeft() },1500,function(){}) $('#e'+id).animate({ 'top':'520px', 'left':getEnemyLeft() },1500,function(){ $('#e'+id).remove(); }) }}
更多有趣的經(jīng)典小游戲?qū)崿F(xiàn)專題，分享給大家：
C++經(jīng)典小游戲匯總
python經(jīng)典小游戲匯總
python俄羅斯方塊游戲集合
JavaScript經(jīng)典游戲 玩不停
java經(jīng)典小游戲匯總
javascript經(jīng)典小游戲匯總
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. Spring security 自定義過(guò)濾器實(shí)現(xiàn)Json參數(shù)傳遞并兼容表單參數(shù)(實(shí)例代碼)2. Java8內(nèi)存模型PermGen Metaspace實(shí)例解析3. python學(xué)習(xí)之plot函數(shù)的使用教程4. python wsgiref源碼解析5. 一文搞懂 parseInt()函數(shù)異常行為6. python 實(shí)現(xiàn)關(guān)聯(lián)規(guī)則算法Apriori的示例7. ASP.NET MVC使用正則表達(dá)式驗(yàn)證手機(jī)號(hào)碼8. python 實(shí)現(xiàn)"神經(jīng)衰弱"翻牌游戲9. python tkinter實(shí)現(xiàn)下載進(jìn)度條及抖音視頻去水印原理10. Python基于百度AI實(shí)現(xiàn)抓取表情包
網(wǎng)公網(wǎng)安備