キャラクターを動かして障害物をよけるゲーム's game

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

No:42614

←

Prev Next

→

キャラクターを動かして障害物をよけるゲーム
Developer User10436｜Date and time 24/2/12 9:25:24
Build time 10.312 sec｜Game capacity 3.218KB｜

Script

了解しました。以下にHTMLファイル内でJavaScriptを使用してキャラクターを動かし、障害物をよけるゲームの実装例を示します。

😀

このコードでは、キャラクターをスマホの矢印キーで操作できます。キャラクターは壁に当たらない範囲内で上下に移動します。また、ゲーム画面内には一定時間ごとにランダムな位置から障害物が表示され、キャラクターが障害物に当たるとゲームオーバーとなり、スコアが表示されます。スマートフォンでこのHTMLファイルを開くと、ゲームをプレイすることができます。

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

了解しました。以下にHTMLファイル内でJavaScriptを使用してキャラクターを動かし、障害物をよけるゲームの実装例を示します。

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>障害物をよけるゲーム</title>
  <style>
    #character {
      position: relative;
      font-size: 36px;
    }
  </style>
</head>
<body>
  <div id="character">😀</div>

let characterTop = 20; // キャラクターの初期位置
    let score = 0;

// キーボード操作でキャラクターを移動
    document.addEventListener("keydown", function(event) {
      if (event.key === "ArrowUp" && characterTop > 0) {
        characterTop -= 20;
        character.style.top = characterTop + "px";
      } else if (event.key === "ArrowDown" && characterTop < gameWindow.clientHeight - character.clientHeight) {
        characterTop += 20;
        character.style.top = characterTop + "px";
      }
    });

// 障害物を生成し、ランダムな位置で上下に動かす
    function createObstacle() {
      const obstacle = document.createElement("div");
      obstacle.style.position = "absolute";
      obstacle.style.left = gameWindow.clientWidth + "px";
      obstacle.style.top = Math.random() * (gameWindow.clientHeight - 40) + "px";
      obstacle.style.width = "40px";
      obstacle.style.height = "40px";
      obstacle.style.backgroundColor = "red";
      obstacle.style.animation = "moveObstacle 3s linear infinite";
      gameWindow.appendChild(obstacle);

// 障害物が画面外に出たら削除し、スコアを加算
      obstacle.addEventListener("animationiteration", function() {
        if (obstacle.getBoundingClientRect().left < -40) {
          obstacle.parentNode.removeChild(obstacle);
          score++;
        }
      });

// キャラクターとの衝突判定
      const gameLoop = setInterval(function() {
        const characterRect = character.getBoundingClientRect();
        const obstacleRect = obstacle.getBoundingClientRect();

if (characterRect.right > obstacleRect.left && characterRect.left < obstacleRect.right &&
            characterRect.bottom > obstacleRect.top && characterRect.top < obstacleRect.bottom) {
          clearInterval(gameLoop);
          alert("ゲームオーバー！ スコア: " + score);
          location.reload(); // ゲームオーバー後にリロードしてリスタート
        }
      }, 10);
    }

// 一定時間ごとに障害物を生成
    setInterval(createObstacle, 2000);
  </script>
</body>
</html>
```

このコードでは、キャラクターをスマホの矢印キーで操作できます。キャラクターは壁に当たらない範囲内で上下に移動します。また、ゲーム画面内には一定時間ごとにランダムな位置から障害物が表示され、キャラクターが障害物に当たるとゲームオーバーとなり、スコアが表示されます。

スマートフォンでこのHTMLファイルを開くと、ゲームをプレイすることができます。