AI game creator

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

No:16092

←

Prev Next

→

A Tokyo drift game
Developer User7122｜Date and time 23/9/16 0:01:32
Build time 40.803 sec｜Game capacity 4.272KB｜

Script

Sure! Here's a simple Tokyo Drift game implemented as a single HTML file using JavaScript. It involves a car that moves horizontally along the road and the player has to drift the car to avoid obstacles.

To use this game, you can copy the above code and save it as a .html file. Then open the file in a web browser on your smartphone or any device that supports HTML and JavaScript. The player can control the car using the left and right arrow keys to drift and avoid obstacles. The score increases as the player successfully avoids obstacles. The game ends when the car collides with an obstacle, and the final score is displayed. To play again, simply refresh the page.

←

Prev　Next

→ 　

Back　

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

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

```html
<!DOCTYPE html>
<html>
<head>
  <title>Tokyo Drift Game</title>
  <style>
    body {
      margin: 0;
      overflow: hidden;
    }
    canvas {
      display: block;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas"></canvas>

// Pictograms
    var carImage = new Image();
    carImage.src = "https://example.com/car.png"; // Replace with your own car image

var obstacleImage = new Image();
    obstacleImage.src = "https://example.com/obstacle.png"; // Replace with your own obstacle image

// Game initialization
    function init() {
      canvas = document.getElementById("gameCanvas");
      ctx = canvas.getContext("2d");

car = {
        x: canvas.width / 2 - 25, // Initial car position
        y: canvas.height - 100,
        width: 50,
        height: 100,
        speed: 5
      };

road = {
        x: 0,
        y: 0,
        width: canvas.width,
        height: canvas.height
      };

// Start game loop
      gameInterval = setInterval(updateGame, 20);

// Event listeners
      document.addEventListener("keydown", driftCar);
    }

// Function to update game state
    function updateGame() {
      ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear canvas

// Draw road
      ctx.fillStyle = "#777";
      ctx.fillRect(road.x, road.y, road.width, road.height);

// Move and draw car
      updateCarPosition();
      ctx.drawImage(carImage, car.x, car.y, car.width, car.height);

// Add obstacles randomly
      if (Math.random() < 0.02) {
        var obstacle = {
          x: Math.random() * canvas.width,
          y: 0,
          width: 50,
          height: 50,
          speed: Math.random() * 3 + 1
        };
        obstacles.push(obstacle);
      }

// Move and draw obstacles
      for (var i = 0; i < obstacles.length; i++) {
        var obstacle = obstacles[i];
        obstacle.y += obstacle.speed;
        ctx.drawImage(obstacleImage, obstacle.x, obstacle.y, obstacle.width, obstacle.height);

// Check collision with car
        if (collisionDetected(car, obstacle)) {
          clearInterval(gameInterval);
          alert("Game Over! Score: " + score);
          window.location.reload();
        }

// Remove obstacles that have moved off the screen
        if (obstacle.y > canvas.height) {
          obstacles.splice(i, 1);
          score++;
        }
      }

// Display score
      ctx.fillStyle = "#fff";
      ctx.font = "24px Arial";
      ctx.fillText("Score: " + score, 20, 40);
    }

// Function to update car position based on user input
    function updateCarPosition() {
      if (car.x >= 0 && car.x <= canvas.width - car.width) {
        car.x += car.speed;
      } else if (car.x < 0) {
        car.x = 0;
      } else {
        car.x = canvas.width - car.width;
      }
    }

// Function to handle car drifting
    function driftCar(event) {
      if (event.keyCode === 37) { // Left arrow key
        car.x -= car.speed * 2;
      } else if (event.keyCode === 39) { // Right arrow key
        car.x += car.speed * 2;
      }
    }

// Function to check collision between two objects
    function collisionDetected(obj1, obj2) {
      return obj1.x < obj2.x + obj2.width &&
             obj1.x + obj1.width > obj2.x &&
             obj1.y < obj2.y + obj2.height &&
             obj1.y + obj1.height > obj2.y;
    }

// Game start
    init();
  </script>
</body>
</html>
```