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

No:36725

←

Prev Next

→

敵に当たるとゲームオーバー
Developer User16795｜Date and time 24/1/18 9:28:21
Build time 9.869 sec｜Game capacity 2.566KB｜

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">
  <title>ゲーム</title>
  <style>
    #player {
      position: fixed;
      bottom: 30px;
      left: 50%;
      transform: translateX(-50%);
      font-size: 48px;
    }
    .enemy {
      position: absolute;
      top: 0px;
      left: 50%;
      transform: translateX(-50%);
      font-size: 48px;
    }
  </style>
</head>
<body>
  <h1>ゲーム</h1>
  <script>
    let player = document.createElement("div");
    player.id = "player";
    player.innerHTML = "😊";
    document.body.appendChild(player);

let gameOver = false;

function movePlayer(event) {
      if (gameOver) return;

if (event.keyCode === 37) { // Left arrow
        player.style.left = parseInt(player.style.left) - 10 + "px";
      } else if (event.keyCode === 39) { // Right arrow
        player.style.left = parseInt(player.style.left) + 10 + "px";
      }
    }

document.addEventListener("keydown", movePlayer);

setInterval(function() {
      if (gameOver) return;

let enemy = document.createElement("div");
      enemy.className = "enemy";
      enemy.innerHTML = "👿";
      enemy.style.top = "0px";
      enemy.style.left = Math.random() * (window.innerWidth - 100) + "px";
      document.body.appendChild(enemy);

let moveInterval = setInterval(function() {
        if (gameOver) return;

enemy.style.top = parseInt(enemy.style.top) + 10 + "px";

if (parseInt(enemy.style.top) >= window.innerHeight - 100) {
          clearInterval(moveInterval);
          document.body.removeChild(enemy);
        }

let playerRect = player.getBoundingClientRect();
        let enemyRect = enemy.getBoundingClientRect();

if (playerRect.left < enemyRect.right && playerRect.right > enemyRect.left && playerRect.top < enemyRect.bottom && playerRect.bottom > enemyRect.top) {
          gameOver = true;
          document.removeEventListener("keydown", movePlayer);
          alert("ゲームオーバー");
        }
      }, 100);
    }, 1000);
  </script>
</body>
</html>
```