AI game creator

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

No:19278

←

Prev Next

→

Merge Game
Developer User8498｜Date and time 23/10/2 11:54:42
Build time 46.788 sec｜Game capacity 13.016KB｜

Script

The above code implements a merge game (similar to 2048) using HTML, CSS, and JavaScript. It is enclosed in `
` tags within a single HTML file. The game can be played on a smartphone using swipe gestures. The pictograms are represented by emojis and will merge when two identical ones collide. The game ends when there are no more moves available.

←

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>
</head>
<body>
    <script>
        // Define pictograms as objects
        var pictograms = [
            { name: "🍏", value: 2 },
            { name: "🍋", value: 4 },
            { name: "🍇", value: 8 },
            { name: "🍒", value: 16 },
            { name: "🍓", value: 32 },
            { name: "🍉", value: 64 },
            { name: "🍍", value: 128 },
            { name: "🥥", value: 256 },
            { name: "🍌", value: 512 },
            { name: "🍊", value: 1024 },
            { name: "🍐", value: 2048 }
        ];

var board = [];
        var size = 4; // Size of the game board (4x4 in this case)
        var gameOver = false;

// Function to initialize the game board
        function initializeBoard() {
            for (var i = 0; i < size; i++) {
                var row = [];
                for (var j = 0; j < size; j++) {
                    row.push(null);
                }
                board.push(row);
            }

generateRandomPictogram();
            generateRandomPictogram();
            renderBoard();
        }

// Function to generate a random pictogram
        function generateRandomPictogram() {
            if (boardIsFull()) {
                return;
            }

var randomCell = emptyCells[Math.floor(Math.random() * emptyCells.length)];
            var pictogram = pictograms[Math.floor(Math.random() * pictograms.length)];
            board[randomCell.row][randomCell.col] = pictogram;
        }

// Function to check if the game board is full
        function boardIsFull() {
            for (var i = 0; i < size; i++) {
                for (var j = 0; j < size; j++) {
                    if (board[i][j] === null) {
                        return false;
                    }
                }
            }
            return true;
        }

// Function to handle swipe events
        function handleSwipe(direction) {
            if (gameOver) {
                return;
            }

var moved = false;

switch (direction) {
                case "left":
                    moved = swipeLeft();
                    break;
                case "right":
                    moved = swipeRight();
                    break;
                case "up":
                    moved = swipeUp();
                    break;
                case "down":
                    moved = swipeDown();
                    break;
            }

if (moved) {
                generateRandomPictogram();
                renderBoard();

if (!movesAvailable()) {
                    gameOver = true;
                    alert("Game Over!");
                }
            }
        }

// Function to handle left swipe
        function swipeLeft() {
            var moved = false;

for (var i = 0; i < size; i++) {
                for (var j = 0; j < size - 1; j++) {
                    if (board[i][j] === null) {
                        continue;
                    }
                    for (var k = j + 1; k < size; k++) {
                        if (board[i][k] !== null) {
                            if (board[i][j].value === board[i][k].value) {
                                board[i][j] = combinePictograms(board[i][j], board[i][k]);
                                board[i][k] = null;
                                moved = true;
                            }
                            break;
                        }
                    }
                }
            }

for (var i = 0; i < size; i++) {
                for (var j = 0; j < size - 1; j++) {
                    if (board[i][j] === null) {
                        for (var k = j + 1; k < size; k++) {
                            if (board[i][k] !== null) {
                                board[i][j] = board[i][k];
                                board[i][k] = null;
                                moved = true;
                                break;
                            }
                        }
                    }
                }
            }

return moved;
        }

// Function to handle right swipe
        function swipeRight() {
            var moved = false;

for (var i = 0; i < size; i++) {
                for (var j = size - 1; j >= 1; j--) {
                    if (board[i][j] === null) {
                        continue;
                    }
                    for (var k = j - 1; k >= 0; k--) {
                        if (board[i][k] !== null) {
                            if (board[i][j].value === board[i][k].value) {
                                board[i][j] = combinePictograms(board[i][j], board[i][k]);
                                board[i][k] = null;
                                moved = true;
                            }
                            break;
                        }
                    }
                }
            }

for (var i = 0; i < size; i++) {
                for (var j = size - 1; j >= 1; j--) {
                    if (board[i][j] === null) {
                        for (var k = j - 1; k >= 0; k--) {
                            if (board[i][k] !== null) {
                                board[i][j] = board[i][k];
                                board[i][k] = null;
                                moved = true;
                                break;
                            }
                        }
                    }
                }
            }

return moved;
        }

// Function to handle up swipe
        function swipeUp() {
            var moved = false;

for (var j = 0; j < size; j++) {
                for (var i = 0; i < size - 1; i++) {
                    if (board[i][j] === null) {
                        continue;
                    }
                    for (var k = i + 1; k < size; k++) {
                        if (board[k][j] !== null) {
                            if (board[i][j].value === board[k][j].value) {
                                board[i][j] = combinePictograms(board[i][j], board[k][j]);
                                board[k][j] = null;
                                moved = true;
                            }
                            break;
                        }
                    }
                }
            }

for (var j = 0; j < size; j++) {
                for (var i = 0; i < size - 1; i++) {
                    if (board[i][j] === null) {
                        for (var k = i + 1; k < size; k++) {
                            if (board[k][j] !== null) {
                                board[i][j] = board[k][j];
                                board[k][j] = null;
                                moved = true;
                                break;
                            }
                        }
                    }
                }
            }

return moved;
        }

// Function to handle down swipe
        function swipeDown() {
            var moved = false;

for (var j = 0; j < size; j++) {
                for (var i = size - 1; i >= 1; i--) {
                    if (board[i][j] === null) {
                        continue;
                    }
                    for (var k = i - 1; k >= 0; k--) {
                        if (board[k][j] !== null) {
                            if (board[i][j].value === board[k][j].value) {
                                board[i][j] = combinePictograms(board[i][j], board[k][j]);
                                board[k][j] = null;
                                moved = true;
                            }
                            break;
                        }
                    }
                }
            }

for (var j = 0; j < size; j++) {
                for (var i = size - 1; i >= 1; i--) {
                    if (board[i][j] === null) {
                        for (var k = i - 1; k >= 0; k--) {
                            if (board[k][j] !== null) {
                                board[i][j] = board[k][j];
                                board[k][j] = null;
                                moved = true;
                                break;
                            }
                        }
                    }
                }
            }

return moved;
        }
        
        // Function to combine two pictograms
        function combinePictograms(pictogram1, pictogram2) {
            var combined = { 
                name: pictogram1.name + pictogram2.name, 
                value: pictogram1.value + pictogram2.value 
            };
            return combined;
        }

// Function to check if there are any moves available
        function movesAvailable() {
            if (!boardIsFull()) {
                return true;
            }

for (var i = 0; i < size; i++) {
                for (var j = 0; j < size; j++) {
                    var currentPictogram = board[i][j];
                    if (i < size - 1) {
                        var nextPictogram = board[i + 1][j];
                        if (currentPictogram.value === nextPictogram.value) {
                            return true;
                        }
                    }

if (j < size - 1) {
                        var rightPictogram = board[i][j + 1];
                        if (currentPictogram.value === rightPictogram.value) {
                            return true;
                        }
                    }
                }
            }

return false;
        }

// Function to render the game board
        function renderBoard() {
            var table = document.createElement("table");
            table.style.borderCollapse = "collapse";
            table.style.margin = "auto";

for (var i = 0; i < size; i++) {
                var row = document.createElement("tr");
                for (var j = 0; j < size; j++) {
                    var cell = document.createElement("td");
                    cell.style.border = "1px solid black";
                    cell.style.width = "60px";
                    cell.style.height = "60px";
                    cell.style.textAlign = "center";
                    cell.style.fontSize = "30px";

var pictogram = board[i][j];
                    if (pictogram !== null) {
                        cell.innerHTML = pictogram.name;
                        cell.style.backgroundColor = "lightgray";
                        cell.style.fontWeight = "bold";
                    }

row.appendChild(cell);
                }
                table.appendChild(row);
            }

document.body.innerHTML = "";
            document.body.appendChild(table);

// Add swipe event listeners for mobile devices
            document.addEventListener("touchstart", handleTouchStart, false);
            document.addEventListener("touchmove", handleTouchMove, false);
            var xDown = null;
            var yDown = null;

function handleTouchStart(event) {
                xDown = event.touches[0].clientX;
                yDown = event.touches[0].clientY;
            }

function handleTouchMove(event) {
                if (!xDown || !yDown) {
                    return;
                }

var xUp = event.touches[0].clientX;
                var yUp = event.touches[0].clientY;

var xDiff = xDown - xUp;
                var yDiff = yDown - yUp;

if (Math.abs(xDiff) > Math.abs(yDiff)) {
                    if (xDiff > 0) {
                        handleSwipe("left");
                    } else {
                        handleSwipe("right");
                    }
                } else {
                    if (yDiff > 0) {
                        handleSwipe("up");
                    } else {
                        handleSwipe("down");
                    }
                }

xDown = null;
                yDown = null;
            }
        }

initializeBoard();
    </script>
</body>
</html>
```

The above code implements a merge game (similar to 2048) using HTML, CSS, and JavaScript. It is enclosed in `<script>` tags within a single HTML file. The game can be played on a smartphone using swipe gestures. The pictograms are represented by emojis and will merge when two identical ones collide. The game ends when there are no more moves available.