A game in which Pien avoids Tengu, a falling pictogram.'s game

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

No:167

234

←

Prev Next

→

A game in which Pien avoids Tengu, a falling picto..ALL
Developer User2753｜Date and time 23/6/1 15:12:12
Build time 68.226 sec｜Game capacity 2.29KB｜

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>天狗避けゲーム</title>
  <style>
    body {
      font-size: 48px;
      text-align: center;
    }
  </style>
</head>

<body>
  <div id="player">😫</div>
  <div id="obstacle">🎭</div>
  <script>
    // プレイヤーと障害物の要素を取得
    const player = document.getElementById('player');
    const obstacle = document.getElementById('obstacle');

// プレイヤーの初期位置を設定
    let playerX = 50;
    player.style.left = playerX + "%";

// 障害物の初期位置を設定
    let obstacleX = Math.floor(Math.random() * 80);
    obstacle.style.left = obstacleX + "%";

// ゲームオーバー条件を設定
    function gameOver() {
      clearInterval(intervalId);
      alert("ゲームオーバー！もう一度遊んでね！");
      window.location.reload();
    }

// キー入力によるプレイヤーの移動
    document.addEventListener('keydown', e => {
      if (e.key === "ArrowLeft") {
        playerX = Math.max(playerX - 10, 0);
        player.style.left = playerX + "%";
      } else if (e.key === "ArrowRight") {
        playerX = Math.min(playerX + 10, 90);
        player.style.left = playerX + "%";
      }
    });

// 障害物の降下
    let intervalId = setInterval(() => {
      let obstacleY = parseInt(obstacle.style.top) || 0;
      obstacle.style.top = (obstacleY + 10) + "%";

// プレイヤーが障害物に衝突した場合
      if (obstacleY > 90 && Math.abs(playerX - obstacleX) < 10) {
        gameOver();
      }

// 障害物の再配置
      if (obstacleY > 100) {
        obstacleX = Math.floor(Math.random() * 80);
        obstacleY = -10;
        obstacle.style.left = obstacleX + "%";
        obstacle.style.top = obstacleY + "%";
      }
    }, 50);
  </script>
</body>
</html>