AI game creator

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

No:8266

1205

←

Prev Next

→

Sonic game
Developer User4164｜Date and time 23/7/14 13:41:25
Build time 25.832 sec｜Game capacity 3.735KB｜

Script

Sure, here's a simple playable sample game based on the Sonic series. Since it's impossible to create the entire Sonic game as a single HTML file, this sample game will feature a simplified version with basic mechanics. To play the game, you need to control Sonic using touch gestures on a smartphone. Sonic will automatically move forward, and your goal is to avoid obstacles and collect rings to earn points. The game will end if Sonic collides with an obstacle. Here's the code:

This code creates a basic Sonic game where Sonic automatically moves forward, and you need to avoid red obstacles and collect yellow rings. The game will display the score in the browser's title, and when Sonic collides with an obstacle, the game will end and display the final score. You can restart the game by clicking anywhere on the game container. Note: This is just a simplified sample game and does not include all the complex mechanics and levels found in the actual Sonic game.

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

To play the game, you need to control Sonic using touch gestures on a smartphone. Sonic will automatically move forward, and your goal is to avoid obstacles and collect rings to earn points. The game will end if Sonic collides with an obstacle.

Here's the code:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Sonic Sample Game</title>
  <style>
    #gameContainer {
      width: 100%;
      height: 500px;
      background: black;
      position: relative;
    }

#sonic {
      width: 50px;
      height: 50px;
      background: blue;
      position: absolute;
      bottom: 0;
      left: 0;
    }

.obstacle {
      width: 80px;
      height: 80px;
      background: red;
      position: absolute;
    }

.ring {
      width: 20px;
      height: 20px;
      background: yellow;
      position: absolute;
    }
  </style>
</head>
<body>
  <div id="gameContainer">
    <div id="sonic"></div>
    
    <div class="obstacle" style="bottom: 0; left: 300px;"></div>
    <div class="obstacle" style="bottom: 0; left: 600px;"></div>
    
    <div class="ring" style="bottom: 0; left: 400px;"></div>
    <div class="ring" style="bottom: 0; left: 700px;"></div>
  </div>

let score = 0;
      let gameLoop;

function updateScore() {
        document.title = `Sonic Sample Game - Score: ${score}`;
      }

function checkCollision() {
        const sonicRect = sonic.getBoundingClientRect();

obstacles.forEach((obstacle) => {
          const obstacleRect = obstacle.getBoundingClientRect();
          if (isColliding(sonicRect, obstacleRect)) {
            endGame();
          }
        });

rings.forEach((ring) => {
          const ringRect = ring.getBoundingClientRect();
          if (isColliding(sonicRect, ringRect)) {
            score++;
            updateScore();
            ring.remove();
          }
        });
      }

function isColliding(rect1, rect2) {
        return (
          rect1.bottom > rect2.top &&
          rect1.top < rect2.bottom &&
          rect1.right > rect2.left &&
          rect1.left < rect2.right
        );
      }

function moveSonic() {
        sonic.style.left = `${sonic.offsetLeft + 5}px`;
      }

function startGame() {
        score = 0;
        updateScore();
        gameLoop = setInterval(() => {
          moveSonic();
          checkCollision();
        }, 100);
      }

function endGame() {
        clearInterval(gameLoop);
        alert(`Game Over! Your final score is: ${score}`);
        startGame(); // Restart the game
      }

gameContainer.addEventListener('click', () => {
        startGame();
      });
    });
  </script>
</body>
</html>
```

Note: This is just a simplified sample game and does not include all the complex mechanics and levels found in the actual Sonic game.