javaScript写的飞机大战小游戏

效果图

html文件

<!DOCTYPE html>
<html lang='zh'>
<head><meta charset='UTF-8'><title>mm</title><link rel="stylesheet" href="./css/index.css"><style>*{margin:0;padding:0;list-style:none;user-select:none;}</style>
</head><body><div class="wrap"><!-- 游戏等级 --><div id="level"><h1>飞机大战 Lv1</h1><p>简答模式</p><p>一般模式</p><p>困难模式</p><p>地狱模式</p></div><!-- 游戏界面 --><div id="map"><!-- 我军飞机 --><!-- 敌军飞机1 --><!-- 敌军飞机2 --><div class="allFire"><!-- 我军子弹 --></div></div><!-- 游戏得分 --><div id="score">0</div><!-- 结束游戏的界面 --><div id="settlement"><div>最终得分:<span class="totalscore">10</span></div><div>获得评价:<span class="appraise">青铜</span></div><button>重新开始</button></div></div><script src="./js/index.js"></script>
</body>
</html>

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<oLevelList.length; i++){oLevelList[i].onclick = function(e){startGame(i,{x : e.clientX - oWrap.offsetLeft,//获取鼠标到游戏界面的位置y : e.clientY - oWrap.offsetTop})};
}//重新开始
oButton.onclick = function aginGame(){//背景图停止移动cancelAnimationFrame(oWrap.timer);//隐藏得分界面oSettlement.style.display = "none";//显示等级oLevel.style.display = "block";//分数清0oScore.innerHTML = 0;//oMap.innerHTML = `<div id="allFire"></div>`;oAllFire = document.getElementById("allFire");
}//开始游戏
function startGame(level,pos){hiddenShow();bgImgMove(level);let myPlane = createPlane(level,pos);createEnemy(level,myPlane);oWrap.score = 0;
}//点击游戏等级的消失与隐藏
function hiddenShow(){oLevel.style.display = "none";oMap.style.display = "block";oScore.style.display = "block";
}//背景图移动
function bgImgMove(level){oMap.style.backgroundImage = `url(./img/bg_${level+1}.jpg)`;let bgMove = 0;(function bgMoveTimer(){bgMove++;oMap.style.backgroundPositionY = bgMove + "px";oWrap.timer = requestAnimationFrame(bgMoveTimer);})();
}//我军飞机飞机
function createPlane(level,pos){//创建我军飞机let oImgPlane = new Image();oImgPlane.src = "./img/plane_0.png";oImgPlane.width = 70;oImgPlane.height = 70;oImgPlane.className = "plane";oImgPlane.style.left = pos.x - oImgPlane.width / 2  + "px";oImgPlane.style.top = pos.y - oImgPlane.height / 2 + "px";oMap.appendChild(oImgPlane);//鼠标移动是飞机不断获取鼠标位置let minLeft = -oImgPlane.width/2,minTop = 0,maxLeft = oMap.clientWidth - oImgPlane.width/2,maxTop = oMap.clientHeight - oImgPlane.height/2;document.onmousemove = function(e){let left = e.clientX - oWrap.offsetLeft - oImgPlane.width / 2,top = e.clientY - oWrap.offsetTop - oImgPlane.height / 2;left = Math.min(left,maxLeft);left = Math.max(left,minLeft);top = Math.min(top,maxTop);top = Math.max(top,minTop);oImgPlane.style.left = left + "px";oImgPlane.style.top = top + "px";}fire(level,oImgPlane)return oImgPlane;
}//子弹
function fire(level,oImgPlane){//创建子弹function createFires(isDouble,n){let createFire = new Image();createFire.src = "./img/fire.png";createFire.width = 30;createFire.height = 30;createFire.className = "fire"let left = oImgPlane.offsetLeft + oImgPlane.width/2 - createFire.width/2 ,top = oImgPlane.offsetTop - oImgPlane.height/2;if(isDouble){left = left + oImgPlane.width/3*n;}createFire.style.left = left + "px";createFire.style.top = top + "px";oAllFire.appendChild(createFire);// 子弹运动function fireMove(){if(createFire.parentNode){top -= 10;if(top< -createFire.height){oAllFire.removeChild(createFire);}else{createFire.style.top = top + "px";requestAnimationFrame(fireMove);}}}setTimeout(()=>{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 = `./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 || fireBottom<createEnemyTop || fireLeft>createEnemyRight || fireRight<createEnemyLeft)
}//发生爆炸
function boom(data){let createBoom = new Image();createBoom.src = `./img/${["boom_big","boom_small","plane_0"][data.i]}.png`;createBoom.className = "boom" + ["","","2"][data.i];createBoom.width = data.w;createBoom.height = data.h;createBoom.style.top = data.y + "px";createBoom.style.left = data.x + "px";oMap.appendChild(createBoom);setTimeout(()=>{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写的飞机大战小游戏相关推荐

用python写（飞机大战小游戏）
w'cwc下面我们进入详细教程: 一.首先我们先建一个文件夹 planewars(名字随便取): 然后用我们python中的pycharm打开这个文件,我们飞机大战的项目就在这进行二.我们要写这个小 ...
html+javascript实现的网页版飞机大战小游戏源码
html+javascript实现的网页版飞机大战小游戏源码完整代码下载地址: html+javascript实现的网页版飞机大战小游戏源码 index.html <!DOCTYPE html ...
飞机大战小游戏(超详细)
偷学Python之最后的项目二:飞机大战小游戏(超详细) 古之立大事者,不惟有超世之才,亦必有坚忍不拔之志.--苏轼甜甜先说这次用Python中的pygame模块来完成一个飞机大战的小游戏:基本思 ...
C语言—飞机大战小游戏
哈工大经典C语言大作业-飞机大战小游戏,源码如下,已经通过编译获得评分19+ (满分20)当时还是太菜了呜呜呜. 可以给大家参考一下,好像本来是加了音乐的,但是你们可能没有对应的音乐MP3文件,所以如 ...
华清大作业 QT实现飞机大战小游戏
在学习完QT后,我尝试做了一下飞机大战这个小游戏. 首先是小游戏需要实现的功能: 1.滚动的背景 2.子弹的制作和射击 3.敌人的制作 4.爆炸效果首先我们创建好项目后,我们开始创建新的头文件,用来 ...
C++ 飞机大战小游戏 EGE
C++ EGE 实现飞机大战小游戏图形界面飞机大战因为没有了地图的限制,所以相比较坦克大战而言稍微简单一些. 而游戏的可玩性和复杂度一般应该是成正比的. 但是飞机大战并没有因为地图上的省略而变得没有 ...
Qt学习总结——飞机大战小游戏制作
Qt学习总结--飞机大战小游戏制作 1. 需求分析这篇文章写于2020年暑假,完成学校实训项目之后,对自己的项目实践做了一个总结,回顾整个项目的制作过程,同时也复习一下Qt的相关知识,总结项目制作过 ...
python飞机大战加背景音乐_python实现飞机大战小游戏 python飞机大战中的音频文件怎么改成MP3...
怎么样用Python写飞机大战游戏 python开发飞机大战外星人游戏怎么弄双人模式新的一年,哪怕仍是一个人,也要活得像一支队伍,为自己的头脑和心灵招兵买马,不气馁,有召唤,爱自由. 主函数 impo ...
python小游戏——飞机大战小游戏（附源码）
写在前面的一些P话: 大家之前用python编写过飞机大战的部分代码, 只能够展示英雄飞机,背景,敌机和发射子弹, 今天把背景音乐,击毁敌机,爆炸特效,得分等等相关功能一并加入进来, 代码有点长,三百 ...

javaScript写的飞机大战小游戏

javaScript写的飞机大战小游戏相关推荐

最新文章

热门文章