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

No:24688

←

Prev Next

→

Flood battle
Developer User11793｜Date and time 23/11/11 9:39:32
Build time 185.617 sec｜Game capacity 3.76KB｜

Script

Flood Battle

←

Prev　Next

→ 　

Back　

[PR]現在のゲームギフトランキング

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

<!DOCTYPE html>
<html>
<head>
    <title>Flood Battle</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
        }
        
        #game-board {
            display: flex;
            justify-content: center;
            margin-top: 50px;
        }
        
        .square {
            width: 50px;
            height: 50px;
            border: 1px solid #999;
            background-color: #eee;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
        }
        
        .pictogram {
            font-size: 30px;
        }

#score {
            font-size: 24px;
            margin-top: 30px;
        }
    </style>
</head>
<body>
    <h1>Flood Battle</h1>
    <div id="game-board"></div>
    <div id="score"></div>

// Game board and score
        let board = [];
        let score = 0;
        
        // Generate a random number between min and max (inclusive)
        function getRandomNumber(min, max) {
            return Math.floor(Math.random() * (max - min + 1) + min);
        }
        
        // Initialize the game
        function initGame() {
            board = [];
            score = 0;
            document.getElementById('game-board').innerHTML = '';
            document.getElementById('score').innerHTML = `Score: ${score}`;

// Create the game board
            for (let i = 0; i < 6; i++) {
                const row = [];
                for (let j = 0; j < 6; j++) {
                    const square = document.createElement('div');
                    square.classList.add('square');
                    square.innerHTML = getRandomPictogram();
                    square.addEventListener('click', handleClick);
                    document.getElementById('game-board').appendChild(square);
                    row.push(square);
                }
                board.push(row);
            }

// Start the game
            startGame();
        }

// Get a random pictogram
        function getRandomPictogram() {
            return pictograms[getRandomNumber(0, pictograms.length - 1)];
        }

// Flood fill the adjacent squares with same pictograms
        function floodFill(row, col, sourcePictogram, targetPictogram) {
            if (row < 0 || row >= 6 || col < 0 || col >= 6) {
                return;
            }

if (board[row][col].innerHTML !== sourcePictogram) {
                return;
            }

board[row][col].innerHTML = targetPictogram;

floodFill(row - 1, col, sourcePictogram, targetPictogram); // Up
            floodFill(row + 1, col, sourcePictogram, targetPictogram); // Down
            floodFill(row, col - 1, sourcePictogram, targetPictogram); // Left
            floodFill(row, col + 1, sourcePictogram, targetPictogram); // Right
        }

// Handle square click event
        function handleClick(event) {
            const clickedSquare = event.target;
            const clickedPictogram = clickedSquare.innerHTML;
            
            if (clickedPictogram !== '🌊') {
                floodFill(0, 0, clickedPictogram, '🌊');
                score++;
                document.getElementById('score').innerHTML = `Score: ${score}`;
            }
        }

// Start the game
        function startGame() {
            board[0][0].innerHTML = '🌊';
        }

// Initialize the game when the page loads
        window.onload = initGame;
    </script>
</body>
</html>