html+css+js实现飞机大战小游戏

前言

废话不多说，直接上源码

一、requestAnimationFrame是什么？

在Web应用中，实现动画效果的方法比较多，Javascript 中可以通过定时器 setTimeout/ setInterval 来实现，css3 可以使用 transition和 animation 来实现，html5 中的 canvas 也可以实现。除此之外，html5 还提供一个专门用于请求动画的API，那就是 requestAnimationFrame。

原文详解链接：/qq_45890970/article/details/123576140

二、源码

<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style type="text/css">* {margin: 0;padding: 0;font-family: "Microsoft yahei", serif;}li {list-style-type: none;}body {overflow: hidden;user-select: none;/* 禁止选择文字 */-moz-user-select: -moz-none;/* 禁止鼠标右键复制 */-ms-user-select: none;}#box {position: relative;width: 512px;height: 768px;margin: 20px auto;}#map {overflow: hidden;position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: url("img/bg_1.jpg");}#level {position: absolute;top: 0;left: 0;z-index: 1;width: 100%;height: 100%;}#level h1 {font-size: 40px;padding-top: 60px;padding-bottom: 150px;line-height: 60px;text-align: center;color: #fff;}#level p {margin: 30px auto;width: 200px;height: 35px;line-height: 35px;text-align: center;background: #fff;font-weight: bolder;cursor: pointer;}#level p:hover {background: pink;color: #fff;}#map .plane,#map .biu,#map .enemy,#map .boom,#map .boom2 {position: absolute;}#map .plane {z-index: 8;}#map .biu {z-index: 10;}#map .boom2 {z-index: 11;animation: bling 2s 1;animation-fill-mode: forwards;}#map .enemy {z-index: 9;}#map .boom {z-index: 7;animation: fade .8s 1;animation-fill-mode: forwards;}/*爆炸后的消失效果*//* @keyframes动画是循环的而transform 只执行一遍. */@keyframes fade {from {/* “1”完全不透明 */opacity: 1;}to {opacity: 0;}}@keyframes bling {0% {opacity: 1;}20% {opacity: 0;}40% {opacity: 1;}60% {opacity: 0;}80% {opacity: 1;}100% {opacity: 0;}}#score {display: none;position: absolute;top: 10px;left: 10px;color: #fff;line-height: 20px;font-size: 14px;font-weight: bold;/* z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。 */z-index: 20;}#restart {display: none;position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: 30;}#restart p {width: 300px;height: 40px;line-height: 20px;margin: 140px auto;color: #fff;}#restart p span {display: block;font-weight: bolder;font-size: 22px;text-align: center;}#restart .p1 span {color: red;}#restart .p2 span {color: #ffa80c;}#restart .p3 {font-family: "楷体";font-size: 20px;width: 100px;height: 35px;background: rgb(255, 255, 255);background: rgba(255, 255, 255, .8);color: #000;font-weight: bolder;line-height: 35px;text-align: center;border-radius: 3px;/* 设置浏览网页时鼠标光标的样式为手 */cursor: pointer;}#restart .p3:hover {background: white;}</style><script type="text/javascript">window.onload = function () {/*告诉浏览器——你希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行注意：若你想在浏览器下次重绘之前继续更新下一帧动画，那么回调函数自身必须再次调用window.requestAnimationFrame()*/// requestAnimationFrame实现无限循环动画window.requestAnimationFrame = window.requestAnimationFrame || function (fn) {// 间隔时间为每秒60帧// 会把每一帧中的所有DOM操作集中起来，在一次重绘或回流中就完成，并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率// 一般来说，这个频率为每秒60帧return setTimeout(fn, 1000 / 60)};//方法用于取消以前通过对window.requestAnimationFrame()的调用计划的动画帧请求。window.cancelAnimationFrame = window.cancelAnimationFrame || clearTimeout;//定义全局变量,获取数据var oBox = document.getElementById("box"),oScore = document.getElementById("score"),oRe = document.getElementById("restart"),oLevel = document.getElementById("level"),oMap = document.getElementById("map"),oBiuAll = document.getElementById("BiuAll"),// 获取节点allBiu = oBiuAll.children,allReChild = oRe.children,// offsetTop是找距离定位父级左边的距离，没有定位则找bodyboxOffsetTop = oBox.offsetTop,// offsetLeft是找距离定位父级上边的距离boxOffsetLeft = oBox.offsetLeft;//启动exe();//初始选择难度界面的点击事件function exe() {//难度选择var aP = oLevel.getElementsByTagName("p");for (var i = 0, length = aP.length; i < length; i++) {(function (i) {aP[i].onclick = function (e) {e = e || window.event;startGame(i, {x: e.clientX - boxOffsetLeft,y: e.clientY - boxOffsetTop});//第一个实参为序号，第二个实参为存储着鼠标距离map边缘距离的json}})(i);}//restart按钮allReChild[2].onclick = function (ev) {// cancelAnimationFrame(oMap.bgTimer);//停止背景滚动oRe.style.display = "none";oLevel.style.display = "block";oScore.innerHTML = 0;oMap.innerHTML = "<div id='BiuAll'></div>";oBiuAll = document.getElementById("BiuAll");allBiu = oBiuAll.children;};}//开始游戏function startGame(level, pos) {//执行隐藏和清理clearMap();//执行 Map背景相关操作MapBg(level);//执行创建我军var p = plane(level, pos);//执行创建敌军enemy(level, p);//enemy(level , plane(level , pos));//得分清零oBox.score = 0;}//隐藏和清理function clearMap() {oScore.style.display = "block";oLevel.style.display = "none";//隐藏关卡选择框}//Map背景选择与运动function MapBg(level) {oMap.style.backgroundImage = "url('img/bg_" + (level + 1) + ".gif')";(function m() {oMap.bgPosY = oMap.bgPosY || 0;// oMap.bgPosY++;//背景移动oMap.style.backgroundPositionY = oMap.bgPosY + 'px';oMap.bgTimer = requestAnimationFrame(m);})();}//创建我军function plane(level, pos) {//创建我军图片var oImg = new Image();oImg.src = "img/plane_0.png";oImg.width = 70;oImg.height = 70;oImg.className = "plane";oImg.style.left = pos.x - oImg.width / 2 + 'px';oImg.style.top = pos.y - oImg.height / 2 + 'px';oMap.appendChild(oImg);//边界值var leftMin = -oImg.width / 2,leftMax = oMap.clientWidth - oImg.width / 2,topMin = 0,topMax = oMap.clientHeight - oImg.height / 2;//加入mousemove事件(飞机移动)document.onmousemove = function (ev) {ev = ev || window.event;//获取飞机实时坐标，并限制边界值var left = ev.clientX - boxOffsetLeft - oImg.width / 2;var top = ev.clientY - boxOffsetTop - oImg.height / 2;left = Math.max(leftMin, left);left = Math.min(leftMax, left);top = Math.max(topMin, top);top = Math.min(topMax, top);//赋值oImg.style.left = left + 'px';oImg.style.top = top + 'px';};//调用子弹函数fire(oImg, level);return oImg;}//我军子弹function fire(oImg, level) {oBox.biuInterval = setInterval(function () {if (oBox.score >= 500) {createBiu(true, -1);createBiu(true, 1);} else {createBiu();}}, [100, 200, 200, 15][level]);function createBiu(index, d) {//创建子弹var oBiu = new Image();oBiu.src = "img/fire1.png";oBiu.width = 30;oBiu.height = 30;oBiu.className = "biu";var left = oImg.offsetLeft + oImg.width / 2 - oBiu.width / 2;var top = oImg.offsetTop - oBiu.height + 5;if (index) {left += oBiu.width * d}oBiu.style.left = left + "px";oBiu.style.top = top + 'px';oBiuAll.appendChild(oBiu);//子弹运动function m() {if (oBiu.parentNode) {var top = oBiu.offsetTop - 20;if (top < -oBiu.height) {oBiuAll.removeChild(oBiu);} else {oBiu.style.top = top + 'px';requestAnimationFrame(m);}}}//将运动执行队列放后面，不然子弹会直接初始就在 top-50 的位置setTimeout(function () {requestAnimationFrame(m);}, 50);}}//创建敌军function enemy(level, oPlane) {var w = oMap.clientWidth,h = oMap.clientHeight;var speed = [5, 6, 8, 8][level]; //敌军下落速度var num = 1;oBox.enemyIntetval = setInterval(function () {var index = num % 30 ? 1 : 0;//生成敌军var oEnemy = new Image();oEnemy.index = index;oEnemy.HP = [20, 1][index];oEnemy.speed = speed + (Math.random() * 0.6 - 0.3) * speed;oEnemy.speed *= index ? 1 : 0.5;oEnemy.src = "img/enemy_" + ["big", "small"][index] + ".png";oEnemy.className = "enemy";oEnemy.width = [104, 54][index];oEnemy.height = [80, 40][index];oEnemy.style.left = Math.random() * w - oEnemy.width / 2 + 'px';oEnemy.style.top = -oEnemy.height + 'px';oMap.appendChild(oEnemy);num++;//敌军运动function m() {if (oEnemy.parentNode) {var top = oEnemy.offsetTop;top += oEnemy.speed;if (top >= h) {//漏掉飞机减分oBox.score--;oScore.innerHTML = oBox.score;oMap.removeChild(oEnemy);} else {oEnemy.style.top = top + 'px';//子弹碰撞检测for (var i = allBiu.length - 1; i >= 0; i--) {var objBiu = allBiu[i];if (coll(oEnemy, objBiu)) {//移除子弹oBiuAll.removeChild(objBiu);oEnemy.HP--;if (!oEnemy.HP) {//打掉飞机加分oBox.score += oEnemy.index ? 2 : 20;oScore.innerHTML = oBox.score;//敌军爆炸图boom(oEnemy.offsetLeft, oEnemy.offsetTop, oEnemy.width, oEnemy.height, index ? 0 : 2);//移除敌军oMap.removeChild(oEnemy);return;}}}//我军碰撞检测if (oPlane.parentNode && coll(oEnemy, oPlane)) {//敌军爆炸图boom(oEnemy.offsetLeft, oEnemy.offsetTop, oEnemy.width, oEnemy.height, index ? 0 : 2);//我军爆炸图boom(oPlane.offsetLeft, oPlane.offsetTop, oPlane.width, oPlane.height, 1);//移除敌军oMap.removeChild(oEnemy);//移除我军oMap.removeChild(oPlane);GameOver();return;}requestAnimationFrame(m);}}}requestAnimationFrame(m);}, [350, 150, 120, 40][level]);}//爆炸函数function boom(l, t, w, h, i) {var oBoom = new Image();oBoom.src = "img/" + ["boom_small", "plane_0", "boom_big"][i] + ".png";oBoom.className = 'boom' + ["", "2", ""][i];oBoom.width = w;oBoom.height = h;oBoom.style.left = l + "px";oBoom.style.top = t + 'px';oMap.appendChild(oBoom);setTimeout(function () {oBoom.parentNode && oMap.removeChild(oBoom);}, [1200, 2500, 1200][i]);}//两个物体碰撞检测function coll(obj1, obj2) {var T1 = obj1.offsetTop,B1 = T1 + obj1.clientHeight,L1 = obj1.offsetLeft,R1 = L1 + obj1.clientWidth;var T2 = obj2.offsetTop,B2 = T2 + obj2.clientHeight,L2 = obj2.offsetLeft,R2 = L2 + obj2.clientWidth;return !(B1 < T2 || R1 < L2 || T1 > B2 || L1 > R2);}//游戏结束function GameOver() {document.onmousemove = null; //清除移动事件clearInterval(oBox.biuInterval);//不再产生新子弹clearInterval(oBox.enemyIntetval);//不再产生新敌军restart();}//结算+重新开始function restart() {oScore.style.display = "none";var s = oBox.score;var honor;if (s < -300) {honor = "闪避+MAX！！！";} else if (s < 10) {honor = "菜得…算了我不想说了…";} else if (s < 30) {honor = "抠脚侠！";} else if (s < 100) {honor = "初级飞机大师";} else if (s < 200) {honor = "渐入佳境";} else if (s < 500) {honor = "中级飞机大师";} else if (s < 1000) {honor = "高级飞机大师";} else if (s < 5000) {honor = "终极飞机大师";} else {honor = "孤独求败！";}oRe.style.display = "block";allReChild[0].children[0].innerHTML = s;allReChild[1].children[0].innerHTML = honor;}}</script></head><div id="box"><div id="level"><h1>飞机大作战</h1><p>简单</p><p>中等</p><p>困难</p><p style="color: #f00">开挂啊</p></div><div id="map"><div id="BiuAll"></div></div><div id="score">0</div><div id="restart"><p class="p1">您的最终得分是：<span>0</span></p><p class="p2">获得称号：<span>抠脚侠</span></p><p class="p3">重新开始</p></div></div></body></html>

总结

以上就是今天所展示的内容，本文是我初学这门课程后做的一个实战小项目，欢迎何为大佬留言指点