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

　　

最新文章

  1. 【零基础学习iOS开发】【转载】
  2. 一个关于Delphi XML处理单元的BUG
  3. linux 禁ping本机方法
  4. java正则表达式四种常用的处理方式是怎么样呢《匹配、分割、代替、获取》
  5. 使用markdown及highlight
  6. (转)asp.net 高质量缩略图
  7. ［我的疑问］String? = &quot;Skiy Chan&quot; 中的问号是什么意思？
  8. Altium Designer 从导入DXF文件，并转换成板框
  9. [转] IPC之管道、FIFO、socketpair
  10. 查询oracle表和sql数据量大小
  11. iOS开发之录音
  12. jQuery Tags Input Plugin 插件的使用
  13. JavaScript 之 HelloWorld编写
  14. Microsoft Visual Studio | VS打开解决方案时加载失败，或者出现错误提示
  15. arcgis api 3.x for js 入门开发系列十八风向流动图（附源码下载）
  16. 使用yield返回IEnumber&lt;T&gt;集合
  17. 自己写一个java的mvc框架吧（二）
  18. python 运行脚本报错 from keyword import iskeyword as _iskeyword ImportError: cannot import name iskeyword，说明python环境坏了，得重装，尚不知具体原因，
  19. javascript系列学习----Creating objects
  20. Twaver的mono-desiner导出的json文件解析

热门文章

  1. How to create and manage configuration backups in Internet Information Services 7.0
  2. 深入理解虚拟机、容器和Hyper技术
  3. selenium学习笔记（简单的元素定位）
  4. 为什么font-size推荐使用具体数值？
  5. 牛客比赛-假的字符串-Trie+拓扑
  6. Project Euler 126 - Cuboid layers
  7. struts转换器
  8. pycharm 设置 默认信息
  9. Java8_02_lambda表达式
  10. LeetCode OJ：Linked List Cycle II（循环链表II）