JS面向對象實現(xiàn)飛機大戰(zhàn)
本文實例為大家分享了JS面向對象實現(xiàn)飛機大戰(zhàn)的具體代碼，供大家參考，具體內容如下
主頁面
<!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.b3g6.com/bcjs/buttle.js'></script><script type='text/javascript' src='http://www.b3g6.com/bcjs/enemies.js'></script><script src='http://www.b3g6.com/bcjs/jquery-3.0.0.min.js'></script><script> //bg移動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移動over //通過獲取鍵盤的key值來控制飛機的方向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; } }; //通過獲取鍵盤的key值來控制飛機的方向over //飛機的方向begin var planeLeft=235; var planeBottom=10; //聲明全局變量planeBottom、planeLeft用來讓飛機移動 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'); } } //飛機的方向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); } //獲取隨機ID function getRandom(){ return parseInt(Math.random()*10000); } //子彈的移動 function buttleMove(){ if(buttleBottom<550){ buttleBottom+=10; $('#b'+id).css('bottom',buttleBottom); if(JudgeShot()){ dispire(); } } else { dispire(); } } //清除子彈 function dispire(){ $('#b'+id).remove(); clearInterval(Move); } //判斷子彈與敵機的碰撞位置 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(); }}
敵機
/** * 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)典小游戲實現(xiàn)專題，分享給大家：
C++經(jīng)典小游戲匯總
python經(jīng)典小游戲匯總
python俄羅斯方塊游戲集合
JavaScript經(jīng)典游戲 玩不停
java經(jīng)典小游戲匯總
javascript經(jīng)典小游戲匯總
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關文章：
1. docker容器調用yum報錯的解決辦法2. 淺談JavaScript宏任務和微任務執(zhí)行順序3. vue+elementUI下拉框回顯問題及解決方式4. idea導入maven項目的方法5. docker /var/lib/docker/aufs/mnt 目錄清理方法6. idea環(huán)境下Maven無法正常下載pom中配置的包問題7. Python幾種常見算法匯總8. idea設置自動導入依賴的方法步驟9. 使用IntelliJ IDEA 配置安卓(Android)開發(fā)環(huán)境的教程詳解(新手必看)10. 利用Python實現(xiàn)Excel的文件間的數(shù)據(jù)匹配功能
網(wǎng)公網(wǎng)安備