javascript实现简单飞机大战小游戏 javascript实现简单飞机大战小游

本文实例为大家分享了javascript实现飞机大战小游戏的具体代码，供大家参考，具体内容如下
效果图

文章图片

文章图片

文章图片

html文件

mm - 锐客网*{margin:0; padding:0; list-style:none; user-select:none; } 飞机大战 Lv1简答模式
一般模式
困难模式
地狱模式
0最终得分:10获得评价:青铜

css文件

.wrap{position:relative; width: 400px; height: 600px; margin:10px auto; overflow:hidden; }/* 游戏等级 */#level{position:absolute; top:0; left:0; z-index:1; width:100%; height:100%; font-family:"楷体"; background:url(../img/bg_1.jpg)repeat 0/cover; }#level h1{width:100%; color:#fff; text-align:center; padding:100px 0; }#level p{text-align:center; padding:10px 20px; letter-spacing:5px; font-weight:bold; background-color:#fff; margin:30px 120px; border-radius:5px; box-shadow:1px 1px 10px 1px #aaa; }#level p:hover{cursor:pointer; background-color:#4D6BA2; color:#fff; }/*游戏界面*/#map{position:absolute; top:0; left:0; width:100%; height:100%; background:url(../img/bg_2.jpg)repeat 0/cover; }#map .plane,/*我军飞机*/.enemy,/*敌军飞机*/.boom,/*敌军飞机爆炸*/.boom2,/*我军飞机爆炸*/.fire{/*我军飞机子弹*/position:absolute; }#map .plane,.enemy{z-index:5; }#map .boom{z-index:6; animation : enemyDisappear 0.8s 1; animation-fill-mode : forwards; /*显示最后一个关键帧*/}#map .boom2{z-index:6; animation : planeDisappear 2s 1; animation-fill-mode : forwards; }#map .fire{z-index:7; }/* 敌军消失的动画 */@keyframes enemyDisappear {from { opacity : 1; }to{ opacity : 0; }}/* 我军消失的动画 */@keyframes planeDisappear {0% { opacity : 1; }20%{ opacity : 0; }40%{ opacity : 1; }60%{ opacity : 0; }80%{ opacity : 1; }100%{ opacity : 0; }}/*游戏得分*/#score{display:none; position:absolute; top:0; left:0; z-index:10; padding:10px 20px; color:#fff; }/* 结束游戏的界面 */#settlement{display:none; position:absolute; top:30%; left:0; z-index:100; width:100%; height:35%; font-family:"楷体"; }#settlement div{margin:20px 0; text-align:center; font-size:20px; color:#fff; }#settlement div span{font-size:24px; }#settlement div .totalscore{color:red; }#settlement div .appraise{color:green; }#settlement button{margin:30px 34% 0; padding:10px 20px; background-color:rgba(255,255,255,.8); letter-spacing : 2px; border:none; font-family:"楷体"; font-size:20px; font-weight:bold; border-radius:5px; }#settlement button:hover{cursor:pointer; background-color:rgba(255,255,255,1); }

js文件

let oWrap = document.querySelector(".wrap"),oLevel = document.getElementById("level"),//游戏等级盒子oLevelList = document.querySelectorAll("#level p"),//游戏等级oMap = document.getElementById("map"),//游戏界面oAllFire = document.querySelector(".allFire"),//子弹盒子oScore = document.getElementById("score"),//游戏得分oSettlement = document.getElementById("settlement"),//结算界面oButton =oSettlement.querySelector("button"); //重新开始for(let i=0; i{requestAnimationFrame(fireMove); },20); } //定时生成子弹的频率oWrap.fireTimer = setInterval(()=>{if(oWrap.score>=100){createFires(true,-1); createFires(true,+1); }else{createFires(); }},[200,150,100,50][level]) } //创建敌军let enemyNum = 1; function createEnemy(level,myPlane){let speed = [4,6,8,10][level]; //游戏模式相对应的的等级飞机下落的速度MapW = oMap.clientWidth,MapH = oMap.clientHeight; oWrap.enemyTimer = setInterval(()=>{let createEnemy = new Image(); createEnemy.index = enemyNum%20 ? 1:0; createEnemy.src = https://www.it610.com/article/`./img/enemy_${["big","small"][createEnemy.index]}.png`; createEnemy.width = [100,50][createEnemy.index]; createEnemy.height = [100,50][createEnemy.index]; //敌军的血量createEnemy.hp = [4,1][createEnemy.index]; createEnemy.className = "enemy"; //敌军首次出现的位置let enemyTop = -createEnemy.height; createEnemy.style.top = enemyTop + "px"; createEnemy.style.left = Math.random()*MapW - createEnemy.width/2 + "px"; oMap.appendChild(createEnemy); enemyNum++; console.log(createEnemy.offsetLeft,createEnemy.offsetTop)//判断敌军的下落运动function enemyMove(){if(createEnemy.parentNode){enemyTop += speed; if(enemyTop>=MapH){oMap.removeChild(createEnemy); }else{createEnemy.style.top = enemyTop + "px"; //子弹与敌军发生碰撞let arrAllFire = oAllFire.children; for(let i=arrAllFire.length-1; i>=0; i--){let newFire = arrAllFire[i]; if(isCollide(newFire,createEnemy)){//撞上的移出子弹oAllFire.removeChild(newFire)//血量减一createEnemy.hp--; if(createEnemy.hp === 0){oWrap.score += [5,1][createEnemy.index]; oScore.innerText = oWrap.score; //敌军发生爆炸 boom({x : createEnemy.offsetLeft,y : createEnemy.offsetTop,w : createEnemy.width,h : createEnemy.height,i : createEnemy.index}); oMap.removeChild(createEnemy); return; }} }//我军与敌军发生碰撞if(myPlane.parentNode&&isCollide(createEnemy,myPlane)){//敌军产生爆炸boom({x:createEnemy.offsetLeft,y:createEnemy.offsetTop,w:createEnemy.width,h:createEnemy.height,i:createEnemy.index}); //我军发生爆炸boom({x:myPlane.offsetLeft,y:myPlane.offsetTop,w:myPlane.width,h:myPlane.height,i:2}); oMap.removeChild(createEnemy); oMap.removeChild(myPlane)//游戏结束gameOver(); return; }requestAnimationFrame(enemyMove); }}}requestAnimationFrame(enemyMove); },[400,350,300,200][level])} //是否发生碰撞function isCollide(newFirePlane,createEnemy){//子弹/我军飞机的位置let fireTop = newFirePlane.offsetTop,fireLeft = newFirePlane.offsetLeft,fireBottom = fireTop + newFirePlane.clientHeight,fireRight = fireLeft + newFirePlane.clientWidth; //飞机的位置let createEnemyTop = createEnemy.offsetTop,createEnemyLeft = createEnemy.offsetLeft,createEnemyRight = createEnemyLeft+createEnemy.clientWidth,createEnemyBotoom = createEnemyTop+createEnemy.clientHeight; //没碰上的四种结果return !(fireTop>createEnemyBotoom || fireBottomcreateEnemyRight || fireRight{createBoom.parentNode&&oMap.removeChild(createBoom); },[1200,1200,2500][data.i])} //游戏结束function gameOver(){clearInterval(oWrap.enemyTimer); clearInterval(oWrap.fireTimer); document.onmousemove = null; gameSettlement(); } //结算游戏function gameSettlement(){let oTotalscore = oSettlement.querySelector(".totalscore"),oAppraise = oSettlement.querySelector(".appraise"); if(oWrap.score < 50){oAppraise.innerHTML = "青铜"; }else if(oWrap.score <100){oAppraise.innerHTML = "黄金"; }else if(oWrap.score <200){oAppraise.innerHTML = "钻石"; }else{oAppraise.innerHTML = "王者"; }oTotalscore.innerHTML = oWrap.score; oScore.style.display = "none"; oSettlement.style.display = "block"; };

【javascript实现简单飞机大战小游戏】以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。