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

No:42993

112

←

Prev Next

→

The Lost Kingdoms of Mario
Developer User11298｜Date and time 24/2/13 16:58:30
Build time 13.578 sec｜Game capacity 4.304KB｜

Script

The Lost Kingdoms of Mario

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
    <title>The Lost Kingdoms of Mario</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f3f3f3;
            text-align: center;
            margin-top: 100px;
        }

h1 {
            color: #333333;
            font-size: 32px;
            margin-bottom: 30px;
        }

#game-container {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
        }

#game-board {
            width: 250px;
            height: 250px;
            display: flex;
            flex-wrap: wrap;
            background-color: #ffffff;
            border: 1px solid #333333;
            margin-bottom: 30px;
        }

.tile {
            width: 25%;
            height: 25%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 48px;
            background-color: #eeeeee;
            border: 1px solid #cccccc;
            cursor: pointer;
        }

.message {
            color: #333333;
            font-size: 18px;
        }
    </style>
</head>
<body>
    <h1>The Lost Kingdoms of Mario</h1>
    <div id="game-container">
        <div id="game-board"></div>
        <div class="message"></div>
        <button onclick="restartGame()">Restart</button>
    </div>

// Game board size
        const boardSize = 4;

// Initialize game board array
        let gameBoard = [];

// Initialize player score
        let score = 0;

// Create game board
        function createGameBoard() {
            const gameContainer = document.getElementById('game-board');
            gameContainer.innerHTML = '';

for (let i = 0; i < boardSize; i++) {
                for (let j = 0; j < boardSize; j++) {
                    const tile = document.createElement('div');
                    tile.classList.add('tile');
                    tile.setAttribute('onclick', `selectTile(${i},${j})`);
                    gameBoard[i * boardSize + j] = getRandomPictogram();
                    tile.innerText = gameBoard[i * boardSize + j];
                    gameContainer.appendChild(tile);
                }
            }
        }

// Get random pictogram
        function getRandomPictogram() {
            const randomIndex = Math.floor(Math.random() * pictograms.length);
            return pictograms[randomIndex];
        }

// Select tile
        function selectTile(row, col) {
            const currentIndex = row * boardSize + col;

if (gameBoard[currentIndex] !== '') {
                gameBoard[currentIndex] = '';
                score++;
            }

updateBoard();
            checkGameEnd();
        }

// Update game board
        function updateBoard() {
            const gameContainer = document.getElementById('game-board');

for (let i = 0; i < boardSize; i++) {
                for (let j = 0; j < boardSize; j++) {
                    const tile = gameContainer.children[i * boardSize + j];
                    tile.innerText = gameBoard[i * boardSize + j];
                }
            }

const message = document.querySelector('.message');
            message.innerText = `Score: ${score}`;
        }

// Check if all tiles have been selected
        function checkGameEnd() {
            let gameEnd = true;

for (let i = 0; i < boardSize * boardSize; i++) {
                if (gameBoard[i] !== '') {
                    gameEnd = false;
                    break;
                }
            }

if (gameEnd) {
                const message = document.querySelector('.message');
                message.innerText = `Congratulations! You completed the game with a score of ${score}`;
            }
        }

// Restart the game
        function restartGame() {
            createGameBoard();
            score = 0;
            updateBoard();
        }

// Start the game
        createGameBoard();
        updateBoard();
    </script>
</body>
</html>