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

No:42077

Doing puzzle and get 20 ending (hint)
Developer User18785｜Date and time 24/2/10 12:52:06
Build time 14.41 sec｜Game capacity 3.988KB｜

Script

Puzzle Game

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

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

<!DOCTYPE html>
<html>

<head>
    <title>Puzzle Game</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
        }

h1 {
            padding-top: 40px;
        }

#grid {
            width: 450px;
            margin: 0 auto;
        }

.cell {
            width: 150px;
            height: 150px;
            display: inline-block;
            border: 2px solid black;
            cursor: pointer;
        }

img {
            width: 100px;
            height: 100px;
            margin: 10px;
        }

#message {
            margin-top: 20px;
        }
    </style>
</head>

<body>
    <h1>Puzzle Game</h1>
    <div id="grid">
        <div class="cell" onclick="moveCell(0)"><img id="img0" src="pictogram1.png" alt="pictogram"></div>
        <div class="cell" onclick="moveCell(1)"><img id="img1" src="pictogram2.png" alt="pictogram"></div>
        <div class="cell" onclick="moveCell(2)"><img id="img2" src="pictogram3.png" alt="pictogram"></div>
        <div class="cell" onclick="moveCell(3)"><img id="img3" src="pictogram4.png" alt="pictogram"></div>
        <div class="cell" onclick="moveCell(4)"><img id="img4" src="pictogram5.png" alt="pictogram"></div>
        <div class="cell" onclick="moveCell(5)"><img id="img5" src="pictogram6.png" alt="pictogram"></div>
        <div class="cell" onclick="moveCell(6)"><img id="img6" src="pictogram7.png" alt="pictogram"></div>
        <div class="cell" onclick="moveCell(7)"><img id="img7" src="pictogram8.png" alt="pictogram"></div>
        <div class="cell" onclick="moveCell(8)"><img id="img8" src="pictogram9.png" alt="pictogram"></div>
    </div>

// Shuffle the puzzle grid
        shuffleGrid();

// Initialize the puzzle grid
        updateGrid();

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

function updateGrid() {
            for (var i = 0; i < puzzleGrid.length; i++) {
                var imgIndex = puzzleGrid[i];
                var cell = document.getElementById('img' + i);
                var imagePath = 'pictogram' + (imgIndex + 1) + '.png';
                cell.src = imagePath;
            }
        }

function moveCell(index) {
            if (isValidMove(index)) {
                var temp = puzzleGrid[index];
                puzzleGrid[index] = puzzleGrid[emptyCell];
                puzzleGrid[emptyCell] = temp;
                emptyCell = index;
                movesCount++;
                updateGrid();
                checkGameOver();
            }
        }

function isValidMove(index) {
            var emptyRow = Math.floor(emptyCell / 3);
            var emptyCol = emptyCell % 3;
            var row = Math.floor(index / 3);
            var col = index % 3;

if (row === emptyRow && Math.abs(col - emptyCol) === 1) {
                return true;
            } else if (col === emptyCol && Math.abs(row - emptyRow) === 1) {
                return true;
            }

return false;
        }

function checkGameOver() {
            if (isArraySorted()) {
                document.getElementById('message').innerHTML = 'Congratulations! Puzzle solved in ' +
                    movesCount + ' moves.';
            }
        }

</html>