Make a game about playing tag's game

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

No:51690

155

←

Prev Next

→

Make a game about playing tag
Developer User21639｜Date and time 24/3/15 2:10:03
Build time 12.406 sec｜Game capacity 2.218KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>

<head>
  <title>Tag Game</title>
  <style>
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      background-color: #f0f0f0;
    }

#player {
      width: 50px;
      height: 50px;
      background-color: blue;
      position: absolute;
    }

#enemy {
      width: 50px;
      height: 50px;
      background-color: red;
      position: absolute;
    }
  </style>
</head>

let playerPosition = { x: 0, y: 0 };
    let enemyPosition = { x: 0, y: 0 };

function updatePlayerPosition(x, y) {
      playerPosition.x = x;
      playerPosition.y = y;
      player.style.left = x + 'px';
      player.style.top = y + 'px';
    }

function updateEnemyPosition(x, y) {
      enemyPosition.x = x;
      enemyPosition.y = y;
      enemy.style.left = x + 'px';
      enemy.style.top = y + 'px';
    }

function randomizeEnemyPosition() {
      const x = Math.floor(Math.random() * window.innerWidth);
      const y = Math.floor(Math.random() * window.innerHeight);
      updateEnemyPosition(x, y);
    }

function checkTag() {
      const playerRect = player.getBoundingClientRect();
      const enemyRect = enemy.getBoundingClientRect();

if (playerRect.left < enemyRect.right &&
        playerRect.right > enemyRect.left &&
        playerRect.top < enemyRect.bottom &&
        playerRect.bottom > enemyRect.top) {
        alert('You got tagged! Game over!');
        randomizeEnemyPosition();
      }
    }

function movePlayer(event) {
      let x = playerPosition.x;
      let y = playerPosition.y;

if (event.key === 'ArrowLeft') {
        x -= 10;
      } else if (event.key === 'ArrowRight') {
        x += 10;
      } else if (event.key === 'ArrowUp') {
        y -= 10;
      } else if (event.key === 'ArrowDown') {
        y += 10;
      }

updatePlayerPosition(x, y);
      checkTag();
    }

document.addEventListener('keydown', movePlayer);

randomizeEnemyPosition();
  </script>
</body>

</html>