マスタースパークは避けられるのか？'s game

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

No:15919

108

←

Prev Next

→

マスタースパークは避けられるのか？
Developer User4966｜Date and time 23/9/13 20:01:24
Build time 33.548 sec｜Game capacity 2.8KB｜

Script

了解しました。以下に1枚のHTMLファイルとして実装した、マスタースパークを避けるゲームのコードを記述します。

😀

💥

このゲームでは、スマートフォンの傾きを利用してキャラクターを操作し、マスタースパーク（爆弾）を避けるゲームです。プレイヤーは画面中央に表示される😀の絵文字で、敵である💥の絵文字を避けるように操作します。プレイヤーが敵に接触すると、ゲームオーバーとなり、スコアが表示されます。スコアは画面上部に表示された😀の絵文字の横に表示されます。

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

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

了解しました。以下に1枚のHTMLファイルとして実装した、マスタースパークを避けるゲームのコードを記述します。

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <style>
    #player {
      position: absolute;
      top: 50%;
      left: 50%;
      font-size: 50px;
      transform: translate(-50%, -50%);
    }
    #enemy {
      position: absolute;
      top: 0;
      left: 50%;
      font-size: 50px;
      transform: translate(-50%, 0);
    }
  </style>
</head>
<body>
  <div id="player">😀</div>
  <div id="enemy">💥</div>

let score = 0;
    let gameover = false;

const updateScore = () => {
      if (!gameover) {
        score++;
        player.innerText = `😀 ${score}`;
      }
    };

const collisionDetection = () => {
      const playerRect = player.getBoundingClientRect();
      const enemyRect = enemy.getBoundingClientRect();

if (
        playerRect.top < enemyRect.bottom &&
        playerRect.bottom > enemyRect.top &&
        playerRect.left < enemyRect.right &&
        playerRect.right > enemyRect.left
      ) {
        gameover = true;
        player.innerText = `Game Over! Score: ${score}`;
        player.style.color = 'red';
      }
    };

const moveEnemy = () => {
      const windowHeight = window.innerHeight;
      let currentPosition = 0;
      let speed = 5;

const move = () => {
        if (!gameover) {
          currentPosition += speed;
          enemy.style.top = `${currentPosition}px`;

if (currentPosition >= windowHeight) {
            currentPosition = 0;
            updateScore();
          }

collisionDetection();
          requestAnimationFrame(move);
        }
      };

requestAnimationFrame(move);
    };

const movePlayer = () => {
      const windowWidth = window.innerWidth;

moveEnemy();
    movePlayer();
  </script>
</body>
</html>
```