AI game creator

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

No:39629

←

Prev Next

→

Puzzle
Developer User17743｜Date and time 24/1/29 15:00:51
Build time 17.37 sec｜Game capacity 3.542KB｜

Script

Sure, here's a simple puzzle game implemented as a single HTML file with JavaScript:

This game creates a 3x3 grid of puzzle pieces represented by pictograms. The goal is to rearrange the pieces by clicking on them to solve the puzzle. When the puzzle is solved, an alert message will be shown. Please note that this is a basic implementation and can be improved in various ways depending on specific game requirements.

←

Prev　Next

→ 　

Back　

[PR]現在の人気ゲームランキング

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

Sure, here's a simple puzzle game implemented as a single HTML file with JavaScript:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Puzzle Game</title>
  <style>
    #game-board {
      display: flex;
      flex-wrap: wrap;
      width: 300px;
    }
    .tile {
      width: 100px;
      height: 100px;
      border: 1px solid black;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 32px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div id="game-board"></div>

// Shuffle the pictograms randomly
    const shuffledPictograms = shuffle(pictograms);

// Create the puzzle pieces dynamically
    const gameBoard = document.getElementById("game-board");
    shuffledPictograms.forEach((pictogram, index) => {
      const tile = document.createElement("div");
      tile.classList.add("tile");
      tile.textContent = pictogram;
      tile.addEventListener("click", () => swapTiles(index));
      gameBoard.appendChild(tile);
    });

// Function to swap tiles
    function swapTiles(index) {
      const emptyTileIndex = shuffledPictograms.indexOf("");
      if (indexIsValid(index) && canSwapTiles(index, emptyTileIndex)) {
        // Swap the clicked tile with the empty tile
        [shuffledPictograms[index], shuffledPictograms[emptyTileIndex]] = [shuffledPictograms[emptyTileIndex], shuffledPictograms[index]];

// Update the game board
        updateGameBoard();

// Check if the puzzle is solved
        if (puzzleSolved()) {
          alert("Congratulations! You solved the puzzle!");
        }
      }
    }

// Function to check if a tile index is valid
    function indexIsValid(index) {
      return index >= 0 && index < shuffledPictograms.length;
    }

// Function to check if the clicked tile can be swapped with the empty tile
    function canSwapTiles(index, emptyTileIndex) {
      const rowDiff = Math.floor(emptyTileIndex / 3) - Math.floor(index / 3);
      const colDiff = (emptyTileIndex % 3) - (index % 3);
      return (Math.abs(rowDiff) === 1 && colDiff === 0) || (Math.abs(colDiff) === 1 && rowDiff === 0);
    }

// Function to check if the puzzle is solved
    function puzzleSolved() {
      return shuffledPictograms.every((pictogram, index) => {
        return (index === shuffledPictograms.length - 1 && pictogram === "") || (pictogram === pictograms[index]);
      });
    }

// Function to update the game board
    function updateGameBoard() {
      const tiles = document.getElementsByClassName("tile");
      for (let i = 0; i < shuffledPictograms.length; i++) {
        tiles[i].textContent = shuffledPictograms[i];
      }
    }

// Function to shuffle an array
    function shuffle(array) {
      const shuffledArray = [...array];
      for (let i = shuffledArray.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1));
        [shuffledArray[i], shuffledArray[j]] = [shuffledArray[j], shuffledArray[i]];
      }
      return shuffledArray;
    }
  </script>
</body>
</html>
```

Please note that this is a basic implementation and can be improved in various ways depending on specific game requirements.