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>

flyplane的更多相关文章

c++ 虚函数，纯虚函数的本质区别
转载博客:https://mp.weixin.qq.com/s?__biz=MzAxNzYzMTU0Ng==&mid=2651289202&idx=1&sn=431ffd1fa ...

随机推荐

Github删除账号方法
1.登录后点击头像,选择Settings 2.选择Account,然后再选择Delete your account 3.第一个输入框输入邮箱或者用户名,第二个输入框输入delete my accoun ...
AIDL与Binder的区别
Binder是一个远程对象的基础类,核心部分是远程调用机制,这部分是由IBinder定义的. 它是对IBinder类的实现,其中IBinder类提供了这样一个类的标准的本地化实现方式. 大多数开发者不 ...
IE6+以上清除浮动普遍方法总结
浮动,CSSfloat属性.学过的人应该知道这个属性,平时用的应该也是很多的.特别是在N栏布局中. 但是我们会经常遇到这样一种情况,前面的元素浮动之后会影响后面的元素,后面的元素需要用清除浮动来消灭前 ...
Android开发中的logcat工具使用
http://os.51cto.com/art/200905/126051.htm 用adb直接查看log: adb logcat 清除之前的log: adb logcat -c 加过滤查看lo ...
配置可对外链接的Redis
链接服务器的Redis telnet 192.168.1.200 6379 Trying 192.168.1.200... telnet: Unable to connect to remote ho ...
智课雅思词汇---二十五、形容词后缀-ate-fic-ose-ulent-olent-ous-ulous-y
智课雅思词汇---二十五.形容词后缀-ate-fic-ose-ulent-olent-ous-ulous-y 一.总结一句话总结: 1.形容词后缀-ate(determinate)? determi ...
jquery.js和jquery.min.js的区别介绍
1.区别:jquery官网提供2种jQuery的下载,一种是jquery.js另一种是jquery.min.js文件名不一定完全相同,但通常情况下:jquery.js是完整的未压缩的jQuery库,文 ...
oracle：与mysql相似得find_set_in函数用法
Oracle中实现find_in_set CREATEORREPLACEFUNCTION FIND_IN_SET(piv_str1 varchar2, piv_str2 varchar2, p_sep ...
Android ADT远程主机强迫关闭了一个现有的连接 Connection attempts: 1 解决方法
adb有一个限制, 也可以说是bug. 当手机上同时运行的进程数大于64时, 就会引发adb奔溃. 更深层次的原因, 就是windows API的WaitForMultipleObjects所支持的 ...
python函数式编程之高阶函数学习
基本概念函数式编程,是一种抽象程度很高的编程范式,纯粹的函数式编程语言编写的函数没有变量.因此,任意一个函数,只要输入确定,输出就确定的这种函数我们称之为纯函数,我们称这种函数没有副作用.而允许使用 ...

flyplane

flyplane的更多相关文章

随机推荐

热门专题