Make a 2d driving game's game

Click here for free DL of the app version that can save data.

No:44621

←

Prev Next

→

Make a 2d driving game
Developer User19434｜Date and time 24/2/18 19:40:13
Build time 8.35 sec｜Game capacity 2.68KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

Click here for free DL of the app version that can save data.

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>2D Driving Game</title>
  <style>
    canvas {
      border: 2px solid black;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="400" height="600"></canvas>

let car = {
      x: 200,
      y: 530,
      width: 50,
      height: 70,
      speed: 5
    };

let obstacles = [];

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

function drawObstacles() {
      ctx.fillStyle = "red";
      obstacles.forEach((obstacle) => {
        ctx.fillRect(obstacle.x, obstacle.y, obstacle.width, obstacle.height);
      });
    }

function moveCar(direction) {
      if (direction === "left" && car.x > 0) {
        car.x -= car.speed;
      } else if (direction === "right" && car.x + car.width < canvas.width) {
        car.x += car.speed;
      }
    }

function createObstacle() {
      const obstacleWidth = Math.floor(Math.random() * 100) + 50;
      const obstacleX = Math.floor(Math.random() * (canvas.width - obstacleWidth));
      
      obstacles.push({
        x: obstacleX,
        y: 0,
        width: obstacleWidth,
        height: 30,
        speed: Math.floor(Math.random() * 3) + 1
      });
    }

function updateObstacles() {
      for(let i = 0; i < obstacles.length; i++) {
        obstacles[i].y += obstacles[i].speed;

if(obstacles[i].y > canvas.height) {
          obstacles.splice(i, 1);
        }
      }
    }

function gameLoop() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      
      drawCar();
      drawObstacles();
      updateObstacles();
      checkCollision();

requestAnimationFrame(gameLoop);
    }

setInterval(createObstacle, 2000);
    gameLoop();
  </script>
</body>
</html>
```