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 ...
随机推荐
- quartz(8)--其他
JOB并发执行 Quartz定时任务默认都是并发执行的,不会等待上一次任务执行完毕,只要间隔时间到就会执行, 如果定时任执行太长,会长时间占用资源,导致其它任务堵塞. 设置为非并发 1)Job类加上注 ...
- Buildbot初探
什么是Buildbot Buildbot是一个持续集成和自动化测试框架,我在毕业刚进VMware不久的一个和以色列人合作的项目中接触到Buildbot,当时我真的恨死它了...经常随意的提交了一些代码 ...
- CocoaPods学习系列3——创建和使用私有Pods
前一篇记录了使自己的项目支持CocoaPods管理的过程,核心的步骤就是podspec的配置和提交.这个文件,记录了类库的详细信息,用于对类库的集成. 需要注意的一点,上一篇创建的podspec文件, ...
- IE报错:缺少标识符、字符串或数字
在调试ExtJS程序时,在firefox和chrome上都能显示,但一到IE上就报错,后来从左下角的JS报错提示中才发现,原来是JS代码中多加了个逗号. menu: { items: [{ text: ...
- scala学习手记38 - 方法命名约定和for表达式
方法命名约定 之前在学习<运算符重载>一节时曾经说过一个方法命名约定:方法的第一个字符决定了方法的优先级.现在再说另一个命名约定:如果方法以冒号(:)结尾,则调用目标是运算符后面的实例. ...
- 编写第一个springboot应用
1.1.1. 设置spring boot的parent <parent> <groupId>org.springframework.boot</groupId> ...
- layer弹出层 获取index
function closelayer(){ var index = parent.layer.getFrameIndex(window.name); parent.layer.close(index ...
- 【lightoj-1055】Going Together(BFS)
链接:http://www.lightoj.com/volume_showproblem.php?problem=1055 类似推箱子的游戏,一条命令可以让abc三个小人同时移动,但是出界或者撞墙是不 ...
- python基础之面向对象（二）
面向对象对程序设计OOD 找对象---->找类(归纳对象相同的特征与技能,还有没和对象独有的特征)面向对象编程OOP 先定义类---->实例化出对象查看成绩,交作业 在python3中,所 ...
- 用js 创建 简单查找 删除 二叉树
<!DOCTYPE html> <html> <body> <canvas id="myCanvas" width="2000& ...