AI game creator

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

No:18722

←

Prev Next

→

Matching box
Developer User8249｜Date and time 23/9/30 14:33:58
Build time 12.511 sec｜Game capacity 4.112KB｜

Script

Sure! Here's an example of a simple matching box game implemented as a single HTML file, using JavaScript and pictograms:

In this game, you have a grid of boxes, and upon clicking a box, a pictogram is revealed. The objective is to match two boxes with the same pictogram by revealing them sequentially. If the two revealed boxes match, they will remain visible (marked as matched). If they don't match, they will be hidden again after a brief delay. You can copy the above code into a single HTML file (e.g., `matching_box_game.html`), and open it in a web browser on your smartphone to play the game.

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋Kindle本ランキング

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

Sure! Here's an example of a simple matching box game implemented as a single HTML file, using JavaScript and pictograms:

```html
<!DOCTYPE html>
<html>
<head>
    <title>Matching Box Game</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }
        
        .pictogram {
            display: inline-block;
            width: 100px;
            height: 100px;
            border: 1px solid black;
            text-align: center;
            line-height: 100px;
        }
        
        .game-container {
            display: flex;
            justify-content: space-between;
            margin-top: 50px;
        }
        
        .box {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100px;
            height: 100px;
            border: 1px solid black;
            background-color: lightgray;
            cursor: pointer;
            transition: background-color 0.5s;
        }
        
        .matched {
            background-color: lightgreen !important;
            cursor: default;
        }
    </style>
</head>
<body>
    <div class="game-container">
        <div class="box" onclick="revealBox(0)"></div>
        <div class="box" onclick="revealBox(1)"></div>
        <div class="box" onclick="revealBox(2)"></div>
    </div>
    <div class="game-container">
        <div class="box" onclick="revealBox(3)"></div>
        <div class="box" onclick="revealBox(4)"></div>
        <div class="box" onclick="revealBox(5)"></div>
    </div>
    <div class="game-container">
        <div class="box" onclick="revealBox(6)"></div>
        <div class="box" onclick="revealBox(7)"></div>
        <div class="box" onclick="revealBox(8)"></div>
    </div>

let revealedBoxes = [false, false, false, false, false, false, false, false, false];
        let selectedBoxes = [];

function checkMatch() {
            const firstBox = selectedBoxes[0];
            const secondBox = selectedBoxes[1];
            
            return (pictograms[firstBox] === pictograms[secondBox]);
        }

function markAsMatched() {
            for (let i = 0; i < selectedBoxes.length; i++) {
                revealedBoxes[selectedBoxes[i]] = true;
                const box = document.getElementsByClassName('box')[selectedBoxes[i]];
                box.classList.add('matched');
            }
        }

function hideBoxes() {
            for (let i = 0; i < selectedBoxes.length; i++) {
                revealedBoxes[selectedBoxes[i]] = false;
                const box = document.getElementsByClassName('box')[selectedBoxes[i]];
                box.innerHTML = '';
            }
        }
    </script>
</body>
</html>
```

You can copy the above code into a single HTML file (e.g., `matching_box_game.html`), and open it in a web browser on your smartphone to play the game.