AI game creator

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

No:24030

←

Prev Next

→

Merge Game
Developer User11264｜Date and time 23/11/5 10:27:47
Build time 75.855 sec｜Game capacity 5.038KB｜

Script

Sure! Here's a simple Merge Game implemented as a single HTML file using JavaScript and pictograms:

To use this game, you will need to have two pictogram icons named "emozi_all/game.png" and "emozi_chicken.png" in the same directory as the HTML file. This Merge Game allows you to merge cells by pressing the "Up" arrow key. The objective is to merge the cells to create higher-valued icons. Enjoy playing!

←

Prev　Next

→ 　

Back　

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

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

Sure! Here's a simple Merge Game implemented as a single HTML file using JavaScript and pictograms:

```html
<!DOCTYPE html>
<html>
<head>
    <title>Merge Game</title>
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            font-family: Arial, sans-serif;
        }
        
        #game-container {
            display: flex;
            flex-wrap: wrap;
            width: 320px;
            height: 320px;
            border: 1px solid #ccc;
            overflow: hidden;
        }
        
        .cell {
            display: flex;
            justify-content: center;
            align-items: center;
            width: calc(100% / 4);
            height: calc(100% / 4);
            font-size: 30px;
            color: #333;
            background-color: #eee;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <div id="game-container"></div>

// Create cells
            for (let i = 0; i < 16; i++) {
                const cell = document.createElement("div");
                cell.classList.add("cell");
                container.appendChild(cell);
            }

// Initialize starting cells
            generateRandomCell();
            generateRandomCell();
        }

// Function to generate random cell
        function generateRandomCell() {
            const cells = document.getElementsByClassName("cell");
            const randomIndex = Math.floor(Math.random() * cells.length);
            
            // Set the innerHTML and data-value attributes
            if (Math.random() > 0.8) {
                cells[randomIndex].innerHTML = "<img src='icon1.png' alt='icon1'>";
                cells[randomIndex].dataset.value = 1;
            } else {
                cells[randomIndex].innerHTML = "<img src='icon2.png' alt='icon2'>";
                cells[randomIndex].dataset.value = 2;
            }
        }

// Function to handle merge operation
        function merge() {
            const cells = Array.from(document.getElementsByClassName("cell"));
            let merged = false;

// Perform merge for each cell
            cells.forEach(cell => {
                const value = parseInt(cell.dataset.value);

if (value) {
                    const adjacentCell = findAdjacentCell(cell);

if (adjacentCell && parseInt(adjacentCell.dataset.value) === value) {
                        const newValue = value + 1;

// Update the merged cell
                        cell.innerHTML = `<img src='icon${newValue}.png' alt='icon${newValue}'>`;
                        cell.dataset.value = newValue;

// Remove the merged cell
                        adjacentCell.innerHTML = "";
                        adjacentCell.removeAttribute("data-value");

merged = true;
                    }
                }
            });

// Generate a new cell if merge occurred
            if (merged) {
                generateRandomCell();
            }
        }

// Function to find adjacent cell
        function findAdjacentCell(cell) {
            const cells = Array.from(document.getElementsByClassName("cell"));
            const cellIndex = cells.indexOf(cell);
            const adjacentIndices = [];

if (cellIndex % 4 !== 0) {
                adjacentIndices.push(cellIndex - 1); // Left
            }
            if ((cellIndex + 1) % 4 !== 0 && cellIndex < 15) {
                adjacentIndices.push(cellIndex + 1); // Right
            }
            if (cellIndex >= 4) {
                adjacentIndices.push(cellIndex - 4); // Up
            }
            if (cellIndex < 12) {
                adjacentIndices.push(cellIndex + 4); // Down
            }

for (const index of adjacentIndices) {
                if (!cells[index].dataset.value) {
                    return cells[index];
                }
            }

return null;
        }

// Function to handle key events
        function handleKeyUp(event) {
            if (event.key === "ArrowUp") {
                merge();
            }
        }

// Initialize the game
        initializeGame();

// Listen for key events
        window.addEventListener("keyup", handleKeyUp);
    </script>
</body>
</html>
```

To use this game, you will need to have two pictogram icons named "icon1.png" and "icon2.png" in the same directory as the HTML file.

This Merge Game allows you to merge cells by pressing the "Up" arrow key. The objective is to merge the cells to create higher-valued icons. Enjoy playing!