JavaScript—飞机大战2版
前面的思路对了 BUG 出在了计时器和没有加判断页面是否存在元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
} #view {
margin: 0 auto;
width: 400px;
height: 680px;
background-color: #00b4ff;
opacity: 0.9;
position: relative;
} /*自己飞机的样式*/
#air {
width: 34px;
height: 26px;
position: absolute;
background-color: palegreen;
} /*敌机的样式*/
.hair {
width: 34px;
height: 26px;
position: absolute;
background-color: darkmagenta;
} /*子弹的样式*/
.bullet {
width: 4px;
height: 10px;
position: absolute;
background-color: red;
}
h1{
position: absolute;
top: 300px;
left: 700px;
}
</style> </head>
<body>
<div id="view">
</div>
<h1 id="h1">0</h1>
</body>
<script>
//获取区域
let view = document.getElementById('view');
// 创建自己的飞机
let air = document.createElement('div');
let count=0
let h1=document.getElementById('h1')
air.id = 'air'
document.body.appendChild(air)
document.onmousemove = function (e) {
e = e || window.event
// 边距
let aX = view.offsetLeft < e.clientX - air.offsetWidth / 2 && e.clientX + air.offsetWidth / 2 < view.offsetLeft + view.offsetWidth
let aY = view.offsetTop < e.clientY - air.offsetHeight / 2 && e.clientY + air.offsetHeight / 2 < view.offsetTop + view.offsetHeight
if (aX && aY) {
air.style.left = e.clientX - air.offsetWidth / 2 + 'px';
air.style.top = e.clientY - air.offsetHeight / 2 + 'px'
ObJ_billet.bif = true
}
}
//监听飞机子弹
let GAME_time = setInterval(function () {
//搜索所有的子弹，相遇 就被击毙。相遇条件 飞机左<=left 子弹<=you top 子弹<=飞机
for (let i = 0; i < ObJ_billet.arr.length; i++) {
let barr = ObJ_billet.arr[i].split('|')
for (let j = 0; j < ObJ_Hair.arr.length; j++) {
let harr = ObJ_Hair.arr[j].split('|')//id x y
if (document.getElementById(barr[0]) && document.getElementById(harr[0])) {
console.log(1)
let yif = parseInt(barr[2])+3 <= parseInt(harr[2]) //Y相遇
let xif = parseInt(barr[1]) >= parseInt(harr[1]) && parseInt(barr[1]) <= parseInt(harr[1]) + 25
if (yif && xif) {
count++;
h1.innerText=count+''
//消失元素 关闭记时器
let billet_a = document.getElementById(barr[0])
let hair_a = document.getElementById(harr[0])//获取敌机 billet_a.parentNode.removeChild(billet_a)//删除子弹
hair_a.parentNode.removeChild(hair_a)//删除敌机
// clearInterval(runBl_time)
//clearInterval(runHair_time)
}
}
}
}
},100)
let caerBl_time = setInterval(
function () {
if (ObJ_billet.bif) {
//在自己飞机的上方
caeationBillet()
caeationHair() }
}, 1000) //用来保存子弹数据
let ObJ_billet = {
name: 'billet_',
num: 0,
bif: false,
//是否在区域
arr: []//保存id，xy坐标
}
let ObJ_Hair = {
name: 'hair_',
num: 0,
arr: []//保存id，xy坐标
}
// let runBl_time = null;//子弹定时器
// let runHair_time = null;//飞机定时器
// // 子弹运动
function run_Billet(element, i) {
let runBl_time = setInterval(function () {
element.style.top = element.offsetTop - 1 + 'px'
ObJ_billet.arr[i] = element.id + '|' + element.offsetLeft + '|' + element.offsetTop
// 超出边界消失
if (element.offsetTop < 0) {
element.parentNode.removeChild(element);
clearInterval(runBl_time)
}
}, 30)
} // 敌机运动
function run_Hair(element, i) {
let runHair_time = setInterval(function () {
element.style.top = element.offsetTop + 1 + 'px' ObJ_Hair.arr[i] = element.id + '|' + element.offsetLeft + '|' + element.offsetTop + '|' + ''
// 超出边界消失
if (element.offsetTop > view.offsetHeight - element.offsetHeight) {
element.parentNode.removeChild(element);
clearInterval(runHair_time)
}
}, 30)
} //创建子弹
function caeationBillet() {
let billet = document.createElement('div')
billet.className = 'bullet'
billet.id = ObJ_billet.name + ObJ_billet.num;
document.body.appendChild(billet)
//子弹在飞机上方
billet.style.left = air.offsetLeft + air.offsetWidth / 2 + 'px'
billet.style.top = air.offsetTop - billet.offsetHeight - 1 + 'px'
//保存数据
ObJ_billet.arr[ObJ_billet.num] = billet.id + '|' + billet.offsetLeft + '|' + billet.offsetTop + '|' + '1'
//子弹运动
run_Billet(billet, ObJ_billet.num)
// 自增1
ObJ_billet.num += 1
//挡子弹有最多50个
if (ObJ_billet.num >= 50) {
ObJ_billet.num = 0;
}
} // 创建敌机
function caeationHair() {
let hair = document.createElement('div')
hair.className = 'hair'
hair.id = ObJ_Hair.name + ObJ_Hair.num;
document.body.appendChild(hair)
//飞机由上往下 left随机大小0到view宽度
let random_L = randomNum(view.offsetLeft, view.offsetLeft + view.offsetWidth - hair.offsetWidth)
hair.style.left = random_L + 'px'
hair.style.top = 0 + 'px'
ObJ_Hair.arr[ObJ_Hair.num] = hair.id + '|' + hair.offsetLeft + '|' + hair.offsetTop run_Hair(hair, ObJ_Hair.num)
// 自增1
ObJ_Hair.num += 1
//飞机有最多100个
if (ObJ_Hair.num >= 50) {
ObJ_Hair.num = 0;
}
} //生成从minNum到maxNum的随机数
function randomNum(minNum, maxNum) {
return parseInt(Math.random() * (maxNum - minNum + 1) + minNum) } </script>
</html>
总结：
BUG还是有，就是让他最小化以后 过一会就乱了。。。。还有我用了很多计时器套循环，我担心效率 与内存空间的问题。
当然 还是满激动的。特别是第一次敌机和子弹相遇的时候。就好像电视剧《创业时代》郭鑫年说的 这就是我的孩子一样
JavaScript—飞机大战2版的更多相关文章
- Java飞机大战MVC版
PlaneWar Java飞机大战MVC版 //无聊时偷的雷霆战机素材写了一个飞机大战,本意是练习mvc,但写得还是不清晰 github下载:https://github.com/dejavudwh/ ...
- javascript飞机大战-----001分析
1.游戏引擎 首先要做飞机大战要考虑的是这个游戏被分成了哪几大部分?这样我们一块一块去做,特别清晰明了.那么接下来我们就简单的分析下飞机大战分成了哪几大部分 1.游戏引擎 2.英雄机 3.敌机 4.子 ...
- JavaScript—飞机大战
今天来写个游戏,飞机大战 1,布局 2,思路 1,动态创建自己的飞机 让它在规定的区域,跟着鼠标运动. 2,在自己飞机的上方,间隔1s生成子弹.子弹往上移动 当top:0 子弹消失 3,每隔1s 产生 ...
- javascript 飞机大战完整代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- javascript飞机大战-----0010完整版代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- javascript飞机大战-----008积分
/* 创建敌机: */ function Enemy(blood,speed,imgs,scroe){ //敌机left this.left = 0; //敌机top this.top = 0; // ...
- javascript飞机大战-----006创建敌机
先写一个敌机类 /* 创建敌机: */ function Enemy(blood,speed,imgs){ //敌机left this.left = 0; //敌机top this.top = 0; ...
- javascript飞机大战-----009游戏结束
/* 游戏引擎 */ var Engine = { //刚开始的游戏状态 gameStatus:false, //所以敌机 enemy:{}, //子弹 bullet:{}, //得分 scroe:0 ...
- javascript飞机大战-----007爆炸效果
要检验什么时候碰撞,我们必须了解什么时候不相撞.以上四种情况是不相撞的时候 首先在引擎里面写好什么时候碰撞什么时候不碰撞 /* 游戏引擎 */ var Engine = { //刚开始的游戏状态 ga ...
随机推荐
- Gym 101158D(暴力)
题意:给定两个长度为N的字符串,1<=N<=4000,求满足字符串1中的某个区间所有的字母种类和个数都与字符串2中的某个区间相同最长的区间长度. 分析: 1.预处理每个串字母个数的前缀和. ...
- Spark tungsten 项目阅读笔记
Spark tungsten 项目阅读笔记 Spark tungsten 项目的宣言就是:Bringing Apache Spark closer Bare Metal. 我的理解就是不要让硬件成为S ...
- 利用vim查看日志,快速定位问题《转载》
利用vim查看日志,快速定位问题 链接:https://www.cnblogs.com/abcwt112/p/5192944.html
- 留学英文论文写作Abstract三种类型
所谓Abstract,就是对所写论文主要内容的精炼概括.Abstract是美国人的说法,英国的科技期刊喜欢称之为Summary.在英文中,有资料是这么对其定义的:Abstract is a sketc ...
- javaweb历史上最简单的使用Ajax判断用户名是否被注册（不跳转页面奥！）
关于前端: 使用jquery-3.3.1.js记得要导入奥---最后我会附加我的源码的 哎我也不多说了新手加菜鸟jquery真的不太懂!看代码吧!个别地方我会写上我对本程序的理解. 关于后台也就是se ...
- python---函数作用域
1.作用域 local:局部作用域 E(Enclosing):闭包函数外的函数中 G(global): 全局作用域 B(Build-in):內建作用域 查找变量的顺序,从上到下 2.函数内的变 ...
- 基础语法-循环结构do...while
基础语法-循环结构do...while 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.do...while语句格式 do{ 执行语句; }while(条件表达式); 温馨提示: ...
- C++的vector容器清空
c++内部STL库中自带了一个容器vetcor, 自带了清空方法——clear().但是clear使用之后,并不能清空数据,其数据再未被覆盖之前是不会改变的,个人猜测clear仅仅把指针挪动到了起始位 ...
- jquery特效 - 网站水波纹
1,index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...
- 大数据高可用集群环境安装与配置（04）——安装JAVA运行环境
Hadoop运行在java环境,所以在安装Hadoop之前,需要安装好jdk 提前下载好jdk安装包(jdk-8u161-linux-x64.tar.gz),将它上传到指定的安装目录当中,然后运行安装 ...