DOCTYPE html html head title Frogger Game title style game board border 1px solid black width 400px height 400px position relative frogger width 40px height 40px background color green position absolute bottom 0 left 180px car width 50px height 30px background color red position absolute bottom 120px left 0 animation car move 3s linear infinite keyframes car move 0 left 0 100 left 400px score font size 20px font family Arial style head body div id game board div id frogger class frogger div div id car class car div div div id score Score 0 div script define the game variables let frogger document getElementById frogger let car document getElementById car let gameScore 0 handle keyboard input document addEventListener keydown function event switch event keyCode case 38 up arrow key moveUp break case 40 down arrow key moveDown break case 37 left arrow key moveLeft break case 39 right arrow key moveRight break move the frogger up function moveUp let currentTop frogger offsetTop let newTop currentTop 40 if newTop 0 reset reset the game if the frogger goes off the screen else frogger style top newTop px move the frogger down function moveDown let currentTop frogger offsetTop let newTop currentTop 40 if newTop 360 reset reset the game if the frogger goes off the screen else frogger style top newTop px move the frogger left function moveLeft let currentLeft frogger offsetLeft let newLeft currentLeft 40 if newLeft 0 reset reset the game if the frogger goes off the screen else frogger style left newLeft px move the frogger right function moveRight let currentLeft frogger offsetLeft let newLeft currentLeft 40 if newLeft 360 reset reset the game if the frogger goes off the screen else frogger style left newLeft px reset the game function reset frogger style bottom 0px reset the frogger s position to the bottom of the screen gameScore 10 decrement the score by 10 points document getElementById score innerHTML Score gameScore check for collisions between the frogger and the car setInterval function let froggerRect frogger getBoundingClientRect let carRect car getBoundingClientRect if froggerRect bottom carRect top froggerRect top carRect bottom froggerRect right carRect left froggerRect left carRect right reset reset the game if the frogger collides with the car 10 update the game score setInterval function gameScore 10 increment the score by 10 points document getElementById score innerHTML Score gameScore 1000 script body html
move the frogger down function moveDown let currentTop frogger offsetTop let newTop currentTop 40 if newTop 360 reset reset the game if the frogger goes off the screen else frogger style top newTop px move the frogger left function moveLeft let currentLeft frogger offsetLeft let newLeft currentLeft 40 if newLeft 0 reset reset the game if the frogger goes off the screen else frogger style left newLeft px move the frogger right function moveRight let currentLeft frogger offsetLeft let newLeft currentLeft 40 if newLeft 360 reset reset the game if the frogger goes off the screen else frogger style left newLeft px reset the game function reset frogger style bottom 0px reset the frogger s position to the bottom of the screen gameScore 10 decrement the score by 10 points document getElementById score innerHTML Score gameScore check for collisions between the frogger and the car setInterval function let froggerRect frogger getBoundingClientRect let carRect car getBoundingClientRect if froggerRect bottom carRect top froggerRect top carRect bottom froggerRect right carRect left froggerRect left carRect right reset reset the game if the frogger collides with the car 10 update the game score setInterval function gameScore 10 increment the score by 10 points document getElementById score innerHTML Score gameScore 1000 script body html