ペンギンのアクションゲーム's game

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

No:36102

←

Prev Next

→

ペンギンのアクションゲーム
Developer User16750｜Date and time 24/1/16 22:25:30
Build time 13.662 sec｜Game capacity 2.363KB｜

Script

了解しました。以下にペンギンのアクションゲームの実装例を示します。

この例では、ペンギンが画面内を往復するアクションゲームを実装しています。ペンギンの初期位置と移動速度を管理し、ペンギンを移動させる「movePenguin」関数を定義しています。スマートフォンの傾きを検出して移動速度を変更することで、プレイヤーはペンギンを操作することができます。また、アクションゲームのために、ゲームループを作成し、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>Penguin Game</title>
  <style>
    #game-container {
      position: relative;
      width: 300px;
      height: 400px;
      border: 1px solid #000;
      background-color: #99ccff;
    }
    #penguin {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 50px;
      height: 50px;
      background-color: #ffffff;
    }
  </style>
</head>
<body>
  <div id="game-container">
    <div id="penguin"></div>
  </div>
  <script>
    // ペンギンの初期位置と移動速度
    let penguinLeft = 0;
    let penguinSpeed = 5;

// ペンギンを動かす関数
    function movePenguin() {
      // ペンギンの現在位置を計算
      penguinLeft += penguinSpeed;

// ペンギンが画面の端まで行った場合、反対側の端に移動
      if (penguinLeft > 250) {
        penguinLeft = -50;
      } else if (penguinLeft < -50) {
        penguinLeft = 250;
      }
      
      // ペンギンの表示位置を更新
      const penguin = document.getElementById('penguin');
      penguin.style.left = penguinLeft + 'px';

// 次のフレームで再び移動する
      requestAnimationFrame(movePenguin);
    }

// スマホの傾きを検出して移動速度を変更
    window.addEventListener('deviceorientation', function(event) {
      // スマホの傾きを[-1, 1]の範囲に正規化
      const normalizedTilt = event.gamma / 90;
      
      // 移動速度を[-10, 10]の範囲にスケーリング
      penguinSpeed = normalizedTilt * 10;
    });

// ゲームを開始
    movePenguin();

</script>
</body>
</html>
```