AI game creator

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

No:78

352

←

Prev Next

→

Belt Scroll Action
Developer anonymous｜Date and time 23/5/12 15:00:57
Build time 55.488 sec｜Game capacity 2.576KB｜

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">
    <title>Belt Scrolling Action Game</title>
    <style>
      canvas { 
        width: 100%; 
        height: 100%; 
        display: block;
      }
    </style>
  </head>
  <body>
    <canvas></canvas>

// キャラクターの初期状態
      let characterX = 50;
      let characterY = canvas.height - 100;
      let characterSpeedX = 5;
      let characterSpeedY = 0;
      let isJumping = false;

// キーボードの入力処理
      const keyMap = {};
      document.addEventListener('keydown', (event) => {
        keyMap[event.key] = true;
      });
      document.addEventListener('keyup', (event) => {
        keyMap[event.key] = false;
      });

// ゲームループ
      function gameLoop() {
        // キャンバスの更新
        ctx.clearRect(0, 0, canvas.width, canvas.height);

// キャラクターの描画
        ctx.fillStyle = "yellow";
        ctx.fillRect(characterX, characterY, 50, 50);

// キャラクターの移動
        if (keyMap['ArrowLeft']) {
          characterX -= characterSpeedX;
        }
        if (keyMap['ArrowRight']) {
          characterX += characterSpeedX;
        }
        if (keyMap['ArrowUp'] && !isJumping) {
          characterSpeedY = -20;
          isJumping = true;
        }

// キャラクターの重力
        characterY += characterSpeedY;
        characterSpeedY += 1;
        if (characterY >= canvas.height - 100) {
          characterY = canvas.height - 100;
          characterSpeedY = 0;
          isJumping = false;
        }

// キャラクターが画面外に出ないように制限
        if (characterX < 0) {
          characterX = 0;
        }
        if (characterX > canvas.width - 50) {
          characterX = canvas.width - 50;
        }

// 次のフレームの呼び出し
        requestAnimationFrame(gameLoop);
      }

// ゲームループの開始
      requestAnimationFrame(gameLoop);
    </script>
  </body>
</html>