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 ...
随机推荐
- c语言字符处理函数常见使用集合
1.最近看一些开源项目代码时,总会看到 c 语言中一些 "str" 开头的处理字符串的用法,有的之前没用到过,特此记录,随时看到随时添加. 这里不提出源码,只是一些使用说明加例子 ...
- DevExpress组件之——TreeList组件
由于是第一次接触到第三方控件DevExpress中的TreeList,对其进行了进一步的研究,采用递归算法实现.做下自己熟悉第三方控件的整个过程,为和我一样处理于起步阶段的同仁们提供个参考,以下为最终 ...
- tyvj 1062 合并傻子 区间dp，典型模型石子归并
P1062 合并傻子 时间: 1000ms / 空间: 131072KiB / Java类名: Main 背景 从前有一堆傻子,钟某人要合并他们~但是,合并傻子是要掉RP的...... 描述 在一个园 ...
- Java EE启示录
前言 最近的这段时间一直在学习Java EE,刚刚完成了从0到1的蜕变,所以顺便整理一下我所了解到的Java EE,给刚入门学习的新人一些头绪,而所谓“启示录”,就是这个意思. 一.Java EE是什 ...
- Entity Framework 6 预热、启动优化
虽然文章题目是针对EF的,但涉及的内容不仅仅是EF. 场景介绍 目前在做的一个项目,行业门户,项目部分站点按域名划分如下: user.xxx.com:用户登陆注册 owner.xxx.com:个人用户 ...
- js的onclick字符串参数的解决办法
<a href='#' onclick='onedit(\""+ name + "\")';>编辑</a>" 一些写法实例~~ ...
- Ajax基础（五）--封装库
jQuery ajax请求的基本语法: 一.封装为对象: ajax.txt代码: {"id":"102","username":" ...
- poj2478欧拉函数
打表欧拉函数,求2到n的欧拉函数和 #include<map> #include<set> #include<cmath> #include<queue> ...
- 安装Charles报错
去年用的是charles4.1.2版本,今年这个版本的安装包始终安装报错,不管公司电脑还是自己电脑........ 我的解决方案很Lower的.......... 登录Charles官网:https: ...
- TCPL学习笔记：编写expand(s1, s2),将字符串s1中类似于a-z一类的速记符号在s2中扩充完整。可以处理大小写及字符，以及a-b-c， a-z0-9以及-a-z等多种情况。
话不多说,看代码: #include <stdio.h> #include <stdlib.h> int main(void) { ] = "a-z0-9hahah- ...