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

No:35227

Animal Puzzle: Tap The Screen To Play!, Skip: Hi I..ALL
Developer User13970｜Date and time 24/1/13 17:30:08
Build time 12.665 sec｜Game capacity 3.12KB｜

Script

Sure! Here's an implementation of the Animal Puzzle game as a single HTML file:

Animal Puzzle - Tap The Screen To Play!

Skip: Hi, I'm Kiki! Welcome To Crafty Zoo World!

🐵

🐒

🐘

🦊

🐶

🐕

🐭

🐡

🐙

🐢

🐎

This is a simple animal puzzle game where you need to rearrange the animal pictograms to form the correct alphabet order. By tapping on the tiles, you can select them and reorder them. Once you have the correct order, a congratulations message will be displayed. Please note that the pictograms used in the code are placeholders and might not correspond exactly to the actual animal representations. Feel free to replace them with your desired pictograms.

←

Prev　Next

→ 　

Back　

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

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

Sure! Here's an implementation of the Animal Puzzle game as a single HTML file:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Animal Puzzle - Tap The Screen To Play!</title>
  <style>
    body {
      text-align: center;
      font-family: Arial, sans-serif;
    }
    #game-board {
      width: 400px;
      height: 400px;
      margin: 20px auto;
      border: 2px solid black;
      display: flex;
      flex-wrap: wrap;
    }
    .tile {
      width: 100px;
      height: 100px;
      box-sizing: border-box;
      border: 1px solid black;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <h1>Animal Puzzle - Tap The Screen To Play!</h1>
  <p>Skip: Hi, I'm Kiki! Welcome To Crafty Zoo World!</p>
  <div id="game-board">
    <div class="tile"></div>
    <div class="tile">🐵</div>
    <div class="tile">🐒</div>
    <div class="tile">🐘</div>
    <div class="tile">🦊</div>
    <div class="tile">🐶</div>
    <div class="tile">🐕</div>
    <div class="tile">🐭</div>
    <div class="tile">🐡</div>
    <div class="tile">🐙</div>
    <div class="tile">🐢</div>
    <div class="tile">🐎</div>
  </div>

function shuffleTiles() {
      for (let i = 0; i < 100; i++) {
        const tile1 = Math.floor(Math.random() * tiles.length);
        const tile2 = Math.floor(Math.random() * tiles.length);
        gameBoard.insertBefore(tiles[tile2], tiles[tile1]);
      }
    }

function checkCompletion() {
      const tileOrder = Array.from(tiles).map(tile => tile.innerHTML);

if (tileOrder.join('') === 'ابجدهوزح', 'abcdefghijklmnopqrstuvwxyz') {
        completed = true;
        alert('Congratulations! You solved the puzzle!');
      }
    }

function handleTileClick() {
      if (completed) return;
      this.classList.toggle('selected');

const selectedTiles = document.querySelectorAll('.selected');
      const selectedTileCount = selectedTiles.length;

if (selectedTileCount === 2) {
        gameBoard.style.pointerEvents = 'none';

setTimeout(() => {
          selectedTiles.forEach(tile => tile.classList.remove('selected'));
          gameBoard.style.pointerEvents = 'auto';
          checkCompletion();
        }, 500);
      }
    }

tiles.forEach(tile => tile.addEventListener('click', handleTileClick));

shuffleTiles();
  </script>
</body>
</html>
```

Please note that the pictograms used in the code are placeholders and might not correspond exactly to the actual animal representations. Feel free to replace them with your desired pictograms.