AI game creator

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

No:41836

←

Prev Next

→

Merge Game
Developer User18758｜Date and time 24/2/10 2:39:39
Build time 10.162 sec｜Game capacity 2.874KB｜

Script

Sure, here is an example of a simple merge game implemented as a single HTML file using JavaScript. It is designed to be played on a smartphone and uses pictograms for visual elements. I've enclosed the JavaScript code within script tags in the HTML file:

In this game, there is a grid displayed on the screen, represented by the `gameGrid` div. Each cell in the grid is a `div` element with the class `cell`, containing an `<img>` tag with a pictogram as its source. To play the game, the player needs to click on the grid. This triggers the `mergeCells` function, which selects two random cells from the grid and merges their values. The merged value is then displayed in both cells. The values are represented by the text content of the cells. Note: You would need to replace the image source (`src`) of the `<img>` tags with the actual paths to pictogram images.

←

Prev　Next

→ 　

Back　

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

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

```html
<!DOCTYPE html>
<html>
<head>
    <title>Merge Game</title>
    <style>
        #gameGrid {
            display: flex;
            flex-wrap: wrap;
            width: 200px;
            height: 200px;
            border: 2px solid black;
        }
        
        .cell {
            width: 50px;
            height: 50px;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: lightblue;
            font-size: 24px;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div id="gameGrid">
        <div class="cell"><img src="pictogram-1.png" alt=""></div>
        <div class="cell"><img src="pictogram-2.png" alt=""></div>
        <div class="cell"><img src="pictogram-1.png" alt=""></div>
        <div class="cell"><img src="pictogram-2.png" alt=""></div>
    </div>

// Event listeners
        grid.addEventListener('click', mergeCells);

// Functions
        function mergeCells() {
            const firstCell = getRandomCell();
            const secondCell = getRandomCell();

if (firstCell !== secondCell) {
                const mergedValue = getMergedValue(firstCell, secondCell);
                updateCell(firstCell, mergedValue);
                updateCell(secondCell, mergedValue);
            }
        }

function getRandomCell() {
            const randomIndex = Math.floor(Math.random() * cells.length);
            return cells[randomIndex];
        }

function getMergedValue(cell1, cell2) {
            const value1 = parseInt(cell1.textContent) || 0;
            const value2 = parseInt(cell2.textContent) || 0;
            return value1 + value2;
        }

function updateCell(cell, value) {
            cell.textContent = value;
        }
    </script>
</body>
</html>
```

To play the game, the player needs to click on the grid. This triggers the `mergeCells` function, which selects two random cells from the grid and merges their values. The merged value is then displayed in both cells. The values are represented by the text content of the cells.

Note: You would need to replace the image source (`src`) of the `<img>` tags with the actual paths to pictogram images.