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 ...

随机推荐

adjacent cache line prefetch
adjacent cache line prefetch 预读取邻近的缓存数据. 计算机在读取数据时,会智能的认为要读取的数据旁边或邻近的数据也是需要的, 那么其在处理的时候就会将这些邻近的数据预先读 ...
mysql全库搜索指定字符串
mysql全库搜索指定字符串 DELIMITER // DROP PROCEDURE IF EXISTS `proc_FindStrInAllDataBase`; # CALL `proc_FindS ...
maven项目包结构
groupId填写公司名称,如com.enn.ennewartifactId填写项目名称webapps如父工程: <groupId>com.enn.ennew</groupId> ...
通过HBase API进行开发
http://www.cnblogs.com/netbloomy/p/6683509.html 一.将HBase的jar包及hbase-site.xml添加到IDE 1.到安装HBase集群的任意一台 ...
Find Min In Rotated Sorted Array2，包含重复数字的反转序列找最小值。
public int findMin(int[] nums) { return findMin(nums, 0, nums.length - 1); } public int findMin(int[ ...
Matlab操作矩阵的相关方法
Matlab操作矩阵的相关方法下面这篇文章主要是对吴恩达老师机器学习中matlab操作的一个整理和归纳一.基本操作 1.生成矩阵(ones.zeros) A = [1 2;3 4;5 6] ...
docker定义数据卷及数据卷的备份恢复
前言:生产环境中使用docker时,往往需要对数据进行持久化(只有把容器导出为镜像,才能够保存写的数据,否则容器删除或者停止,所有数据都会没有),或者需要在多个容器之间进行数据共享,这必然涉及容器的数 ...
如何将Django部署到Apache服务器上
操作环境: Ubuntu 16.04 Apache 2.4 Django 1.9 Python 2.7 mod_wsgi 前言:本教程纯自己查阅资料后整理,望对大家有帮助! 1. 安装 mod_ws ...
django1.9的static文件配置
修改setting.py,后面加入 STATIC_URL = '/static/' 上面那句是写死的,让django能调用静态文件,下面这句是配置静态文件的路径,路径可以填写多个,用逗号隔开 STAT ...
js:s上次预览，上传图片预览，图片上传预览
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

flyplane

flyplane的更多相关文章

随机推荐

热门专题