AI game creator

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

No:10388

←

Prev Next

→

sort puzzle
Developer User4553｜Date and time 23/7/31 2:58:13
Build time 35.216 sec｜Game capacity 3.65KB｜

Script

←

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">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ソートパズル</title>
  <style>
    .grid-container {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 5px;
      padding: 5px;
      background-color: #f1f1f1;
    }

.grid-item {
      background-color: #ddd;
      border: 1px solid black;
      text-align: center;
      padding: 20px;
      font-size: 30px;
    }

.grid-item:hover {
      background-color: #ccc;
    }
  </style>
</head>
<body>
  <div class="grid-container">
    <div class="grid-item" onclick="moveTile(0)"></div>
    <div class="grid-item" onclick="moveTile(1)"></div>
    <div class="grid-item" onclick="moveTile(2)"></div>
    <div class="grid-item" onclick="moveTile(3)"></div>
    <div class="grid-item" onclick="moveTile(4)"></div>
    <div class="grid-item" onclick="moveTile(5)"></div>
    <div class="grid-item" onclick="moveTile(6)"></div>
    <div class="grid-item" onclick="moveTile(7)"></div>
    <div class="grid-item" onclick="moveTile(8)"></div>
    <div class="grid-item" onclick="moveTile(9)"></div>
    <div class="grid-item" onclick="moveTile(10)"></div>
    <div class="grid-item" onclick="moveTile(11)"></div>
    <div class="grid-item" onclick="moveTile(12)"></div>
    <div class="grid-item" onclick="moveTile(13)"></div>
    <div class="grid-item" onclick="moveTile(14)"></div>
    <div class="grid-item" onclick="moveTile(15)"></div>
  </div>

function initializePuzzle() {
      tiles = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, ""];

shuffleTiles();
      renderPuzzle();
    }

function shuffleTiles() {
      for (var i = tiles.length - 1; i > 0; i--) {
        var j = Math.floor(Math.random() * (i + 1));
        var temp = tiles[i];
        tiles[i] = tiles[j];
        tiles[j] = temp;

if (tiles[j] === "") {
          emptyIndex = j;
        } else if (tiles[i] === "") {
          emptyIndex = i;
        }
      }
    }

function renderPuzzle() {
      var gridItems = document.getElementsByClassName("grid-item");

for (var i = 0; i < gridItems.length; i++) {
        gridItems[i].innerHTML = tiles[i];
        if (tiles[i] === "") {
          gridItems[i].style.backgroundColor = "white";
        } else {
          gridItems[i].style.backgroundColor = "#ddd";
        }
      }
    }

function moveTile(index) {
      if (!canMove(index)) {
        return;
      }

swapTiles(index, emptyIndex);
      renderPuzzle();

if (isSolved()) {
        setTimeout(function() {
          alert("Congratulations! You solved the puzzle!");
          initializePuzzle();
        }, 500);
      }
    }

function canMove(index) {
      var row = Math.floor(index / 4);
      var col = index % 4;
      var emptyRow = Math.floor(emptyIndex / 4);
      var emptyCol = emptyIndex % 4;

return (
        (row === emptyRow && Math.abs(col - emptyCol) === 1) ||
        (col === emptyCol && Math.abs(row - emptyRow) === 1)
      );
    }

function swapTiles(index1, index2) {
      var temp = tiles[index1];
      tiles[index1] = tiles[index2];
      tiles[index2] = temp;

if (tiles[index1] === "") {
        emptyIndex = index1;
      } else if (tiles[index2] === "") {
        emptyIndex = index2;
      }
    }

function isSolved() {
      for (var i = 0; i < tiles.length - 1; i++) {
        if (tiles[i] !== i + 1) {
          return false;
        }
      }

return true;
    }

initializePuzzle();
  </script>
</body>
</html>