AI game creator

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

No:11870

129

←

Prev Next

→

Sonic the hedgehog
Developer User4964｜Date and time 23/8/12 19:31:47
Build time 17.981 sec｜Game capacity 2.214KB｜

Script

This is a basic implementation of a Sonic the Hedgehog game using HTML and JavaScript. It consists of a single HTML file containing the necessary code enclosed within script tags. The game logic is handled through JavaScript. When the game starts, an HTML5 canvas element is created on which the game will be rendered. Sonic's position is updated in the `updateGame` function, and it also checks for collisions with the canvas edges to reverse his direction. The `drawGame` function is responsible for clearing the canvas and drawing Sonic on it. You can further enhance the game by adding additional game elements, controls, levels, and animations as per your requirement.

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋ゲームランキング

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

<!DOCTYPE html>
<html>
<head>
  <title>Sonic the Hedgehog Game</title>
  <style>
    canvas {
      border: 1px solid black;
      background-color: #ddd;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="480" height="270"></canvas>

let sonicX = 50;
    let sonicY = 50;
    let sonicSpeedX = 5;
    let sonicSpeedY = 5;

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

// Start game loop
      setInterval(updateGame, 1000 / 30); // 30 frames per second
    }

// Update game logic
    function updateGame() {
      moveSonic();
      drawGame();
    }

// Move Sonic
    function moveSonic() {
      sonicX += sonicSpeedX;
      sonicY += sonicSpeedY;

// Reverse direction on collision with canvas edges
      if (sonicX > canvas.width || sonicX < 0) {
        sonicSpeedX *= -1;
      }
      if (sonicY > canvas.height || sonicY < 0) {
        sonicSpeedY *= -1;
      }
    }

// Draw game
    function drawGame() {
      // Clear canvas
      canvasContext.clearRect(0, 0, canvas.width, canvas.height);

// Draw Sonic
      canvasContext.fillStyle = "blue";
      canvasContext.fillRect(sonicX, sonicY, 20, 20);

// Draw pictograms or text here if desired

// Additional game graphics drawing code can be added here
    }

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

When the game starts, an HTML5 canvas element is created on which the game will be rendered. Sonic's position is updated in the `updateGame` function, and it also checks for collisions with the canvas edges to reverse his direction. The `drawGame` function is responsible for clearing the canvas and drawing Sonic on it.

You can further enhance the game by adding additional game elements, controls, levels, and animations as per your requirement.