AI game creator

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

No:690

427

←

Prev Next

→

Avoid Onigiri game
Developer User3086｜Date and time 23/6/17 13:14:45
Build time 42.836 sec｜Game capacity 3.837KB｜

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>おにぎりを避けるゲーム</title>
  </head>
  <body>
    <canvas id="game-canvas"></canvas>
    <script>
      const canvas = document.getElementById('game-canvas');
      const ctx = canvas.getContext('2d');

// ゲームの設定
      const GAME_WIDTH = 320;
      const GAME_HEIGHT = 480;
      const PLAYER_WIDTH = 40;
      const PLAYER_HEIGHT = 40;
      const PLAYER_MOVE_SPEED = 5;
      const ONIGIRI_WIDTH = 30;
      const ONIGIRI_HEIGHT = 30;
      const ONIGIRI_FALL_SPEED = 4;
      const ONIGIRI_INTERVAL = 1000;
      const ONIGIRI_EMOJI = '🍙';
      const PLAYER_EMOJI = '😀';

// ゲームの状態
      let playerX = (GAME_WIDTH - PLAYER_WIDTH) / 2;
      let onigiriList = [];
      let lastOnigiriTime = 0;
      let score = 0;

// ゲームの更新
      function update() {
        // プレイヤーの移動
        if (isKeyPressed('ArrowLeft') && playerX > 0) {
          playerX -= PLAYER_MOVE_SPEED;
        } else if (isKeyPressed('ArrowRight') && playerX + PLAYER_WIDTH < GAME_WIDTH) {
          playerX += PLAYER_MOVE_SPEED;
        }

// おにぎりの落下
        const currentTime = Date.now();
        const elapsedTime = currentTime - lastOnigiriTime;
        if (elapsedTime > ONIGIRI_INTERVAL) {
          onigiriList.push({
            x: Math.random() * (GAME_WIDTH - ONIGIRI_WIDTH),
            y: -ONIGIRI_HEIGHT
          });
          lastOnigiriTime = currentTime;
        }
        onigiriList.forEach(onigiri => onigiri.y += ONIGIRI_FALL_SPEED);

// 当たり判定
        onigiriList = onigiriList.filter(onigiri => {
          const playerRight = playerX + PLAYER_WIDTH;
          const playerBottom = GAME_HEIGHT - PLAYER_HEIGHT;
          const onigiriRight = onigiri.x + ONIGIRI_WIDTH;
          const onigiriBottom = onigiri.y + ONIGIRI_HEIGHT;
          if (onigiriRight < playerX || onigiriBottom < playerBottom || onigiri.x > playerRight) {
            return true; // 当たっていない
          }
          score++;
          return false; // 当たった
        });
      }

// ゲームの描画
      function draw() {
        // 背景
        ctx.fillStyle = '#f0f0f0';
        ctx.fillRect(0, 0, GAME_WIDTH, GAME_HEIGHT);

// プレイヤー
        ctx.font = `${PLAYER_WIDTH}px sans-serif`;
        ctx.fillStyle = '#0000ff';
        ctx.fillText(PLAYER_EMOJI, playerX, GAME_HEIGHT - PLAYER_HEIGHT);

// おにぎり
        ctx.font = `${ONIGIRI_WIDTH}px sans-serif`;
        ctx.fillStyle = '#ff0000';
        onigiriList.forEach(onigiri => ctx.fillText(ONIGIRI_EMOJI, onigiri.x, onigiri.y));

// スコア
        ctx.font = '20px sans-serif';
        ctx.fillStyle = '#000000';
        ctx.fillText(`Score: ${score}`, 10, 30);
      }

// ゲームのループ
      function loop() {
        update();
        draw();
        requestAnimationFrame(loop);
      }
      requestAnimationFrame(loop);

// キーボードの状態
      const keyState = {};
      document.addEventListener('keydown', event => {
        keyState[event.code] = true;
      });
      document.addEventListener('keyup', event => {
        keyState[event.code] = false;
      });
      function isKeyPressed(code) {
        return !!keyState[code];
      }
    </script>
  </body>
</html>

遊び方：
画面下部に表示されている、笑顔の顔文字を左右に移動させて、上から落ちてくるおにぎりを避けましょう。当たるとスコアが加算されます。スマホの場合は画面をタップして、その方向に移動します。