DOCTYPE html html head title Space Invaders title style CSS for game elements game container position relative width 400px height 400px border 1px solid black player position absolute bottom 10px left 190px width 20px height 20px background color blue bullet position absolute width 5px height 10px background color red invader position absolute width 20px height 20px background color green style head body div id game container div class player div div script game variables var playerSpeed 5 var bulletSpeed 10 var invaderSpeed 2 var invaderGap 10 var invaderWidth 20 var invaderHeight 20 var player document querySelector player var bullets var invaders var score 0 var scoreDisplay document createElement div scoreDisplay textContent Score 0 document body appendChild scoreDisplay game loop setInterval function moveBullets moveInvaders checkCollisions 30 event listeners document addEventListener keydown function event if event code ArrowLeft player style left parseInt player offsetLeft playerSpeed px else if event code ArrowRight player style left parseInt player offsetLeft playerSpeed px else if event code Space fireBullet bullet movement function moveBullets for var i 0 i bullets length i var bullet bullets i bullet style top parseInt bullet offsetTop bulletSpeed px if parseInt bullet offsetTop 10 bullet parentNode removeChild bullet bullets splice i 1 i bullet creation function fireBullet var bullet document createElement div bullet className bullet bullet style left parseInt player offsetLeft 8 px bullet style top parseInt player offsetTop px document getElementById game container appendChild bullet bullets push bullet invader movement function moveInvaders for var i 0 i invaders length i var invader invaders i invader style left parseInt invader style left invaderSpeed px if parseInt invader style left 0 parseInt invader style left 380 invaderSpeed invaderSpeed moveInvadersDown move invaders down function moveInvadersDown for var i 0 i invaders length i var invader invaders i invader style top parseInt invader style top invaderHeight invaderGap px invader creation function createInvaders for var i 0 i 5 i for var j 0 j 10 j var invader document createElement div invader className invader invader style left 50 j invaderWidth invaderGap px invader style top 50 i invaderHeight invaderGap px document getElementById game container appendChild invader invaders push invader collision detection function checkCollisions for var i 0 i bullets length i var bullet bullets i for var j 0 j invaders length j var invader invaders j if bulletCollidesWithInvader bullet invader bullet parentNode removeChild bullet bullets splice i 1 i invader parentNode removeChild invader invaders splice j 1 j score 10 scoreDisplay textContent Score score bullet invader collision detection function bulletCollidesWithInvader bullet invader var bulletRect bullet getBoundingClientRect var invaderRect invader getBoundingClientRect return bulletRect bottom invaderRect top bulletRect top invaderRect bottom bulletRect right invaderRect left bulletRect left invaderRect right game initialization createInvaders script body html
x bullet style top parseInt player offsetTop px document getElementById game container appendChild bullet bullets push bullet invader movement function moveInvaders for var i 0 i invaders length i var invader invaders i invader style left parseInt invader style left invaderSpeed px if parseInt invader style left 0 parseInt invader style left 380 invaderSpeed invaderSpeed moveInvadersDown move invaders down function moveInvadersDown for var i 0 i invaders length i var invader invaders i invader style top parseInt invader style top invaderHeight invaderGap px invader creation function createInvaders for var i 0 i 5 i for var j 0 j 10 j var invader document createElement div invader className invader invader style left 50 j invaderWidth invaderGap px invader style top 50 i invaderHeight invaderGap px document getElementById game container appendChild invader invaders push invader collision detection function checkCollisions for var i 0 i bullets length i var bullet bullets i for var j 0 j invaders length j var invader invaders j if bulletCollidesWithInvader bullet invader bullet parentNode removeChild bullet bullets splice i 1 i invader parentNode removeChild invader invaders splice j 1 j score 10 scoreDisplay textContent Score score bullet invader collision detection function bulletCollidesWithInvader bullet invader var bulletRect bullet getBoundingClientRect var invaderRect invader getBoundingClientRect return bulletRect bottom invaderRect top bulletRect top invaderRect bottom bulletRect right invaderRect left bulletRect left invaderRect right game initialization createInvaders script body html