html js飞机大战实例,JS飞机大战demo

html>

Document

* {

margin: 0;

padding: 0;

list-style: none;

}

body {

background: black;

}

#demo {

width: 100px;

height: 100px;

position: absolute;

top: calc(50% - 50px);

left: calc(50% - 50px);

background: url(plane.png) 0 / cover;

}

.bullet {

width: 10px;

height: 10px;

background: gold;

border-radius: 10px 10px 0 0;

box-shadow: 2px 5px 10px #fff;

position: absolute;

}

const KEY_CODE = {

W: 87,

S:83,

A:65,

D:68,

J:74,

ENTER:13

}

let demo = document.getElementById('demo')

window.onkeydown = function (e) {

switch (e.keyCode) {

case KEY_CODE.W:

demo.style.top = (demo.offsetTop - 10) + 'px'

break;

case KEY_CODE.S:

demo.style.top = (demo.offsetTop + 10) + 'px'

break;

case KEY_CODE.A:

demo.style.left = (demo.offsetLeft - 10) + 'px'

break;

case KEY_CODE.D:

demo.style.left = (demo.offsetLeft + 10) + 'px'

break;

case KEY_CODE.J:

fight()

break;

}

}

function fight() {

let bullet = document.createElement('div')

bullet.classList.add('bullet')

document.body.appendChild(bullet)

bullet.style.top = (demo.offsetTop - bullet.offsetHeight - 10) + 'px'

bullet.style.left = demo.offsetLeft + (demo.offsetWidth / 2) - (bullet.offsetWidth / 2) + 'px'

}

setInterval(function () {

let bullets = document.getElementsByClassName('bullet')

for (let i = 0; i 

const bullet = bullets[i];

bullet.style.top = (bullet.offsetTop - 10) + 'px'

if (bullet.offsetTop 

bullet.remove()

}

}, 20)