AI game creator

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

No:8657

1281

←

Prev Next

→

Puzzle game
Developer User4225｜Date and time 23/7/17 20:13:23
Build time 35.799 sec｜Game capacity 4.191KB｜

Script

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

This implementation represents a simple 8-puzzle game, where the objective is to arrange the numbers 1 to 8 in ascending order. The script generates a random shuffle of the puzzle at the beginning, and the player can click on the cells to move them into the empty position. When the puzzle is solved, an alert message is displayed. Note: This implementation is based on the assumption that the game is played on a desktop or laptop computer rather than a smartphone. However, it should still work on smartphones with touch functionality.

←

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>
    #game-container {
      display: flex;
      flex-wrap: wrap;
      max-width: 300px;
      margin: 0 auto;
    }
    
    .cell {
      width: 100px;
      height: 100px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 30px;
      border: 2px solid #000;
      cursor: pointer;
    }
    
    .empty-cell {
      background-color: #ccc;
    }
  </style>
</head>
<body>
  <div id="game-container"></div>

// Get a random value for shuffling the puzzle
    function getRandomInt(max) {
      return Math.floor(Math.random() * Math.floor(max));
    }

// Shuffle the puzzle by randomly swapping cells
    function shufflePuzzle() {
      const newState = [...initialState];

for (let i = 0; i < 1000; i++) {
        const row1 = getRandomInt(3);
        const col1 = getRandomInt(3);
        const row2 = getRandomInt(3);
        const col2 = getRandomInt(3);

const temp = newState[row1][col1];
        newState[row1][col1] = newState[row2][col2];
        newState[row2][col2] = temp;
      }

return newState;
    }

// Render the current game state
    function render() {
      const container = document.getElementById('game-container');
      container.innerHTML = '';

for (let row = 0; row < currentState.length; row++) {
        for (let col = 0; col < currentState[row].length; col++) {
          const value = currentState[row][col];

const cell = document.createElement('div');
          cell.className = 'cell';
          cell.textContent = value || '';
          cell.addEventListener('click', () => move(row, col));

if (value === null) {
            cell.classList.add('empty-cell');
          }

container.append(cell);
        }
      }
    }

// Check if the puzzle is solved
    function isSolved() {
      for (let row = 0; row < currentState.length; row++) {
        for (let col = 0; col < currentState[row].length; col++) {
          const expectedValue = row * 3 + col + 1;

if (currentState[row][col] !== expectedValue && (row !== 2 || col !== 2)) {
            return false;
          }
        }
      }

return true;
    }

// Move a cell to an empty position if valid
    function move(row, col) {
      if (isSolved()) {
        alert('Congratulations! Puzzle solved!');
        return;
      }

if ((row > 0 && currentState[row - 1][col] === null)
          || (row < 2 && currentState[row + 1][col] === null)
          || (col > 0 && currentState[row][col - 1] === null)
          || (col < 2 && currentState[row][col + 1] === null)) {

const newState = [...currentState];

newState[row][col] = null;

// Find the empty cell position
        let emptyRow, emptyCol;

for (let r = 0; r < newState.length; r++) {
          for (let c = 0; c < newState[r].length; c++) {
            if (newState[r][c] === null) {
              emptyRow = r;
              emptyCol = c;
              break;
            }
          }
        }

// Swap the values
        newState[emptyRow][emptyCol] = currentState[row][col];
        newState[row][col] = null;

currentState = newState;
        render();
      }
    }

// Start the game
    let currentState = shufflePuzzle();
    render();
  </script>
</body>
</html>
```

Note: This implementation is based on the assumption that the game is played on a desktop or laptop computer rather than a smartphone. However, it should still work on smartphones with touch functionality.