AI game creator

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

No:3434

4159

←

Prev Next

→

Sonic 1
Developer User3655｜Date and time 23/6/25 3:34:21
Build time 18.397 sec｜Game capacity 2.222KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいゲームランキング

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sonic 1</title>
  </head>
  
  <body>
    <canvas id="gameCanvas"></canvas>
    <script>
      // ゲーム画面サイズ
      const canvasWidth = 480;
      const canvasHeight = 320;

// ゲームキャンバスの初期化
      const gameCanvas = document.getElementById("gameCanvas");
      gameCanvas.width = canvasWidth;
      gameCanvas.height = canvasHeight;
      const context = gameCanvas.getContext("2d");

// キャラクターオブジェクト
      const sonic = {
        x: 0,
        y: 0,
        speed: 10,
        direction: "right",
        width: 32,
        height: 32,
        image: new Image(),
      };
      sonic.image.src = "sonic.png";

// キー操作
      const keyDown = {};
      window.addEventListener("keydown", function(event) {
        keyDown[event.keyCode] = true;
      });
      window.addEventListener("keyup", function(event) {
        keyDown[event.keyCode] = false;
      });

// ゲーム更新
      function update() {
        if (keyDown[37]) {
          // 左キー
          sonic.direction = "left";
          sonic.x -= sonic.speed;
        }
        if (keyDown[38]) {
          // 上キー
          sonic.y -= sonic.speed;
        }
        if (keyDown[39]) {
          // 右キー
          sonic.direction = "right";
          sonic.x += sonic.speed;
        }
        if (keyDown[40]) {
          // 下キー
          sonic.y += sonic.speed;
        }
      }

// ゲーム描画
      function draw() {
        // 背景
        context.fillStyle = "#0000ff";
        context.fillRect(0, 0, canvasWidth, canvasHeight);

// キャラクター
        context.drawImage(
          sonic.image,
          0,
          0,
          sonic.width,
          sonic.height,
          sonic.x,
          sonic.y,
          sonic.width,
          sonic.height
        );
      }

// ゲームループ
      function loop() {
        update();
        draw();
        requestAnimationFrame(loop);
      }
      requestAnimationFrame(loop);
    </script>
  </body>
</html>