JS面向?qū)ο髮?shí)現(xiàn)飛機(jī)大戰(zhàn)
本文實(shí)例為大家分享了JS面向?qū)ο髮?shí)現(xiàn)飛機(jī)大戰(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 class="bg" id="bg"> <div class="plane" id="plane"></div> </div> </body> <script type="text/javascript" src="buttle.js"></script> <script type="text/javascript" src="enemies.js"></script> <script src="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 //通過獲取鍵盤的key值來控制飛機(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; } }; //通過獲取鍵盤的key值來控制飛機(jī)的方向over //飛機(jī)的方向begin var planeLeft=235; var planeBottom=10; //聲明全局變量planeBottom、planeLeft用來讓飛機(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)專題,分享給大家:
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- js+canvas實(shí)現(xiàn)飛機(jī)大戰(zhàn)
- JavaScript實(shí)現(xiàn)前端飛機(jī)大戰(zhàn)小游戲
- JavaScript編寫實(shí)現(xiàn)飛機(jī)大戰(zhàn)
- JavaScript實(shí)現(xiàn)飛機(jī)大戰(zhàn)游戲
- 用JS實(shí)現(xiàn)飛機(jī)大戰(zhàn)小游戲
- 原生JS實(shí)現(xiàn)飛機(jī)大戰(zhàn)小游戲
- js實(shí)現(xiàn)飛機(jī)大戰(zhàn)小游戲
- js實(shí)現(xiàn)飛機(jī)大戰(zhàn)游戲
- JavaScript原生編寫《飛機(jī)大戰(zhàn)坦克》游戲完整實(shí)例
- js+css實(shí)現(xiàn)飛機(jī)大戰(zhàn)游戲
相關(guān)文章
深入理解ES6 Promise 擴(kuò)展always方法
本篇文章主要介紹了ES6 Promise 擴(kuò)展always方法,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09JavaScript仿商城實(shí)現(xiàn)圖片廣告輪播實(shí)例代碼
大家在逛購物商城的時(shí)候不知道有沒有注意到商城首頁上面都會(huì)有各種輪播廣告,效果非常好,下面小編給大家整理特此分享給大家學(xué)習(xí)2016-02-02用html+css+js實(shí)現(xiàn)的一個(gè)簡(jiǎn)單的圖片切換特效
這篇文章主要介紹了用html+css+js實(shí)現(xiàn)的一個(gè)簡(jiǎn)單的圖片切換特效,需要的朋友可以參考下2014-05-05js定時(shí)器+簡(jiǎn)單的動(dòng)畫效果實(shí)例
下面小編就為大家?guī)硪黄猨s定時(shí)器+簡(jiǎn)單的動(dòng)畫效果實(shí)例。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-11-11一篇文章搞定JavaScript類型轉(zhuǎn)換(面試常見)
這篇文章主要介紹了一篇文章搞定JavaScript類型轉(zhuǎn)換(面試常見),非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友參考下吧2017-01-01JavaScript數(shù)據(jù)結(jié)構(gòu)之二叉樹的計(jì)數(shù)算法示例
這篇文章主要介紹了JavaScript數(shù)據(jù)結(jié)構(gòu)之二叉樹的計(jì)數(shù)算法,結(jié)合具體實(shí)例形式分析了javascript二叉樹記錄更新次數(shù)的原理與操作技巧,需要的朋友可以參考下2017-04-04JavaScript定時(shí)器常見用法實(shí)例分析
這篇文章主要介紹了JavaScript定時(shí)器常見用法,結(jié)合實(shí)例形式分析了JavaScript定時(shí)器常見功能、應(yīng)用及相關(guān)操作技巧,需要的朋友可以參考下2019-11-11值得分享的Bootstrap Ace模板實(shí)現(xiàn)菜單和Tab頁效果
這篇文章主要為大家分享了基于Bootstrap Ace模板實(shí)現(xiàn)菜單和Tab頁效果,感興趣的小伙伴們可以參考一下2015-12-12