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

No:8236

285

←

Prev Next

→

Make a racer game for Ben 10 like Mario kart(playa..ALL
Developer User4044｜Date and time 23/7/14 10:27:50
Build time 34.946 sec｜Game capacity 4.521KB｜

Script

Sure! Here's a sample HTML file that implements a racer game for Ben 10, similar to Mario Kart. Note that this is a simplified version and can be further enhanced with additional features and graphics.

Ben 10 Racer

To play the game, you can simply copy and paste the above code into a new HTML file, save it, and then open it in a web browser. Use the left and right arrow keys to move the player (represented by a red square) and dodge the obstacles (represented by green squares). The game will continue until a collision occurs. After game over, a popup will display your final score and the game will automatically restart.

←

Prev　Next

→ 　

Back　

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

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

```html
<!DOCTYPE html>
<html>
  <head>
    <title>Ben 10 Racer</title>
    <style>
      #game-container {
        position: relative;
        width: 600px;
        height: 400px;
        background-color: #f2f2f2;
        border: 2px solid #333;
      }
      #player {
        position: absolute;
        bottom: 50px;
        left: 50px;
        width: 50px;
        height: 50px;
        background-color: #ff0000;
      }
      .obstacle {
        position: absolute;
        width: 40px;
        height: 40px;
        background-color: #00ff00;
      }
    </style>
  </head>
  <body>
    <h1>Ben 10 Racer</h1>
    <div id="game-container">
      <div id="player"></div>
    </div>

// Initialize the game
      function init() {
        player = document.getElementById("player");

// Start game loop
        gameLoop = setInterval(update, 20);

// Handle player controls
        document.addEventListener("keydown", handleKeyDown);
      }

// Update game state
      function update() {
        if (!isGameOver) {
          movePlayer();
          moveObstacles();

// Check for collisions
          if (checkCollision()) {
            gameOver();
          }

// Increase score
          score++;
          document.getElementById("score").innerHTML = "Score: " + score;
        }
      }

// Move the player left or right
      function movePlayer() {
        document.addEventListener("keydown", function (event) {
          if (event.key === "ArrowLeft") {
            player.style.left =
              parseInt(getComputedStyle(player).left) - playerSpeed + "px";
          } else if (event.key === "ArrowRight") {
            player.style.left =
              parseInt(getComputedStyle(player).left) + playerSpeed + "px";
          }
        });
      }

// Move the obstacles down
      function moveObstacles() {
        for (var i = 0; i < obstacles.length; i++) {
          var obstacle = obstacles[i];
          obstacle.style.top =
            parseInt(getComputedStyle(obstacle).top) + obstacleSpeed + "px";

// Reset obstacle position if it goes off-screen
          if (parseInt(getComputedStyle(obstacle).top) > 400) {
            obstacle.style.top = "-40px";
            obstacle.style.left = Math.random() * 520 + "px";
          }
        }
      }

// Check for collisions between player and obstacles
      function checkCollision() {
        for (var i = 0; i < obstacles.length; i++) {
          var obstacle = obstacles[i];
          var playerRect = player.getBoundingClientRect();
          var obstacleRect = obstacle.getBoundingClientRect();

if (
            playerRect.top <= obstacleRect.bottom &&
            playerRect.bottom >= obstacleRect.top &&
            playerRect.left <= obstacleRect.right &&
            playerRect.right >= obstacleRect.left
          ) {
            return true; // Collision detected
          }
        }
        return false; // No collision
      }

// Game over
      function gameOver() {
        isGameOver = true;
        clearInterval(gameLoop);
        alert("Game Over! Your score: " + score);
        location.reload(); // Restart the game
      }

// Create obstacles at regular intervals
      setInterval(function () {
        var obstacle = document.createElement("div");
        obstacle.classList.add("obstacle");
        obstacle.style.top = "-40px";
        obstacle.style.left = Math.random() * 520 + "px";
        document.getElementById("game-container").appendChild(obstacle);
        obstacles.push(obstacle);
      }, 2000);

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