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

随机推荐

Caffe实现多标签输入，添加数据层(data layer)
因为之前遇到了sequence learning问题(CRNN),里面涉及到一张图对应多个标签.Caffe源码本身是不支持多类标签数据的输入的. 如果之前习惯调用脚本create_imagenet.s ...
mysql——jdbc驱动下载&连接mysql例子
mysql-connector-java-5.1.46.zip[解压后里面jar文件就是所需要的] https://dev.mysql.com/get/Downloads/Connector-J/my ...
ScrollView嵌套使用ListView冲突的解决与分析
因为ScrollView与ListView都是具有滚动条的控件,所以嵌套在一起使用的时候可能会出现事件的冲突,比如我就遇见了ListView中只显示一条数据的问题.解决的办法,就是自定义了一个List ...
SQL中比较好的For xml 用法实例
--包裹单号入库时间交易号商品分类商品名称实付款SELECT a.DeliveryCode AS '包裹单号',a.DomesticWarehouseInTime AS '入库时间',a.T ...
通过案例说明struts2的工作流程
本文主要是通过一个例子来说明Struts2的一个工作流程. 首先定义一个登录页面login.jsp: [java] view plaincopy <%@ page language=" ...
Spring + Spring MVC + MyBatis框架整合
---恢复内容开始--- 一.Maven Web项目创建如有需要,请参考:使用maven创建web项目二.Spring + Spring MVC + MyBatis整合 1.Maven引入需要的J ...
D3.js学习笔记（三）——创建基于数据的SVG元素
目标在这一章,你将会使用D3.js,基于我们的数据来把SVG元素添加到网页中.这一过程包括:把数据绑定到元素上,然后在使用这些元素来可视化我们的数据. 注意:不同于前几章,我们从一个完整的代码开始, ...
spring3: 访问Resource — ResourceLoader/ResourceLoaderAware接口
4.3.1 ResourceLoader接口 ResourceLoader接口用于返回Resource对象:其实现可以看作是一个生产Resource的工厂类. public interface Re ...
oracle：与mysql相似得find_set_in函数用法
Oracle中实现find_in_set CREATEORREPLACEFUNCTION FIND_IN_SET(piv_str1 varchar2, piv_str2 varchar2, p_sep ...
HYSBZ - 2818莫比乌斯反演
链接题意很简洁不说了题解:一开始我想直接暴力,复杂度是O(log(1e7)*sqrt(1e7))算出来是2e9,可能会复杂度爆炸,但是我看时限是10s,直接大力莽了一发暴力,没想到就过了= = 就 ...

flyplane

flyplane的更多相关文章

随机推荐

热门专题