スピーディーな横スクロールアクションゲーム's game

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

No:41742

←

Prev Next

→

スピーディーな横スクロールアクションゲーム
Developer User18723｜Date and time 24/2/9 17:41:29
Build time 13.789 sec｜Game capacity 3.278KB｜

Script

了解しました。以下が実装例です。

🚀

このプログラムは、スマホの傾きを検知してプレイヤーを操作し、障害物との衝突を避ける横スクロールアクションゲームです。プレイヤーは「🚀」の絵文字で表示され、障害物は赤い矩形で表示されます。プレイヤーが障害物と衝突するとゲームオーバーとなり、再度プレイできます。

←

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">
    <style>
      #player {
        position: absolute;
        width: 50px;
        height: 50px;
        background-color: yellow;
        border-radius: 50%;
        font-size: 30px;
        text-align: center;
        line-height: 50px;
      }
      #player span {
        display: inline-block;
        vertical-align: middle;
      }
      #obstacles {
        position: absolute;
        width: 50px;
        height: 300px;
        background-color: red;
      }
    </style>
  </head>
  <body>
    <div id="player"><span>🚀</span></div>
    <div id="obstacles"></div>

// 障害物の初期位置
      var obstacleX = 600;

// 速度調整
      var playerSpeed = 5;
      var obstacleSpeed = 3;

// スマホの傾きを検知してプレイヤーを移動させる
      window.addEventListener("deviceorientation", function(event) {
        var x = event.gamma;  // スマホの傾き（左右）
        var y = event.beta;   // スマホの傾き（前後）

// プレイヤーの座標を更新
        playerX += x * playerSpeed;
        playerY -= y * playerSpeed;

// プレイヤーの座標が画面外に出ないように制限
        if (playerX < 0) {
          playerX = 0;
        }
        if (playerY < 0) {
          playerY = 0;
        }
        if (playerX > window.innerWidth - 50) {
          playerX = window.innerWidth - 50;
        }
        if (playerY > window.innerHeight - 50) {
          playerY = window.innerHeight - 50;
        }

// プレイヤーを移動させる
        document.getElementById("player").style.transform = "translate(" + playerX + "px, " + playerY + "px)";
      });

function gameLoop() {
        // 障害物の座標を更新
        obstacleX -= obstacleSpeed;

// 障害物が画面外に出たらランダムな位置に再配置
        if (obstacleX < -50) {
          obstacleX = window.innerWidth;
          obstacleY = Math.random() * (window.innerHeight - 300);
        }

// 障害物を移動させる
        document.getElementById("obstacles").style.transform = "translate(" + obstacleX + "px, " + obstacleY + "px)";

// 衝突判定
        if (playerX + 50 > obstacleX && playerX < obstacleX + 50 && playerY + 50 > obstacleY && playerY < obstacleY + 300) {
          // 衝突した場合の処理
          alert("ゲームオーバー");
          playerX = 100;
          playerY = 250;
          obstacleX = 600;
        }

// 次のフレームの更新
        requestAnimationFrame(gameLoop);
      }

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