看到别人的一个简单制作打飞机的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>