flyplane
看到别人的一个简单制作打飞机的demo,先保存下来有空可以研究一下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>fly</title> <style> body,p{ padding: 0; margin: 0; } main{ height: 600px; width: 600px; border: #ffe; background: #000; margin: 0 auto; position: relative; overflow: hidden; } main h1{ font-size: 40px; color: #ff0; text-align: center; display: none; } .rob-other,.rob-me{ height: 30px; width: 30px; border-radius: 50%; background: red; position: absolute; } .rob-other{ top:0; } .rob-me{ background: blue; top: 570px; left: 50%; transform: translateX(-50%); } .bullet{ height: 10px; width: 4px; background: #fff; position: absolute; } footer{ margin:auto; text-align: center; } </style> </head> <body> <main> <!-- <div class="rob-other"></div> <div class="bullet"></div> --> <h1 class="you-win">You win !!!</h1> <h1 class="game-over">Game over !!!</h1> <div class="rob-me"></div> </main> <footer> <p> ps:空格键发射子弹 上下左右移动 点击黑色区域重新开始</p> </footer> </body> <!-- 引入自己编写的工具函数 --> //<script src="../util/util.js"></script> <script> util={ addEvent: function(dom, type, fn) { if (dom.addEventListener) { dom.addEventListener(type, fn) } else if (dom.attachEvent) { dom.attachEvent("on" + type, fn) } }, removeEvent:function(dom,type,fn){ if(dom.removeEventListener){ dom.removeEventListener(type,fn) }else if(dom.detachEvent){ dom.detachEvent("on"+type,fn) } }, getStyle: function(ele, style) { return window.getComputedStyle ? window.getComputedStyle(ele, null)[style] : ele.currentStyle[style]; }, getKeyCode: function(e) { var e = e || window.event; return e.KeyCode || e.which; }, /** *键盘上下左右触发dom移动; *可以同时触发两个方向的事件; *传入四个参数:dom 需要移动的dom; *main 移动的范围容器 *speed 每秒移动速度; *callback 每次执行触发的函数; */ keyDomMove : (function() { //通过闭包保存变量 var keyCode = { keyDownArr: [], //每次按下上下左右的将当前按下的方向保存 为ture; downKeyCode: function(e) { var e = e || window.event; //只需要用到上下左右 只保存4个键值; if (util.getKeyCode() === 37 || util.getKeyCode() === 38 || util.getKeyCode() === 39 || util.getKeyCode() === 40) { e.preventDefault ? e.preventDefault() : e.cancelBubble = true; if (keyCode.keyDownArr.indexOf(e.keyCode) === -1) { keyCode.keyDownArr.push(e.keyCode) } } }, //每次弹起上下左右的将当前弹起的方向修改为flase; upKeyCode: function(e) { var e = e || window.event; var _index = keyCode.keyDownArr.indexOf(util.getKeyCode()); if (_index >= 0) { keyCode.keyDownArr.splice(_index, 1); } } }; return function(dom, main, speed, callback) { if (typeof speed != "number") { speed = 1; } else { //速度必须大于60px每秒;每次移动的像素小于1px 浏览器会修正为0px;这也是因为运用了定时器的缺点; //除以60是因为浏览器播放动画每秒60帧可以保持动画的流畅性; speed = (speed / 60) > 1 ? (speed / 60) : 1 } //用于左右 和上下穿透; function changeXY(xy, min, max) { if (xy < min) { xy = max; } else if (xy >= max) { xy = min; } return xy; }; var me = this; this.addEvent(document, "keydown", function(e) { var e = e || window.event; keyCode.downKeyCode(); me.addEvent(document, "keyup", function(e) { var e = e || window.event; keyCode.upKeyCode(); }) }) setInterval(function() { keyCode.keyDownArr.forEach(function(item) { var mainHeight = parseFloat(me.getStyle(main, "height")) - 20, mainWidth = parseFloat(me.getStyle(main, "width")) - 20; if (item === 37) { var x = dom.offsetLeft - speed; x = changeXY(x, 0, mainWidth); dom.style.left = x + "px"; } else if (item === 38) { var y = dom.offsetTop - speed y = changeXY(y, 0, mainHeight); dom.style.top = y + "px"; } else if (item === 39) { var x = dom.offsetLeft + speed; x = changeXY(x, 0, mainWidth); dom.style.left = x + "px"; } else if (item === 40) { var y = dom.offsetTop + speed; y = changeXY(y, 0, mainHeight); dom.style.top = y + "px"; } callback && callback(); }) }, 1000 / 60) }; })(), } </script> <script> ~function(){ // 创建定时器 var time = null; var robOther=[], bullet=[]; var robOtherArr=[], bulletArr=[]; var main=document.querySelector("main"); //创建敌机 var createRot = function(num){ num=num||1; while(num--){ var div = document.createElement("div"); div.classList.add("rob-other"); div.style.left=parseInt(Math.random()*540+30)+"px"; main.appendChild(div); robOther.push(div) } }; //敌机和子弹移动 function randomMove(){ time=setInterval(function(){ robOther.forEach(function(item,index){ var left=parseFloat(util.getStyle(item,"left")), top=parseFloat(util.getStyle(item,"top")); var _left=left+(Math.random()*32-16), _top=top+5; robOtherArr[index]=[_left,_top] clearRobOther(item,_top,_left,index) item.style.top=_top+"px"; item.style.left=_left+"px"; deteCrashRob() }); bullet.forEach(function(item,index){ var top=parseFloat(util.getStyle(item,"top")), left=parseFloat(util.getStyle(item,"left")); bulletArr[index]=[left,top]; if(top<=10){ main.removeChild(item); bullet.splice(index,1); bulletArr.splice(index,1); } item.style.top=top-10+"px"; }) deteCrashBullet(); },100) }; //子弹碰撞检测 function deteCrashBullet() { bulletArr.forEach(function(item, index) { var _item = item, _index = index; robOtherArr.forEach(function(item, index) { // console.log(_item + " ;" + item + " ;" ) if ((item[0] - _item[0] < 4) &&( item[0] - _item[0] > -30) && (item[1] - _item[1] < 4) && (item[1] - _item[1] > -30 )) { main.removeChild(robOther[index]) robOther.splice(index, 1); robOtherArr.splice(index, 1); main.removeChild(bullet[_index]); bullet.splice(_index,1); bulletArr.splice(_index, 1); youWin(); } }) }) }; //飞机碰撞检测 function deteCrashRob() { robOtherArr.forEach(function(item, index) { var left = parseFloat(util.getStyle(document.querySelector(".rob-me"), "left")), top = parseFloat(util.getStyle(document.querySelector(".rob-me"), "top")); if (Math.abs(item[0] - left) < 30 && Math.abs(item[1] - top) < 30) { clearInterval(time); util.removeEvent(document, "keydown", event); document.querySelector(".game-over").style.display="block"; gameOver(); } }) } //清空内容 function gameOver(){ clearInterval(time); util.removeEvent(document, "keydown", event); [].slice.call(document.querySelectorAll(".rob-other")).forEach(function(item){ main.removeChild(item) }); [].slice.call(document.querySelectorAll(".bullet")).forEach(function(item){ main.removeChild(item) }) robOther=[]; bullet=[]; robOtherArr=[]; bulletArr=[]; } //敌机自杀 function clearRobOther(dom,top,left,index){ if(top>600||left>600||left<0){ main.removeChild(dom); robOther.splice(index,1); robOtherArr.splice(index,1); createRot(1); } } //战机移动 /*function changeRobMe(dom,bottomNum,leftNum){ var bottom=parseFloat(util.getStyle(dom,"bottom"))+bottomNum, left=parseFloat(util.getStyle(dom,"left"))+leftNum; if(bottom<0){ bottom=0; }else if(bottom>570){ bottom=570 }; if(left<15){ left=15 }else if(left>585){ left=585; } dom.style.left=left+"px"; dom.style.bottom=bottom+"px"; }*/ //创建子弹 function createBullet(){ var div = document.createElement("div"); div.classList.add("bullet"); var rotMeLeft=parseFloat(util.getStyle(document.querySelector(".rob-me"),"left")), rotMeTop=parseFloat(util.getStyle(document.querySelector(".rob-me"),"top")); //console.log(rotMeLeft+" : "+ rotMeBottom) div.style.left=rotMeLeft+"px"; div.style.top=rotMeTop+5+"px"; document.querySelector("main").appendChild(div); bullet.push(div); } //胜利 function youWin(){ if(robOther.length===0){ document.querySelector(".you-win").style.display="block"; gameOver(); } } //按键事件 function event(e) { var e = e || window.event; var keyCode = util.getKeyCode(e); if (keyCode === 32) { createBullet(); } } function init() { var robMe=document.querySelector(".rob-me"); document.querySelector(".game-over").style.display="none"; document.querySelector(".you-win").style.display="none"; robMe.style.left="50%"; robMe.style.top="570px"; util.keyDomMove(robMe,main,200,deteCrashRob); util.addEvent(document, "keydown", event) createRot(5); randomMove(); } init() main.onclick=function(){ gameOver(); init() }}() </script> </html>