Inspector gizmo the missing tresure’s's game

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

No:41270

←

Prev Next

→

Inspector gizmo the missing tresure’s
Developer User18493｜Date and time 24/2/6 17:09:58
Build time 13.312 sec｜Game capacity 4.394KB｜

Script

Score: 0

Find the Missing Treasure!

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋グッズランキング

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

<!DOCTYPE html>
<html>
<head>
    <title>Inspector Gizmo - The Missing Treasure</title>
    <style>
        #game-board {
            width: 400px;
            height: 600px;
            background-color: #f3f3f3;
            margin: 0 auto;
            border: 2px solid black;
            display: flex;
            flex-wrap: wrap;
        }

.tile {
            width: 100px;
            height: 100px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 40px;
            cursor: pointer;
        }

.tile:hover {
            background-color: lightgray;
        }

#score {
            text-align: center;
            margin-top: 20px;
        }

#info {
            text-align: center;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div id="game-board"></div>
    <div id="score">Score: 0</div>
    <div id="info">Find the Missing Treasure!</div>

// Define the game board size (4x4)
        const rows = 4;
        const cols = 4;

// Generate a random integer within a range
        function getRandomInt(min, max) {
            return Math.floor(Math.random() * (max - min + 1)) + min;
        }

// Shuffle the icons randomly
        function shuffle(array) {
            let currentIndex = array.length, tempValue, randomIndex;

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

return array;
        }

// Create the game board
        const gameBoard = document.getElementById('game-board');

const tiles = [];

for (let i = 0; i < rows * cols; i++) {
            const tile = document.createElement('div');
            tile.className = 'tile';
            tile.innerHTML = icons[i % icons.length];
            tiles.push(tile);
            gameBoard.appendChild(tile);
        }

// Shuffle the icons randomly on the board
        shuffle(tiles);

// Initialize game variables
        let score = 0;
        let flippedTiles = [];
        let matchedTiles = [];

// Handle tile click event
        function tileClick(index) {
            if (flippedTiles.length >= 2 || matchedTiles.includes(index)) {
                return;
            }

tiles[index].style.backgroundColor = 'white';
            flippedTiles.push(index);

if (flippedTiles.length === 2) {
                const tile1 = tiles[flippedTiles[0]];
                const tile2 = tiles[flippedTiles[1]];

if (tile1.innerHTML === tile2.innerHTML) {
                    matchedTiles.push(flippedTiles[0], flippedTiles[1]);
                    score++;
                    document.getElementById('score').innerText = 'Score: ' + score;

if (matchedTiles.length === rows * cols) {
                        setTimeout(() => {
                            alert('Congratulations! You found the Missing Treasure!');
                            resetGame();
                        }, 500);
                    }
                } else {
                    setTimeout(() => {
                        tile1.style.backgroundColor = '';
                        tile2.style.backgroundColor = '';
                    }, 500);
                }

flippedTiles = [];
            }
        }

// Reset the game
        function resetGame() {
            tiles.forEach((tile, index) => {
                tile.style.backgroundColor = '';
                tile.innerHTML = icons[index % icons.length];
            });
            shuffle(tiles);
            score = 0;
            matchedTiles = [];
            document.getElementById('score').innerText = 'Score: ' + score;
        }

// Attach click event listener to each tile
        tiles.forEach((tile, index) => {
            tile.addEventListener('click', () => {
                tileClick(index);
            });
        });
    </script>
</body>
</html>