js，jQuery模拟飞机大战游戏

技术2022-07-11 152

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .container { width: 500px; height: 80vh; margin: 10vh auto; background: #000; position: relative; } .plane { width: 80px; height: 70px; background: url("./1.png") no-repeat; background-size: cover; position: absolute; left: calc(50% - 40px); bottom: 20px; } .bullet{ width: 8px; height: 22px; background-color: gold; position: absolute; border-radius: 10px 10px 0 0 ; box-shadow: 0 5px 5px green; } .enemy{ width: 40px; height: 30px; background: url("./1.png") no-repeat; background-size: cover; position: absolute; } </style> </head> <body> <div class="container"> <div class="plane"></div> </div> <script src="../JQ/JQuery.js"></script> <script> $(function () { let maxLeft = $('.container').innerWidth() - $('.plane').innerWidth() let maxTop = $('.container').innerHeight() - $('.plane').innerHeight() $(window).keydown(function ({keyCode}) { //获取上下左右按键的keyCode值，判断上下左右移动 let {top : t,left : l} = $('.plane').position() //解构plane 位置top和left的值 switch (keyCode) { case 38: t -= 10 //按上键，top减10 break; case 40: t += 10 //按下键，top加10 break; case 37: l -= 10 //按左键，left减10 break; case 39: l += 10 //按右键，left加10 break; case 74: shoot() //按下某个键发射一次子弹 break; default: break; } //判断plane的位置不能出外盒子 if(t < 0) t = 0 if(t > maxTop) t = maxTop if(l < 0) l = 0 if(l > maxLeft) l = maxLeft $('.plane').css('top',t).css('left',l)//将l和t赋值给plane的left和top }) //创建子弹 let entTime = new Date() function shoot(){ if (new Date() - entTime < 500) return; let bullet = $('<div/>').addClass('bullet') //创建子弹 $('.container').append(bullet) //设置bullet的位置 bullet.css('top',$('.plane').position().top - 15).css('left',$('.plane').position().left + $('.plane').innerWidth()/2 - bullet.innerWidth()/2) entTime = new Date() } //子弹飞行定时器，超出盒子销毁 setInterval(() => { $('.bullet').each(function(){ let bullet = $(this) let {top} = bullet.position() if(top < 0) bullet.remove()//超出盒子销毁 else bullet.css('top',top - 20) }) },100) setInterval(() => {//不停地检测是否有碰撞，如果敌机和子弹碰到了，敌机和子弹都销毁；如果敌机和我机碰到了 $('.enemy').each(function(){ let enemy = this //$('.plane').get(0)将JQ对象转成JS对象 if(calc(enemy,$('.plane').get(0)) || calc($('.plane').get(0),enemy)){ alert('GG') location.reload() } $('.bullet').each(function(){ let bullet = this if(calc(enemy,bullet)|| calc(bullet,enemy)) { bullet.remove() enemy.remove() } }) }) },50) //创建敌机飞行定时器，超出盒子销毁 setInterval(() => { let enemy = $('<div/>').addClass('enemy') $('.container').append(enemy) //设置bullet的位置 enemy.css('top',0).css('left',Math.round(Math.random()*($('.container').innerWidth() - enemy.innerWidth()))) },2000) //设置敌机的移动方向,超出盒子销毁 setInterval(() => { $('.enemy').each(function(){ let enemy = $(this) let {top} = enemy.position() if(top > $('.container').innerHeight()) enemy.remove() else enemy.css('top',top + 20) }) },200) function getLTRB(node) {//得到元素上下边的top值和左右边的left值 return { l: node.offsetLeft, t: node.offsetTop, r: node.offsetLeft + node.offsetWidth, b: node.offsetTop + node.offsetHeight } } function calc(a, b) {//判断两个元素有没有碰到 a = getLTRB(a) b = getLTRB(b) if (b.l > a.l && b.l < a.r && b.t > a.t && b.t < a.b) return true else if (b.l > a.l && b.l < a.r && b.b > a.t && b.b < a.b) return true else if (b.r > a.l && b.r < a.r && b.b > a.t && b.b < a.b) return true else if (b.r > a.l && b.r < a.r && b.t > a.t && b.t < a.b) return true else return false } }) </script> </body> </html>

Processed: 0.009, SQL: 9