JS面向?qū)ο髮崿F(xiàn)飛機大戰(zhàn)
本文實例為大家分享了JS面向?qū)ο髮崿F(xiàn)飛機大戰(zhàn)的具體代碼，供大家參考，具體內(nèi)容如下
主頁面
<!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.baoyu77737.com/bcjs/buttle.js'></script><script type='text/javascript' src='http://www.baoyu77737.com/bcjs/enemies.js'></script><script src='http://www.baoyu77737.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)典小游戲?qū)崿F(xiàn)專題，分享給大家：
C++經(jīng)典小游戲匯總
python經(jīng)典小游戲匯總
python俄羅斯方塊游戲集合
JavaScript經(jīng)典游戲 玩不停
java經(jīng)典小游戲匯總
javascript經(jīng)典小游戲匯總
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關文章：
1. php使用正則驗證密碼字段的復雜強度原理詳細講解 原創(chuàng)2. ASP將數(shù)字轉(zhuǎn)中文數(shù)字(大寫金額)的函數(shù)3. 基于javaweb+jsp實現(xiàn)企業(yè)車輛管理系統(tǒng)4. XML在語音合成中的應用5. jscript與vbscript 操作XML元素屬性的代碼6. Jsp+Servlet實現(xiàn)文件上傳下載 文件列表展示（二）7. asp.net core 認證和授權(quán)實例詳解8. ASP.NET MVC把數(shù)據(jù)庫中枚舉項的數(shù)字轉(zhuǎn)換成文字9. ASP.NET MVC使用Boostrap實現(xiàn)產(chǎn)品展示、查詢、排序、分頁10. 基于PHP做個圖片防盜鏈
網(wǎng)公網(wǎng)安備