AI game creator

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

No:42083

←

Prev Next

→

A 2d racing game
Developer User18790｜Date and time 24/2/10 15:17:20
Build time 9.971 sec｜Game capacity 2.969KB｜

Script

Sure! Here's an example of a simple 2D racing game implemented in a single HTML file using JavaScript. The game will simulate a car racing through a track with arrow keys to control the car's movement.

Feel free to run this code in your browser and you will see a simple 2D racing game where you can control a car using the left and right arrow keys. The game will run in a loop, continually updating and rendering the game state. The car is represented by a white rectangle, and the track is drawn using rectangular shapes.

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋アプリランキング

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

```html
<!DOCTYPE html>
<html>
<head>
  <title>2D Racing Game</title>
  <style>
    canvas {
      background-color: #000;
      display: block;
      margin: 0 auto;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas"></canvas>

// Car variables
    const CAR_WIDTH = 40;
    const CAR_HEIGHT = 80;
    const CAR_SPEED = 5;
    let carX, carY;

// Track variables
    const TRACK_WIDTH = 400;
    const TRACK_HEIGHT = 600;
    const TRACK_COLOR = '#999';
    const TRACK_LINE_COLOR = '#fff';
    const TRACK_LINE_WIDTH = 4;

// Initialize the game
    function gameInit() {
      canvas = document.getElementById('gameCanvas');
      context = canvas.getContext('2d');

carX = canvas.width / 2 - CAR_WIDTH / 2;
      carY = canvas.height - CAR_HEIGHT - 20;

track = [0, 200, 100, 200, 200, 100, 300, 100, 400, 200, 400, TRACK_HEIGHT, 0, TRACK_HEIGHT];

document.addEventListener('keydown', handleKeyPress);
      gameLoop();
    }

// Handle arrow key press
    function handleKeyPress(e) {
      if (e.keyCode === 37) { // Left arrow key
        carX -= CAR_SPEED;
      } else if (e.keyCode === 39) { // Right arrow key
        carX += CAR_SPEED;
      }
    }

// Update game state
    function gameUpdate() {
      // Check if the car hits the track boundaries
      if (carX < 0) {
        carX = 0;
      } else if (carX + CAR_WIDTH > canvas.width) {
        carX = canvas.width - CAR_WIDTH;
      }
    }

// Render game objects
    function gameRender() {
      // Clear canvas
      context.clearRect(0, 0, canvas.width, canvas.height);

// Render track
      context.fillStyle = TRACK_COLOR;
      context.fillRect(0, 0, canvas.width, canvas.height);

context.strokeStyle = TRACK_LINE_COLOR;
      context.lineWidth = TRACK_LINE_WIDTH;
      context.beginPath();
      context.moveTo(track[0], track[1]);
      for (let i = 2; i < track.length; i += 2) {
        context.lineTo(track[i], track[i+1]);
      }
      context.closePath();
      context.stroke();

// Render car
      context.fillStyle = '#fff';
      context.fillRect(carX, carY, CAR_WIDTH, CAR_HEIGHT);
    }

// Main game loop
    function gameLoop() {
      gameUpdate();
      gameRender();
      requestAnimationFrame(gameLoop);
    }

// Start the game
    gameInit();
  </script>
</body>
</html>
```