2 cars racing vs bot ai's game

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

No:35168

117

←

Prev Next

→

2 cars racing vs bot ai
Developer User16442｜Date and time 24/1/13 13:14:26
Build time 17.661 sec｜Game capacity 3.917KB｜

Script

Sure! Here's a simple game implementing a two-player car racing against a bot AI. The game is designed to be played on a smartphone and uses pictograms.

To use the code: 1. Replace the `emozi_all/car.png`, `emozi_all/car.png`, and `emozi_all/car.png` with the actual paths to the pictograms you want to use for the cars. 2. Save the code as an HTML file. 3. Open the HTML file in a web browser on a smartphone. In the game, the two player cars can be controlled using the arrow buttons, and the AI car moves randomly. The objective of the game is to reach the finish line (right end of the race track) before the AI car does.

←

Prev　Next

→ 　

Back　

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

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

Sure! Here's a simple game implementing a two-player car racing against a bot AI. The game is designed to be played on a smartphone and uses pictograms.

```html
<!DOCTYPE html>
<html>
<head>
  <title>Auto Race</title>
  <style>
    body {
      font-family: Arial, sans-serif;
    }
    .race-track {
      width: 100%;
      height: 400px;
      background-color: lightgray;
      border: 1px solid gray;
      margin-bottom: 20px;
      position: relative;
    }
    .car {
      width: 50px;
      height: 80px;
      position: absolute;
      bottom: 0;
    }
    .player1 {
      background-image: url('path-to-player1-car-pictogram.png');
    }
    .player2 {
      background-image: url('path-to-player2-car-pictogram.png');
    }
    .ai {
      background-image: url('path-to-ai-car-pictogram.png');
    }
    .controls {
      display: flex;
      justify-content: space-between;
    }
    .player-controls {
      display: flex;
      flex-direction: column;
    }
    .button {
      width: 80px;
      height: 40px;
      background-color: lightblue;
      border: none;
      margin: 5px;
      border-radius: 5px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div class="race-track">
    <div id="player1Car" class="car player1"></div>
    <div id="player2Car" class="car player2"></div>
    <div id="aiCar" class="car ai"></div>
  </div>
  <div class="controls">
    <div class="player-controls">
      <button class="button" onclick="moveCar('player1', 'left')">⬅️</button>
      <button class="button" onclick="moveCar('player1', 'right')">➡️</button>
      <button class="button" onclick="moveCar('player1', 'up')">⬆️</button>
      <button class="button" onclick="moveCar('player1', 'down')">⬇️</button>
    </div>
    <div class="player-controls">
      <button class="button" onclick="moveCar('player2', 'left')">⬅️</button>
      <button class="button" onclick="moveCar('player2', 'right')">➡️</button>
      <button class="button" onclick="moveCar('player2', 'up')">⬆️</button>
      <button class="button" onclick="moveCar('player2', 'down')">⬇️</button>
    </div>
  </div>

// Move a car based on the given direction
    function moveCar(car, direction) {
      if (car === "player1") {
        switch (direction) {
          case "left":
            player1Pos -= 10;
            break;
          case "right":
            player1Pos += 10;
            break;
          case "up":
            player1Pos -= 20;
            break;
          case "down":
            player1Pos += 20;
            break;
        }
        document.getElementById("player1Car").style.left = player1Pos + "px";
      } else if (car === "player2") {
        switch (direction) {
          case "left":
            player2Pos -= 10;
            break;
          case "right":
            player2Pos += 10;
            break;
          case "up":
            player2Pos -= 20;
            break;
          case "down":
            player2Pos += 20;
            break;
        }
        document.getElementById("player2Car").style.left = player2Pos + "px";
      }

// Move AI car randomly
      aiPos += Math.floor(Math.random() * 20);
      document.getElementById("aiCar").style.left = aiPos + "px";
    }
  </script>
</body>
</html>
```

To use the code:

1. Replace the `path-to-player1-car-pictogram.png`, `path-to-player2-car-pictogram.png`, and `path-to-ai-car-pictogram.png` with the actual paths to the pictograms you want to use for the cars.
2. Save the code as an HTML file.
3. Open the HTML file in a web browser on a smartphone.

In the game, the two player cars can be controlled using the arrow buttons, and the AI car moves randomly. The objective of the game is to reach the finish line (right end of the race track) before the AI car does.