<!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减10break;case 40:t += 10 //按下键，top加10break;case 37:l -= 10 //按左键，left减10break;case 39:l += 10 //按右键，left加10break;case 74:shoot() //按下某个键发射一次子弹break;default:break;}//判断plane的位置不能出外盒子if(t < 0) t = 0if(t > maxTop) t = maxTopif(l < 0) l = 0if(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 = thisif(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 trueelse if (b.l > a.l && b.l < a.r && b.b > a.t && b.b < a.b) return trueelse if (b.r > a.l && b.r < a.r && b.b > a.t && b.b < a.b) return trueelse if (b.r > a.l && b.r < a.r && b.t > a.t && b.t < a.b) return trueelse return false}})</script></body></html>
爱站程序员基地
