今天来写个游戏，飞机大战
1，布局
2，思路
1，动态创建自己的飞机 让它在规定的区域，跟着鼠标运动。
2，在自己飞机的上方，间隔1s生成子弹。子弹往上移动 当top：0 子弹消失
3，每隔1s 产生敌机 top 0,left 随机，敌机向下移动，敌机超过边距时。敌机消失。
4，子弹和敌机相遇时。子弹和敌机同时消失
3，代码
1，动态创建自己的飞机 让它在规定的区域，跟着鼠标运动。
let view = document.getElementById('view');
// 创建自己的飞机
let air = document.createElement('div');
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'
}
}
2，在自己飞机的上方，间隔1s生成子弹。子弹往上移动 当top：0 子弹消失
//获取区域
let view = document.getElementById('view');
// 创建自己的飞机
let air = document.createElement('div');
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 caerBl_time=setInterval(
function () {
if (ObJ_billet.bif){
//在自己飞机的上方
caeationBillet()
}
},1000 )
//用来保存子弹数据
let ObJ_billet = {
name: 'billet_',
num: 0,
//是否在区域
bif:false,
arr: []//保存id，xy坐标
}
function run_Billet(bl,i) {
let runBl_time=setInterval(function () {
bl.style.top=bl.offsetTop-1+'px'
ObJ_billet.arr[i] = bl.id + '|' +bl.offsetLeft + '|' +bl.offsetTop
if (bl.offsetTop<0){
bl.parentNode.removeChild(bl);
clearInterval(runBl_time)
}
},30)
}
//xy 坐标
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
//子弹运动
run_Billet(billet,ObJ_billet.num)
// 自增1
ObJ_billet.num+=1
//挡子弹有最多100个
if (ObJ_billet.num>=100){
ObJ_billet.num=0;
}
}
3，每隔1s 产生敌机 top 0,left 随机，敌机向下移动，敌机超过边距时。敌机消失。
<script>
//获取区域
let view = document.getElementById('view');
// 创建自己的飞机
let air = document.createElement('div');
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 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坐标
}
// 子弹运动
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
//子弹运动
run_Billet(billet,ObJ_billet.num)
// 自增1
ObJ_billet.num+=1
//挡子弹有最多100个
if (ObJ_billet.num>=100){
ObJ_billet.num=0;
}
}
// 创建敌机
function caeationHair() {
let hair = document.createElement('div')
hair.className = 'hair'
hair.id = ObJ_Hair.name + ObJ_Hair.num;
view.appendChild(hair)
//飞机由上往下 left随机大小0到view宽度
let random_L=randomNum(0,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>=100){
ObJ_Hair.num=0;
}
}
//生成从minNum到maxNum的随机数
function randomNum(minNum,maxNum){
return parseInt(Math.random()*(maxNum-minNum+1)+minNum)
}
</script>
4，子弹和敌机相遇时。子弹和敌机同时消失
//搜索所有的子弹，相遇 就被击毙。相遇条件 飞机左<=left 子弹<=you top 子弹<=飞机
ript>
//获取区域
let view = document.getElementById('view');
// 创建自己的飞机
let air = document.createElement('div');
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 caerBl_time = setInterval(
function () {
if (ObJ_billet.bif) {
//在自己飞机的上方
caeationBillet()
caeationHair()
//搜索所有的子弹，相遇 就被击毙。相遇条件 飞机左<=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])){
let yif=parseInt(barr[2])<=parseInt(harr[2]) //Y相遇
let xif=parseInt(barr[1])>=parseInt(harr[1])&&parseInt(barr[1])<=parseInt(harr[1])+34
if (yif&&xif){
//消失元素 关闭记时器
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)
}}
}
}
}
}, 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) {
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) {
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
//挡子弹有最多100个
if (ObJ_billet.num >= 100) {
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 >= 100) {
ObJ_Hair.num = 0;
}
}
//生成从minNum到maxNum的随机数
function randomNum(minNum, maxNum) {
return parseInt(Math.random() * (maxNum - minNum + 1) + minNum)
}
扫描二维码关注公众号，回复：
6137086 查看本文章
总结
BUG 有点多 效果可以实现 有点卡顿 等我调试 调试 大战BUG