用jq表现出简易飞机大战效果
其html和css样式：
<h1 class="score">0</h1> <div class="container"> <div class="plane"></div> </div>css：
.container { width: 500px; position: relative; height: 80vh; margin: 10vh auto; overflow: hidden; background: #000; } .plane { width: 120px; height: 80px; background: url(./plane.png) 0 / 100% 100%; position: absolute; left: calc(50% - 40px); bottom: 20px; } .bullet { width: 8px; height: 22px; background: #ff0; position: absolute; border-radius: 10px 10px 0 0; box-shadow: 0 5px 5px rgb(9, 95, 35); } .enemy { width: 80px; height: 50px; background: url(./plane.png) 0 / 100% 100%; position: absolute; top: 0; } .score { position: absolute; color: red; top: 0px; left: 50%; transform: translateX(-50%); }jq样式：
$(function () { let score = 0 let maxLeft = $('.container').innerWidth() - $('.plane').innerWidth() let maxTop = $('.container').innerHeight() - $('.plane').innerHeight() $(window).keydown(function ({ keyCode }) { // console.log(keyCode); let { top: t, left: l } = $('.plane').position() switch (keyCode) { case 87: t -= 10 break; case 83: t += 10 break; case 65: l -= 10 break; case 68: l += 10 break; case 74: shoot() break; default: break; } if (l < 0) l = 0 if (t < 0) t = 0 if (l > maxLeft) l = maxLeft if (t > maxTop) t = maxTop $('.plane').css('top', t).css('left', l) }) let entTime = new Date() function shoot() { if (new Date() - entTime < 500) return; let bullet = $('<div/>').addClass('bullet') $('.container').append(bullet) bullet.css('top', $('.plane').position().top - 20) bullet.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', bullet.position().top - 10) }) }, 100); setInterval(() => { $('.enemy').each(function () { let enemy = this if (calc(enemy, $('.plane').get(0)) || calc($('.plane').get(0), enemy)) { console.log('GG'); location.reload() } $('.bullet').each(function () { let bullet = this if (calc(enemy, bullet) || calc(bullet, enemy)) { bullet.remove() enemy.remove() score += 10 $('.score').text(score) } }) }) }, 50); setInterval(() => { let enemy = $('<div/>').addClass('enemy') $('.container').append(enemy) enemy.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', enemy.position().top + 20) }) }, 200); function getLTRB(node) { 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 } })