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

No:11045

110

←

Prev Next

→

Boj (the rabbit on CBeebies)
Developer User4714｜Date and time 23/8/7 0:11:52
Build time 27.779 sec｜Game capacity 2.653KB｜

Script

Sure! Here's a simple game implemented as a single HTML file using JavaScript. It features Boj, the rabbit from CBeebies, and can be played on a smartphone. The game involves clicking on pictograms to score points. Enjoy!

Boj Pictogram Game

Click on the pictograms to score points!

Score: 0

To use this game, save the code above into a file with a `.html` extension (e.g., `boj_game.html`). You would also need to have the pictogram image files (`emozi_all/game.png`, `emozi_all/panda.png`, `emozi_all/rocket.png`, `emozi_himawari.png`) in the same directory as the HTML file. When you open the HTML file in a web browser on your smartphone, you'll see the game interface with pictograms. Each click on a pictogram will increase the score on the screen. Feel free to modify and expand on the game logic as per your requirements. Have fun playing!

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Boj Pictogram Game</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            text-align: center;
        }
        .pictogram {
            width: 100px;
            height: 100px;
            display: inline-block;
            margin: 10px;
            cursor: pointer;
            background-color: #E8E8E8;
            border-radius: 50%;
            transition: background-color 0.3s;
        }
        .pictogram:hover {
            background-color: #D4D4D4;
        }
        .score {
            font-size: 24px;
            margin-top: 50px;
        }
    </style>
</head>
<body>
    <h1>Boj Pictogram Game</h1>
    <p>Click on the pictograms to score points!</p>
    <div id="gameContainer">
        <div class="pictogram" onclick="handlePictogramClick(1)"><img src="boj.png" alt="Boj"></div>
        <div class="pictogram" onclick="handlePictogramClick(2)"><img src="panda.png" alt="Panda"></div>
        <div class="pictogram" onclick="handlePictogramClick(3)"><img src="rocket.png" alt="Rocket"></div>
        <div class="pictogram" onclick="handlePictogramClick(4)"><img src="teddy.png" alt="Teddy"></div>
    </div>
    <div class="score">Score: <span id="scoreValue">0</span></div>

function handlePictogramClick(pictogramId) {
            score += pictogramId;
            scoreValueElement.textContent = score;

// Add more game logic if needed

// Example: Increase pictogram size on click
            var pictogramElement = document.querySelector('.pictogram:nth-child(' + pictogramId + ')');
            pictogramElement.style.width = '150px';
            pictogramElement.style.height = '150px';
        }
    </script>
</body>
</html>
```

To use this game, save the code above into a file with a `.html` extension (e.g., `boj_game.html`). You would also need to have the pictogram image files (`boj.png`, `panda.png`, `rocket.png`, `teddy.png`) in the same directory as the HTML file.

When you open the HTML file in a web browser on your smartphone, you'll see the game interface with pictograms. Each click on a pictogram will increase the score on the screen. Feel free to modify and expand on the game logic as per your requirements. Have fun playing!