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 ...
随机推荐
- ElasticSearch性能优化
一.搜索效率优化 批量提交 当有大量数据提交的时候,建议采用批量提交. 比如在做 ELK 过程中 ,Logstash indexer 提交数据到 Elasticsearch 中 ,batch size ...
- Git fetch和git pull的区别, 解决Git报错:error: You have not concluded your merge (MERGE_HEAD exists).
Git fetch和git pull的区别, 解决Git报错:error: You have not concluded your merge (MERGE_HEAD exists). Git fet ...
- 二路归并排序，利用递归，时间复杂度o(nlgn)
public class MergeSort { public void mergeSort(int[]data, int left, int right) { if(left >= right ...
- 字符串拆分split
public static void main(String[] args) { String s = "A1B2C3D4E5F6G7H8"; String[] arr1 = s. ...
- js插件封装
插件封装原则 1.暴露出来的实例必须只能是一个 2.IIFE包裹 !执行包裹 函数作用域保护 3.实例化方法不要写在函数内 throw这个方法是报错
- 三十九 Python分布式爬虫打造搜索引擎Scrapy精讲—elasticsearch(搜索引擎)的基本概念
elasticsearch的基本概念 1.集群:一个或者多个节点组织在一起 2.节点:一个节点是集群中的一个服务器,由一个名字来标识,默认是一个随机的漫微角色的名字 3.分片:将索引(相当于数据库)划 ...
- OSI七层模型及应用
应用层:提供访问网络服务的接口.例如telnet. 表示层:提供数据格式转化服务.例如压缩和解压缩. 会话层:提供回话实体的连接服务,进行访问验证和会话管理.例如服务器验证用户登录和断点续传. 传输层 ...
- f5 ddos cc——Mitigating DDoS Attacks with F5 Technology
摘自:https://f5.com/resources/white-papers/mitigating-ddos-attacks-with-f5-technology Mitigating Appli ...
- hibernate12--注解
在之前的基础上删除hbm.xml映射文件 之后修改实体类内容 /** * 部门的实体类 * strategy对应的就是主键生成策略 * GenerationType: * 01.auto:自动选择合适 ...
- spring容器和上下文的理解
spring容器和上下文的理解 spring框架现在使用的很多,这说明有其独特之处----依赖注入,很简单的四个字,在我们需要对象的时候,spring就可以给我们提供所需要的对象,对象的创建.销毁.管 ...