AI game creator

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

No:223

538

←

Prev Next

→

Racing
Developer User2929｜Date and time 23/6/10 22:15:09
Build time 29.747 sec｜Game capacity 2.946KB｜

Script

Game Here is an example of a simple racing game implemented as a single HTML file with JavaScript. The game can be played on a smartphone by tapping the left or right side of the screen to move the car and avoid obstacles.

The game works by having the player control a car that must avoid obstacles that appear at the top of the screen. The car is controlled by tapping the left or right side of the screen, and the player scores points for every frame they survive without crashing. The game gets progressively harder as the speed of both the car and obstacles increases over time.

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋グッズランキング

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

Game

Here is an example of a simple racing game implemented as a single HTML file with JavaScript. The game can be played on a smartphone by tapping the left or right side of the screen to move the car and avoid obstacles.

```
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Racing Game</title>
  <style>
    body {
      background-color: #333;
      color: white;
    }
    canvas {
      width: 100%;
      height: 80%;
    }
  </style>
</head>
<body>
  <canvas></canvas>
  <script>
    // Game variables
    var carX = 150;
    var carWidth = 50;
    var carHeight = 80;
    var speed = 3;
    var score = 0;
    var crashed = false;

// Obstacle variables
    var obstacleY = -100;
    var obstacleWidth = 100;
    var obstacleHeight = 50;
    var obstacleSpeed = 5;

// Canvas setup
    var canvas = document.querySelector('canvas');
    var ctx = canvas.getContext('2d');
    var canvasHeight = canvas.height;
    var canvasWidth = canvas.width;

// Update function
    function update() {
      if (!crashed) {
        // Update car position
        if (carX < canvasWidth/2) {
          carX += speed;
        }
        else if (carX + carWidth > canvasWidth/2) {
          carX -= speed;
        }

// Update obstacle position
        obstacleY += obstacleSpeed;

// Check for collision
        if (obstacleY + obstacleHeight > carHeight && obstacleY < carHeight + obstacleHeight && (carX < obstacleWidth || carX + carWidth > canvasWidth - obstacleWidth)) {
          crashed = true;
        }

// Update score and speed
        score++;
        if (score % 100 == 0) {
          speed++;
          obstacleSpeed++;
        }

// Draw everything
        ctx.clearRect(0, 0, canvasWidth, canvasHeight);
        ctx.fillStyle = 'white';
        ctx.fillRect(carX, canvasHeight - carHeight - 20, carWidth, carHeight);
        ctx.fillRect(canvasWidth/2 - obstacleWidth/2, obstacleY, obstacleWidth, obstacleHeight);
        ctx.fillText(`Score: ${score}`, 10, 20);

// Schedule next update
        requestAnimationFrame(update);
      }
      else {
        // Game over message
        ctx.clearRect(0, 0, canvasWidth, canvasHeight);
        ctx.fillText('Game over!', canvasWidth/2 - 50, canvasHeight/2);
      }
    }

// Start game
    update();

// Handle touch events
    document.addEventListener('touchstart', function(e) {
      if (e.changedTouches[0].pageX < canvasWidth/2) {
        carX -= speed;
      }
      else {
        carX += speed;
      }
    });
  </script>
</body>
</html>
```