A game to see how far it will extend's game

了解しました。以下に、スマホで遊べる簡単なゲームの例を示します。

このゲームでは、画面内の領域（

）をタッチすることで「プレイヤー」と呼ばれる赤いブロックを移動させます。プレイヤーが画面の外に出るとゲームオーバーとなり、スコアがリセットされます。プレイヤーが画面内にいる間は、1秒ごとにスコアが加算されます。このサンプルでは、スコアをページタイトルに表示していますが、画面内のどこまで延びるかゲームとしての要素も含まれています。

←

Prev　Next

→ 　

Back　

[PR]現在の本の売れ筋ランキング

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

了解しました。以下に、スマホで遊べる簡単なゲームの例を示します。

```html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>延びゲーム</title>
  <style>
    body {
      background-color: #f1f1f1;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
      overflow: hidden;
    }
    #game {
      width: 500px;
      height: 300px;
      background-color: #fff;
      border: 2px solid #000;
      position: relative;
    }
    #player {
      position: absolute;
      width: 15px;
      height: 15px;
      background-color: red;
    }
  </style>
</head>
<body>
  <div id="game">
    <div id="player"></div>
  </div>

function updateScore() {
        score++;
        document.title = `延びゲーム - スコア: ${score}`;
      }

function checkCollision() {
        const gameRect = gameElement.getBoundingClientRect();
        const playerRect = playerElement.getBoundingClientRect();

if (
          playerRect.left < gameRect.left ||
          playerRect.right > gameRect.right ||
          playerRect.top < gameRect.top ||
          playerRect.bottom > gameRect.bottom
        ) {
          endGame();
        }
      }

function endGame() {
        alert(`ゲームオーバー！ スコア: ${score}`);
        score = 0;
        document.title = "延びゲーム";
        playerElement.style.left = "0";
        playerElement.style.top = "0";
      }

gameElement.addEventListener('touchmove', movePlayer);
      setInterval(checkCollision, 10);
      setInterval(updateScore, 1000);
    });
  </script>
</body>
</html>
```

このゲームでは、画面内の領域（<div id="game">）をタッチすることで「プレイヤー」と呼ばれる赤いブロックを移動させます。プレイヤーが画面の外に出るとゲームオーバーとなり、スコアがリセットされます。プレイヤーが画面内にいる間は、1秒ごとにスコアが加算されます。

このサンプルでは、スコアをページタイトルに表示していますが、画面内のどこまで延びるかゲームとしての要素も含まれています。