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

No:35260

119

←

Prev Next

→

ひよこ屋
Developer おまめちゃん｜Date and time 24/1/13 18:24:29
Build time 13.963 sec｜Game capacity 2.617KB｜

Script

了解です。以下に示すのは、簡単なゲームの例です。

ひよこ屋のゲーム

このゲームでは、キーボードの矢印キーを使ってひよこの位置を制御します。ひよこの位置は1フレームごとに速度を加算することで更新され、キャンバス上に描画されます。ゲームのメインループは`requestAnimationFrame`を使用して呼び出され、連続的な描画を行います。このゲームをブラウザで開くと、画面上にひよこが表示され、キーボードの矢印キーでひよこの移動が制御できます。

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

了解です。以下に示すのは、簡単なゲームの例です。

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>ひよこ屋のゲーム</title>
  <style>
    body {
      font-size: 24px;
      text-align: center;
    }
  </style>
</head>
<body>
  <h1>ひよこ屋のゲーム</h1>

// ひよこの初期位置と速度
      let x = 200;
      let y = 200;
      let speedX = 0;
      let speedY = 0;

// ゲームのメインループ
      function gameLoop() {
        // ひよこの現在位置を更新
        x += speedX;
        y += speedY;

// ひよこの位置をクリア
        context.clearRect(0, 0, canvas.width, canvas.height);

// ひよこを描画
        context.fillText('🐥', x, y);

// メインループを再度呼び出し
        requestAnimationFrame(gameLoop);
      }

// キーボード操作のイベントリスナー
      document.addEventListener('keydown', (event) => {
        if (event.key === 'ArrowUp') {
          speedY = -1;
        } else if (event.key === 'ArrowDown') {
          speedY = 1;
        } else if (event.key === 'ArrowLeft') {
          speedX = -1;
        } else if (event.key === 'ArrowRight') {
          speedX = 1;
        }
      });

document.addEventListener('keyup', (event) => {
        if (
          event.key === 'ArrowUp' ||
          event.key === 'ArrowDown' ||
          event.key === 'ArrowLeft' ||
          event.key === 'ArrowRight'
        ) {
          speedX = 0;
          speedY = 0;
        }
      });

// ゲームのメインループを開始
      gameLoop();
    }

// ページのロード後にゲームの初期化を呼び出す
    window.addEventListener('load', init);
  </script>
</body>
</html>
```

このゲームでは、キーボードの矢印キーを使ってひよこの位置を制御します。ひよこの位置は1フレームごとに速度を加算することで更新され、キャンバス上に描画されます。ゲームのメインループは`requestAnimationFrame`を使用して呼び出され、連続的な描画を行います。

このゲームをブラウザで開くと、画面上にひよこが表示され、キーボードの矢印キーでひよこの移動が制御できます。