Set up the game screen const screen document createElement div screen style width 500px screen style height 500px screen style backgroundColor black screen style position relative document body appendChild screen Create the player ship const player document createElement div player style width 20px player style height 20px player style borderRadius 50 player style backgroundColor white player style position absolute player style left 240px player style top 240px screen appendChild player Set up the game loop let score 0 let gameOver false let asteroids function gameLoop if gameOver Move the player ship if keys ArrowUp player style top Math max parseInt player style top 5 0 px if keys ArrowDown player style top Math min parseInt player style top 5 480 px if keys ArrowLeft player style left Math max parseInt player style left 5 0 px if keys ArrowRight player style left Math min parseInt player style left 5 480 px Move the asteroids for let i 0 i asteroids length i asteroids i x asteroids i dx asteroids i y asteroids i dy asteroids i elem style left asteroids i x px asteroids i elem style top asteroids i y px Check for collisions with the player ship if detectCollision player asteroids i elem gameOver true alert Game over Final score score break Check if asteroid is offscreen and remove it if asteroids i x 50 asteroids i x 550 asteroids i y 50 asteroids i y 550 screen removeChild asteroids i elem asteroids splice i 1 i Add new asteroids if Math random 0 05 const asteroid document createElement div asteroid style width 20px asteroid style height 20px asteroid style borderRadius 50 asteroid style backgroundColor gray asteroid style position absolute asteroid style left Math random 0 5 50px 500px asteroid style top Math random 500 px screen appendChild asteroid asteroids push elem asteroid x parseInt asteroid style left y parseInt asteroid style top dx Math random 10 5 dy Math random 10 5 score setTimeout gameLoop 20 Detect collisions between two elements function detectCollision elem1 elem2 const rect1 elem1 getBoundingClientRect const rect2 elem2 getBoundingClientRect return rect1 right rect2 left rect1 left rect2 right rect1 bottom rect2 top rect1 top rect2 bottom Set up Set up the keyboard controls const keys document addEventListener keydown function e keys e code true document addEventListener keyup function e keys e code false Start the game loop gameLoop
re score break Check if asteroid is offscreen and remove it if asteroids i x 50 asteroids i x 550 asteroids i y 50 asteroids i y 550 screen removeChild asteroids i elem asteroids splice i 1 i Add new asteroids if Math random 0 05 const asteroid document createElement div asteroid style width 20px asteroid style height 20px asteroid style borderRadius 50 asteroid style backgroundColor gray asteroid style position absolute asteroid style left Math random 0 5 50px 500px asteroid style top Math random 500 px screen appendChild asteroid asteroids push elem asteroid x parseInt asteroid style left y parseInt asteroid style top dx Math random 10 5 dy Math random 10 5 score setTimeout gameLoop 20 Detect collisions between two elements function detectCollision elem1 elem2 const rect1 elem1 getBoundingClientRect const rect2 elem2 getBoundingClientRect return rect1 right rect2 left rect1 left rect2 right rect1 bottom rect2 top rect1 top rect2 bottom Set up Set up the keyboard controls const keys document addEventListener keydown function e keys e code true document addEventListener keyup function e keys e code false Start the game loop gameLoop