Tag Game Players run away from the ogre👹. Make full use of obstacles and keep running!'s game

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

No:5880

3927

←

Prev Next

→

Tag Game Players run away from the ogre👹. Make ful..ALL
Developer もちきなこ｜Date and time 23/7/1 0:53:52
Build time 24.802 sec｜Game capacity 2.891KB｜

Script

了解しました。以下に鬼ごっこのゲームを作成するためのHTMLとJavaScriptのコードを示します。

🏃

このコードを1枚の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>
    #player {
      position: relative;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 60px;
    }
    
    .obstacle {
      position: absolute;
      background-color: black;
      width: 50px;
      height: 50px;
    }
  </style>
</head>
<body>
  <div id="player">🏃</div>
  <script>
    const player = document.getElementById('player');
    let isGameOver = false;

window.addEventListener('keydown', (event) => {
      if (isGameOver) return;
      
      const key = event.key;

if (key === 'ArrowUp') {
        movePlayer(0, -10);
      } else if (key === 'ArrowDown') {
        movePlayer(0, 10);
      } else if (key === 'ArrowLeft') {
        movePlayer(-10, 0);
      } else if (key === 'ArrowRight') {
        movePlayer(10, 0);
      }
    });

function movePlayer(deltaX, deltaY) {
      const playerRect = player.getBoundingClientRect();
      const newX = playerRect.left + deltaX;
      const newY = playerRect.top + deltaY;

if (isCollision(newX, newY)) {
        endGame();
      } else {
        player.style.left = newX + 'px';
        player.style.top = newY + 'px';
      }
    }

function isCollision(x, y) {
      const obstacles = document.querySelectorAll('.obstacle');

for (let i = 0; i < obstacles.length; i++) {
        const obstacleRect = obstacles[i].getBoundingClientRect();

if (
          x < obstacleRect.right &&
          x + player.offsetWidth > obstacleRect.left &&
          y < obstacleRect.bottom &&
          y + player.offsetHeight > obstacleRect.top
        ) {
          return true;
        }
      }

return false;
    }

function endGame() {
      isGameOver = true;
      player.innerHTML = '💀';
    }

function createObstacle() {
      const obstacle = document.createElement('div');
      obstacle.classList.add('obstacle');
      obstacle.style.top = Math.random() * 90 + '%';
      obstacle.style.left = Math.random() * 90 + '%';
      document.body.appendChild(obstacle);
    }

setInterval(createObstacle, 2000);
  </script>
</body>
</html>
```