Untitled

<!DOCTYPE html>
<html>
<head>
  <title>Hill Climb Game</title>
    <style>
        body { margin:0; overflow:hidden; background:#87CEEB; }
            canvas { background:#4CAF50; display:block; }
                #score {
                          position:absolute;
                                top:10px;
                                      left:10px;
                                            font-size:20px;
                                                  color:white;
                }
                  </style>
                  </head>
                  <body>

                  <div id="score">Score: 0</div>
                  <canvas id="gameCanvas"></canvas>

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

                  canvas.width = window.innerWidth;
                  canvas.height = window.innerHeight;

                  let car = {
                      x: 100,
                        y: 300,
                          width: 60,
                            height: 30,
                              speed: 0,
                                gravity: 0.5
                  };

                  let keys = {};
                  let score = 0;

                  document.addEventListener("keydown", e => keys[e.key] = true);
                  document.addEventListener("keyup", e => keys[e.key] = false);

                  function update() {
                      // gravity
                        car.y += car.gravity;

                          // controls
                            if (keys["ArrowRight"]) {
                                    car.speed += 0.2;
                            }
                              if (keys["ArrowLeft"]) {
                                    car.speed -= 0.2;
                              }

                                car.x += car.speed;

                                  // ground
                                    if (car.y > canvas.height - 50) {
                                            car.y = canvas.height - 50;
                                    }

                                      // score
                                        score += Math.abs(car.speed);
                                          document.getElementById("score").innerText = "Score: " + Math.floor(score);
                  }

                  function draw() {
                      ctx.clearRect(0,0,canvas.width,canvas.height);

                        // car
                          ctx.fillStyle = "red";
                            ctx.fillRect(car.x, car.y, car.width, car.height);

                              // wheels
                                ctx.fillStyle = "black";
                                  ctx.beginPath();
                                    ctx.arc(car.x+10, car.y+30, 10, 0, Math.PI*2);
                                      ctx.arc(car.x+50, car.y+30, 10, 0, Math.PI*2);
                                        ctx.fill();
                  }

                  function gameLoop() {
                      update();
                        draw();
                          requestAnimationFrame(gameLoop);
                  }

                  gameLoop();
                  </script>

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