Untitled

<!DOCTYPE html>
<html>
<head>
  <title>Simple Car Game</title>
    <style>
        body {
                  margin: 0;
                        overflow: hidden;
                              background: #222;
        }

            canvas {
                      background: #555;
                            display: block;
                                  margin: auto;
                                        border: 4px solid white;
            }
              </style>
              </head>
              <body>

              <canvas id="gameCanvas" width="400" height="600"></canvas>

              <script>
              const canvas = document.getElementById("gameCanvas");
              const ctx = canvas.getContext("2d");

              let car = {
                  x: 170,
                    y: 500,
                      width: 60,
                        height: 100,
                          speed: 7
              };

              let obstacles = [];
              let score = 0;
              let gameOver = false;

              document.addEventListener("keydown", moveCar);

              function moveCar(e) {
                  if (e.key === "ArrowLeft" && car.x > 0) {
                        car.x -= car.speed * 5;
                  }

                    if (e.key === "ArrowRight" && car.x < canvas.width - car.width) {
                            car.x += car.speed * 5;
                    }
              }

              function createObstacle() {
                  let x = Math.random() * (canvas.width - 50);

                    obstacles.push({
                            x: x,
                                y: -100,
                                    width: 50,
                                        height: 100,
                                            speed: 5
                    });
              }

              function drawCar() {
                  ctx.fillStyle = "red";
                    ctx.fillRect(car.x, car.y, car.width, car.height);
              }

              function drawObstacles() {
                  ctx.fillStyle = "yellow";

                    obstacles.forEach((obs, index) => {
                            obs.y += obs.speed;

                                ctx.fillRect(obs.x, obs.y, obs.width, obs.height);

                                    // Collision
                                        if (
                                                  car.x < obs.x + obs.width &&
                                                        car.x + car.width > obs.x &&
                                                              car.y < obs.y + obs.height &&
                                                                    car.y + car.height > obs.y
                                        ) {
                                                  gameOver = true;
                                        }

                                            // Remove obstacle
                                                if (obs.y > canvas.height) {
                                                          obstacles.splice(index, 1);
                                                                score++;
                                                }
                    });
              }

              function drawRoad() {
                  ctx.fillStyle = "white";

                    for (let i = 0; i < canvas.height; i += 40) {
                            ctx.fillRect(195, i, 10, 20);
                    }
              }

              function drawScore() {
                  ctx.fillStyle = "white";
                    ctx.font = "24px Arial";
                      ctx.fillText("Score: " + score, 10, 30);
              }

              function gameLoop() {
                  if (gameOver) {
                        ctx.fillStyle = "white";
                            ctx.font = "40px Arial";
                                ctx.fillText("GAME OVER", 70, 300);
                                    return;
                  }

                    ctx.clearRect(0, 0, canvas.width, canvas.height);

                      drawRoad();
                        drawCar();
                          drawObstacles();
                            drawScore();

                              requestAnimationFrame(gameLoop);
              }

              setInterval(createObstacle, 1500);

              gameLoop();
              </script>

              </body>
              </html>
                  }
              }
              }
                    }
              }
                                                }
                                        }
                                        )
                    })
              }
              }
                    })
              }
                    }
                  }
              }
              }
            }
        }
Editor is loading...