AI game creator

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

No:18124

101

←

Prev Next

→

Racing
Developer User8005｜Date and time 23/9/27 9:08:16
Build time 22.608 sec｜Game capacity 2.812KB｜

Script

Sure! Here's a simple racing game implemented as a single HTML file:

This game features a car that the player controls using the left and right arrow keys. The objective is to avoid colliding with the randomly moving obstacles. The score increases as the player successfully avoids obstacles. When the player collides with an obstacle, the game ends and displays a "Game Over" message.

←

Prev　Next

→ 　

Back　

[PR]現在の人気ゲームランキング

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

Sure! Here's a simple racing game implemented as a single HTML file:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Racing Game</title>
</head>
<body>
  <canvas id="canvas" width="400" height="400"></canvas>

// Car variables
    const carWidth = 50;
    const carHeight = 80;
    let carX = canvas.width / 2 - carWidth / 2;
    let carY = canvas.height - carHeight - 20;
    let carSpeed = 5;

// Obstacle variables
    const obstacleWidth = 50;
    const obstacleHeight = 50;
    let obstacleX = Math.random() * (canvas.width - obstacleWidth);
    let obstacleY = -obstacleHeight;
    let obstacleSpeed = 2;

// Game variables
    let score = 0;
    let gameOver = false;

function drawCar() {
      context.fillStyle = 'blue';
      context.fillRect(carX, carY, carWidth, carHeight);
    }

function drawObstacle() {
      context.fillStyle = 'red';
      context.fillRect(obstacleX, obstacleY, obstacleWidth, obstacleHeight);
    }

function moveObstacle() {
      obstacleY += obstacleSpeed;

if (obstacleY > canvas.height) {
        obstacleX = Math.random() * (canvas.width - obstacleWidth);
        obstacleY = -obstacleHeight;
        score++;
      }
    }

function checkCollision() {
      if (
        carX < obstacleX + obstacleWidth &&
        carX + carWidth > obstacleX &&
        carY < obstacleY + obstacleHeight &&
        carY + carHeight > obstacleY
      ) {
        gameOver = true;
      }
    }

function update() {
      if (!gameOver) {
        context.clearRect(0, 0, canvas.width, canvas.height);

drawCar();
        drawObstacle();

moveObstacle();
        checkCollision();

context.fillStyle = 'black';
        context.fillText('Score: ' + score, 10, 20);

carX += carSpeed;

if (carX < 0 || carX > canvas.width - carWidth) {
          carSpeed = -carSpeed;
        }

requestAnimationFrame(update);
      } else {
        context.fillStyle = 'black';
        context.fillText('Game Over!', canvas.width / 2 - 40, canvas.height / 2);
      }
    }

update();

function handleKeyDown(e) {
      if (e.key === 'ArrowLeft' && carX > 0) {
        carX -= 10;
      } else if (e.key === 'ArrowRight' && carX < canvas.width - carWidth) {
        carX += 10;
      }
    }

document.addEventListener('keydown', handleKeyDown);
  </script>
</body>
</html>
```