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

No:543

171

←

Prev Next

→

Hide and seek tag in Nucular bunker
Developer User3015｜Date and time 23/6/15 12:34:54
Build time 34.112 sec｜Game capacity 3.202KB｜

Script

Hide and Seek Tag in Nucular Bunker

👦

👧

🧑

👻

In this game, players click on the characters to find out who is ”it”. The player identified as ”it” can tag the other players by clicking on them. The player who is tagged becomes ”it”. The game continues until all players are tagged or the players decide to end the game. The characters represent players hiding in a nuclear bunker, hence the title ”Hide and Seek Tag in Nucular Bunker”. The game can be played on a smartphone by simply tapping on the characters.

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hide and Seek Tag in Nucular Bunker</title>
    <style>
      body {
        font-size: 16px;
        text-align: center;
      }

#field {
        width: 80%;
        height: 300px;
        border: 2px solid black;
        margin: 0 auto;
        position: relative;
      }

.player {
        font-size: 30px;
        position: absolute;
      }

#player1 {
        color: blue;
        left: 20%;
      }

#player2 {
        color: red;
        left: 50%;
      }

#player3 {
        color: green;
        left: 80%;
      }

#it {
        color: magenta;
      }

#button {
        margin-top: 20px;
        background-color: yellow;
        border: 2px solid black;
        padding: 10px;
        font-size: 20px;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <h1>Hide and Seek Tag in Nucular Bunker</h1>
    <div id="field">
      <div class="player" id="player1">👦</div>
      <div class="player" id="player2">👧</div>
      <div class="player" id="player3">🧑</div>
      <div class="player" id="it">👻</div>
    </div>
    <button id="button">Start the Game!</button>
    <script>
      const field = document.getElementById('field');
      const player1 = document.getElementById('player1');
      const player2 = document.getElementById('player2');
      const player3 = document.getElementById('player3');
      const it = document.getElementById('it');
      const button = document.getElementById('button');

button.addEventListener('click', function() {
        const players = [player1, player2, player3];
        const numOfPlayers = players.length;
        const itIndex = Math.floor(Math.random() * numOfPlayers);
        const itPlayer = players.splice(itIndex, 1)[0];

itPlayer.classList.add('it');

field.addEventListener('click', function(event) {
          if (event.target.classList.contains('player')) {
            if (event.target.classList.contains('it')) {
              event.target.classList.remove('it');
              players.push(itPlayer);
              const newItIndex = Math.floor(Math.random() * players.length);
              const newItPlayer = players.splice(newItIndex, 1)[0];
              newItPlayer.classList.add('it');
              it.appendChild(document.createTextNode('👻'));
            } else {
              event.target.style.display = 'none';
              players.splice(players.indexOf(event.target), 1);
            }

if (players.length === 0) {
              alert('Game Over!');
              location.reload();
            }
          }
        });
      });
    </script>
  </body>
</html>

In this game, players click on the characters to find out who is "it". The player identified as "it" can tag the other players by clicking on them. The player who is tagged becomes "it". The game continues until all players are tagged or the players decide to end the game. The characters represent players hiding in a nuclear bunker, hence the title "Hide and Seek Tag in Nucular Bunker". The game can be played on a smartphone by simply tapping on the characters.