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

No:35235

Findthe 9 Zebrad for 90 Points
Developer User16469｜Date and time 24/1/13 17:42:15
Build time 13.663 sec｜Game capacity 3.538KB｜

Script

Sure, here's an example implementation of a game using JavaScript in a single HTML file. In this game, you need to find 9 hidden zebras within a grid of pictograms. Each zebra found earns you 10 points, and you have a total of 90 points to reach.

Find the 9 Zebras!

Score: 0

To play the game, open the HTML file in a web browser (preferably on a smartphone for a better experience). The grid will contain various pictograms, and you need to click on the pictograms that represent zebras ('🦓'). Each correct click will earn you 10 points, and the score will be displayed on the top. Once you find all 9 zebras, an alert will congratulate you on completing the game.

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋ゲームアプリランキング

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

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Find the Zebras</title>
    <style>
        .grid {
            display: grid;
            grid-template-columns: repeat(4, auto);
            gap: 10px;
        }
        
        .cell {
            width: 80px;
            height: 80px;
            background-color: lightgray;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 24px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <h1>Find the 9 Zebras!</h1>
    <div class="score">Score: 0</div>
    <div class="grid"></div>
    
    <script>
        // Create an array of pictograms including 9 zebras
        const pictograms = [
            '🦓', '🦒', '🐅', '🦁', '🐘', '🦏', '🐆', '🦌', '🦓', '🐪', '🐆', '🦍',
            '🐘', '🦏', '🐅', '🐪', '🦁', '🦒', '🦌', '🦍', '🦓', '🐆', '🐪', '🐘',
            '🐆', '🦌', '🐅', '🦒', '🦁', '🐘', '🦏', '🦓', '🦍', '🐪', '🦏', '🐅',
            '🦓', '🐘', '🦍', '🐪', '🐆', '🦌', '🦁', '🦒', '🐅', '🦏', '🦍', '🦓'
        ];
        
        // Counter variables
        let score = 0;
        let zebrasFound = 0;
        
        // Shuffle the pictograms array
        for (let i = pictograms.length - 1; i > 0; i--) {
            const j = Math.floor(Math.random() * (i + 1));
            [pictograms[i], pictograms[j]] = [pictograms[j], pictograms[i]];
        }
        
        // Render the grid
        const gridContainer = document.querySelector('.grid');
        pictograms.forEach((pictogram, index) => {
            const cell = document.createElement('div');
            cell.classList.add('cell');
            cell.innerHTML = pictogram;
            cell.addEventListener('click', () => handleCellClick(index));
            gridContainer.appendChild(cell);
        });
        
        // Handle cell click event
        function handleCellClick(index) {
            const cell = gridContainer.children[index];
            
            // Check if the clicked cell contains a zebra
            if (cell.innerHTML === '🦓') {
                cell.style.backgroundColor = 'green';
                cell.removeEventListener('click', handleCellClick);
                score += 10;
                zebrasFound++;
            } else {
                cell.style.backgroundColor = 'red';
            }
            
            // Update the score
            const scoreDisplay = document.querySelector('.score');
            scoreDisplay.textContent = `Score: ${score}`;
            
            // Check if all the zebras have been found
            if (zebrasFound === 9) {
                alert('Congratulations! You found all the zebras!');
            }
        }
    </script>
</body>
</html>
```