DOCTYPE html html lang en head meta charset UTF 8 meta name viewport content width device width initial scale 1 0 title 2D Race Car Game title style body margin 0 min height 700px canvas display block background 333 style head body canvas id gameCanvas canvas script const canvas document getElementById gameCanvas const ctx canvas getContext 2d canvas width window innerWidth canvas height window innerHeight const carWidth 50 const carHeight 100 let carX canvas width 2 carWidth 2 let carY canvas height carHeight 20 const carSpeed 5 const keys left false right false up false down false const obstacles const otherCars const roadWidth 300 const roadX canvas width 2 roadWidth 2 document addEventListener keydown e switch e key case ArrowLeft keys left true break case ArrowRight keys right true break case ArrowUp keys up true break case ArrowDown keys down true break document addEventListener keyup e switch e key case ArrowLeft keys left false break case ArrowRight keys right false break case ArrowUp keys up false break case ArrowDown keys down false break function createObstacle const width Math random 50 20 const height Math random 20 20 const x Math random roadWidth width roadX const y height obstacles push x y width height function createOtherCar const width carWidth const height carHeight const x Math random roadWidth width roadX const y height otherCars push x y width height function updateObstacles for let i 0 i obstacles length i obstacles i y carSpeed if obstacles i y canvas height obstacles splice i 1 i function updateOtherCars for let i 0 i otherCars length i otherCars i y carSpeed if otherCars i y canvas height otherCars splice i 1 i function checkCollision a b return a x b x b width a x a width b x a y b y b height a y a height b y function update if keys left carX roadX carX carSpeed if keys right carX roadX roadWidth carWidth carX carSpeed if keys up carY 0 carY carSpeed if keys down carY canvas height carHeight carY carSpeed updateObstacles updateOtherCars Check for collisions with obstacles for let obstacle of obstacles if checkCollision x carX y carY width carWidth height carHeight obstacle alert Game Over You hit an obstacle document location reload Check for collisions with other cars for let otherCar of otherCars if checkCollision x carX y carY width carWidth height carHeight otherCar alert Game Over You hit another car document location reload function drawRoad ctx fillStyle 555 ctx fillRect roadX 0 roadWidth canvas height function drawCar ctx fillStyle red ctx fillRect carX carY carWidth carHeight function drawObstacles ctx fillStyle blue for let obstacle of obstacles ctx fillRect obstacle x obstacle y obstacle width obstacle height function drawOtherCars ctx fillStyle yellow for let otherCar of otherCars ctx fillRect otherCar x otherCar y otherCar width otherCar height function gameLoop ctx clearRect 0 0 canvas width canvas height drawRoad update drawCar drawObstacles drawOtherCars requestAnimationFrame gameLoop Create obstacles and other cars at intervals setInterval createObstacle 2000 setInterval createOtherCar 3000 gameLoop script body html
function updateOtherCars for let i 0 i otherCars length i otherCars i y carSpeed if otherCars i y canvas height otherCars splice i 1 i function checkCollision a b return a x b x b width a x a width b x a y b y b height a y a height b y function update if keys left carX roadX carX carSpeed if keys right carX roadX roadWidth carWidth carX carSpeed if keys up carY 0 carY carSpeed if keys down carY canvas height carHeight carY carSpeed updateObstacles updateOtherCars Check for collisions with obstacles for let obstacle of obstacles if checkCollision x carX y carY width carWidth height carHeight obstacle alert Game Over You hit an obstacle document location reload Check for collisions with other cars for let otherCar of otherCars if checkCollision x carX y carY width carWidth height carHeight otherCar alert Game Over You hit another car document location reload function drawRoad ctx fillStyle 555 ctx fillRect roadX 0 roadWidth canvas height function drawCar ctx fillStyle red ctx fillRect carX carY carWidth carHeight function drawObstacles ctx fillStyle blue for let obstacle of obstacles ctx fillRect obstacle x obstacle y obstacle width obstacle height function drawOtherCars ctx fillStyle yellow for let otherCar of otherCars ctx fillRect otherCar x otherCar y otherCar width otherCar height function gameLoop ctx clearRect 0 0 canvas width canvas height drawRoad update drawCar drawObstacles drawOtherCars requestAnimationFrame gameLoop Create obstacles and other cars at intervals setInterval createObstacle 2000 setInterval createOtherCar 3000 gameLoop script body html