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

随机推荐

idea通过springboot初始化器新建项目
1.通过初始化器新建项目,勾选后对应生成的pom文件以及生成的包路径 2.生成项目后点击稍后弹出的自动自动导入maven工程的改变,当pom中有依赖改变时会自动刷新导入依赖 3.删除自动生成项目的 ...
MQ 个人小结
在PCS项目: talking 发送队列1.1 创建@Beanpublic Queue orderTakingQueue() { return createQueue(orderTakingQueue ...
Struts2小例子
第一个Struts 2.0例子工具:MyEclipse 6.0.1 第一步:新建web project 第二步:为项目加入Struts 2.0 的jar包官方下载地址:http://struts. ...
Mysql 索引复习笔记
之前学习索引后由于一直没怎么用,所以也只是粗略看了一下,最近发现索引的用处很大,并且也很多知识点,在此做复习记录. 什么是索引? 百度百科是这样描述的: 索引是为来加速对表中数据行中的检索而创建的一种 ...
Java小程序之回文数字
题目:一个5位数,判断它是不是回文数.即12321是回文数,个位与万位相同,十位与千位相同. 下面是代码: package test; public class BackNum { public st ...
Android DDMS ADB启动失败错误解决！
ADB server didn't ACK && make sure the plugin is properly configured! adb启动失败一般是端口被占用! 解决方法和 ...
用requests库爬取猫眼电影Top100
这里需要注意一下,在爬取猫眼电影Top100时,网站设置了反爬虫机制,因此需要在requests库的get方法中添加headers,伪装成浏览器进行爬取 import requests from re ...
用OpenCV进行视频截取
记录用OpenCV进行视频截取. 核心代码如下: CvCapture* capture = cvCreateFileCapture(src_avi_file.c_str()); if (capture ...
C++程序设计之提高效率
设计C++程序时,总结起来可以从如下几点提高效率: 1.并发 2.异步 3.缓存
iptables（一）iptables概念
为什么想写这个系列呢?openstack中的安全组.防火墙都是用iptables实现,后面的规则我们如果想要完全理解,不懂iptables的话,或者不精通iptables的话,会看的比较吃力.所以下定 ...

flyplane

flyplane的更多相关文章

随机推荐

热门专题