Game where you race against AI in a race to the right side of the screen. Boosts appear in the middle of the race that make you faster if you touch it.'s game

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

No:43324

←

Prev Next

→

Game where you race against AI in a race to the ri..ALL
Developer User19162｜Date and time 24/2/15 6:38:36
Build time 13.009 sec｜Game capacity 3.542KB｜

Script

Sure! Here's an example of a simple game where you race against AI to the right side of the screen. Boosts randomly appear in the middle of the race that make you faster if you touch them. The game is implemented as a single HTML file, containing JavaScript enclosed in script tags.

🏎️

🚗

⚡️

Feel free to save this code into an HTML file and open it on your smartphone or any web browser to play the game. The player is represented as a car (🏎️), the AI is represented as another car (🚗), and the boost is represented as a lightning bolt (⚡️). Your goal is to reach the right side of the screen before the AI does, and if you touch the boost, it will make you faster in the race. Enjoy the game!

←

Prev　Next

→ 　

Back　

[PR]現在のフィギュア売れ筋ランキング

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

```html
<!DOCTYPE html>
<html>
<head>
  <title>Race Game</title>
  <style>
    #player, #ai, #boost {
      position: absolute;
      top: 0;
      width: 50px;
      height: 50px;
      background-color: red;
      font-size: 40px;
      text-align: center;
    }
    #player {
      left: 10px;
    }
    #ai {
      left: 10px;
      top: 60px;
      background-color: blue;
    }
    #boost {
      background-color: green;
      width: 20px;
      height: 20px;
      font-size: 20px;
    }
  </style>
</head>
<body>
  <div id="player" class="character">🏎️</div>
  <div id="ai" class="character">🚗</div>
  <div id="boost" class="character">⚡️</div>

let playerSpeed = 5;
      let aiSpeed = 5;
      let boostAvailable = false;

function moveCharacters() {
        // Move the player character to the right
        const playerLeft = parseInt(getComputedStyle(player).left);
        if (playerLeft < screenWidth) {
          player.style.left = (playerLeft + playerSpeed) + 'px';
        }

// Move the AI character to the right
        const aiLeft = parseInt(getComputedStyle(ai).left);
        if (aiLeft < screenWidth) {
          ai.style.left = (aiLeft + aiSpeed) + 'px';
        }

// Check collision with the boost
        if (boostAvailable) {
          const boostTop = parseInt(getComputedStyle(boost).top);
          const boostLeft = parseInt(getComputedStyle(boost).left);
          if (
            playerLeft + player.clientWidth >= boostLeft &&
            playerLeft <= boostLeft + boost.clientWidth &&
            player.clientHeight >= boostTop &&
            playerTop <= boostTop + boost.clientHeight
          ) {
            playerSpeed += 3; // Increase player speed
            boostAvailable = false;
            boost.style.display = 'none';
          }
        }

requestAnimationFrame(moveCharacters);
      }

function generateRandomBoost() {
        const boostTop = Math.floor(Math.random() * 200) + 100;
        boost.style.top = boostTop + 'px';
        boost.style.left = (screenWidth / 2) + 'px';
        boost.style.display = 'block';
        boostAvailable = true;

// Reset boost after 3 seconds
        setTimeout(function() {
          boost.style.display = 'none';
          boostAvailable = false;
        }, 3000);

setTimeout(generateRandomBoost, Math.floor(Math.random() * 5000) + 2000);
      }

// Start the game
      moveCharacters();
      generateRandomBoost();
    });
  </script>
</body>
</html>
```