AI game creator

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

No:24011

←

Prev Next

→

Sonic game
Developer User11245｜Date and time 23/11/5 5:40:23
Build time 53.337 sec｜Game capacity 2.37KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
  <title>Sonic Game</title>
</head>
<body>
  <canvas id="gameCanvas" width="800" height="600"></canvas>

// Define Sonic's properties
    const sonic = {
      x: 50,
      y: 300,
      width: 60,
      height: 70,
      speed: 5,
      dx: 0,
      dy: 0,
    };

// Load Sonic's image
    const sonicImage = new Image();
    sonicImage.src = "sonic.png";

// Handle keyboard input
    document.addEventListener("keydown", keyDownHandler);
    document.addEventListener("keyup", keyUpHandler);

function keyUpHandler(event) {
      if (
        event.key === "Right" ||
        event.key === "ArrowRight" ||
        event.key === "Left" ||
        event.key === "ArrowLeft"
      ) {
        sonic.dx = 0;
      } else if (
        event.key === "Up" ||
        event.key === "ArrowUp" ||
        event.key === "Down" ||
        event.key === "ArrowDown"
      ) {
        sonic.dy = 0;
      }
    }

// Update Sonic's position
    function update() {
      sonic.x += sonic.dx;
      sonic.y += sonic.dy;

// Keep Sonic within the canvas boundaries
      if (sonic.x < 0) {
        sonic.x = 0;
      }
      if (sonic.x + sonic.width > canvas.width) {
        sonic.x = canvas.width - sonic.width;
      }
      if (sonic.y < 0) {
        sonic.y = 0;
      }
      if (sonic.y + sonic.height > canvas.height) {
        sonic.y = canvas.height - sonic.height;
      }

// Clear the canvas
      context.clearRect(0, 0, canvas.width, canvas.height);

// Draw Sonic
      context.drawImage(sonicImage, sonic.x, sonic.y, sonic.width, sonic.height);

// Request the next animation frame
      requestAnimationFrame(update);
    }

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