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

No:36951

←

Prev Next

→

puzzle game
Developer User16927｜Date and time 24/1/19 13:49:19
Build time 11.1 sec｜Game capacity 3.124KB｜

Script

Sure, here's an example of a simple puzzle game implemented as a single HTML file using JavaScript:

Puzzle Game

In this game, the puzzle pieces are represented by numbers from 1 to 9. The user can click on a puzzle piece to move it to the empty spot. The goal is to arrange the puzzle pieces in ascending order. Once the puzzle is completed, an alert will be displayed congratulating the player. Note: This is a simplified example and can be further customized or enhanced based on your requirements.

←

Prev　Next

→ 　

Back　

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

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

Sure, here's an example of a simple puzzle game implemented as a single HTML file using JavaScript:

```html
<!DOCTYPE html>
<html>
  <head>
    <title>Puzzle Game</title>
    <style>
      #puzzle-board {
        display: flex;
        flex-wrap: wrap;
        width: 320px;
        height: 320px;
      }
      .puzzle-piece {
        width: 80px;
        height: 80px;
        background-color: #f7f7f7;
        border: 1px solid #ccc;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
      }
    </style>
  </head>
  <body>
    <h1>Puzzle Game</h1>
    <div id="puzzle-board"></div>

// Function to shuffle the puzzle pieces randomly
      function shuffle(array) {
        let currentIndex = array.length;
        let temporaryValue, randomIndex;

while (currentIndex !== 0) {
          randomIndex = Math.floor(Math.random() * currentIndex);
          currentIndex--;
          temporaryValue = array[currentIndex];
          array[currentIndex] = array[randomIndex];
          array[randomIndex] = temporaryValue;
        }

return array;
      }

// Function to create the puzzle board
      function createPuzzleBoard() {
        const puzzleBoard = document.getElementById('puzzle-board');
        const shuffledPuzzlePieces = shuffle(puzzlePieces);

shuffledPuzzlePieces.forEach((piece) => {
          const puzzlePiece = document.createElement('div');
          puzzlePiece.textContent = piece;
          puzzlePiece.classList.add('puzzle-piece');
          puzzlePiece.addEventListener('click', movePiece);
          puzzleBoard.appendChild(puzzlePiece);
        });
      }

// Function to handle the puzzle piece movement
      function movePiece() {
        const emptyPiece = document.querySelector('.empty');
        emptyPiece.innerHTML = this.innerHTML;
        emptyPiece.classList.remove('empty');
        this.innerHTML = '';
        this.classList.add('empty');
        checkIfComplete();
      }

// Function to check if the puzzle is completed
      function checkIfComplete() {
        const puzzlePieces = document.querySelectorAll('.puzzle-piece');
        const sortedPieces = Array.from(puzzlePieces).map((piece) =>
          parseInt(piece.innerHTML)
        );

if (
          sortedPieces.every(
            (piece, index) => index === 0 || piece > sortedPieces[index - 1]
          )
        ) {
          alert('Congratulations! You have completed the puzzle.');
        }
      }

// Start the game
      createPuzzleBoard();
    </script>
  </body>
</html>
```

Note: This is a simplified example and can be further customized or enhanced based on your requirements.