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

No:26947

←

Prev Next

→

Sky zone simulator
Developer Rowdagriff｜Date and time 23/12/3 11:36:55
Build time 80.838 sec｜Game capacity 4.187KB｜

Script

Sky Zone Simulator

Click on the sky zones to change the pictograms and make all sky zones have the same pictogram.

←

Prev　Next

→ 　

Back　

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

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

<html>
<head>
    <style>
        body {
            background-color: #87CEEB;
            text-align: center;
            font-family: Arial, sans-serif;
        }
        
        img {
            width: 150px;
            height: 150px;
            padding: 10px;
            cursor: pointer;
        }
        
        h1 {
            color: #FFFFFF;
            font-size: 24px;
            margin-top: 50px;
        }
        
        p {
            color: #FFFFFF;
            font-size: 18px;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <script>
        // Initialize the game
        window.addEventListener('load', function() {
            document.getElementById('start_game').addEventListener('click', startGame);
        });
        
        /**
         * Function to start the game
         */
        function startGame() {
            // Remove the start button and title
            document.getElementById('start_game').remove();
            document.getElementById('game_title').remove();
            
            // Create sky zone pictograms
            var pictograms = [
                '🌞', '🌤️', '⛅', '☁️', '🌧️', '⛈️', '🌪️'
            ];
            
            // Create a grid of sky zones
            var grid = document.createElement('div');
            grid.style.display = 'grid';
            grid.style.gridTemplateColumns = 'repeat(3, 1fr)';
            grid.style.gridGap = '10px';
            grid.style.marginTop = '100px';
            
            // Add sky zone pictograms to the grid
            for (var i = 0; i < pictograms.length; i++) {
                var pictogram = document.createElement('img');
                pictogram.src = 'blank.png';
                pictogram.setAttribute('data-pictogram', pictograms[i]);
                pictogram.addEventListener('click', changePictogram);
                grid.appendChild(pictogram);
            }
            
            // Append the grid to the body
            document.body.appendChild(grid);
        }
        
        /**
         * Function to change a sky zone pictogram
         */
        function changePictogram(event) {
            var pictogram = event.target;
            var currentPictogram = pictogram.getAttribute('data-pictogram');
            
            // Randomly select a new pictogram (excluding the current one)
            var pictograms = [
                '🌞', '🌤️', '⛅', '☁️', '🌧️', '⛈️', '🌪️'
            ];
            
            var randomIndex = Math.floor(Math.random() * pictograms.length);
            var newPictogram = pictograms[randomIndex];
            
            while (newPictogram == currentPictogram) {
                randomIndex = Math.floor(Math.random() * pictograms.length);
                newPictogram = pictograms[randomIndex];
            }
            
            // Update the pictogram
            pictogram.setAttribute('data-pictogram', newPictogram);
            pictogram.src = 'sky_zone.png';
            
            // Check if all sky zones have the same pictogram
            var skyZones = document.querySelectorAll('img[data-pictogram]');
            var allSamePictogram = true;
            
            for (var i = 0; i < skyZones.length - 1; i++) {
                if (skyZones[i].getAttribute('data-pictogram') != skyZones[i + 1].getAttribute('data-pictogram')) {
                    allSamePictogram = false;
                    break;
                }
            }
            
            // If all sky zones have the same pictogram, display the success message
            if (allSamePictogram) {
                var successMessage = document.createElement('h1');
                successMessage.innerHTML = 'Congratulations! You won!';
                successMessage.style.marginTop = '50px';
                document.body.appendChild(successMessage);
            }
        }
    </script>
    
    <h1 id="game_title">Sky Zone Simulator</h1>
    <p>Click on the sky zones to change the pictograms and make all sky zones have the same pictogram.</p>
    <button id="start_game">Start Game</button>
</body>
</html>