AI game creator

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

No:25680

←

Prev Next

→

Merge Game
Developer User12612｜Date and time 23/11/23 21:07:24
Build time 263.842 sec｜Game capacity 8.651KB｜

Script

Sure, here's a simple HTML game using JavaScript. It is playable on smartphones and utilizes pictograms:

Score: 0

This game is a simple implementation of the Merge Game, where you swipe the cells in four directions to merge adjacent cells of the same value. The goal is to merge cells and reach the highest value possible while preventing the grid from being completely filled. Whenever two cells with the same value merge, your score increases. You can play this game by opening the HTML file in a web browser on your smartphone. The game uses swipe gestures to move the cells. Simply swipe left, right, up, or down to move the cells accordingly. When you can no longer make a valid move, the game ends, and your final score is displayed.

←

Prev　Next

→ 　

Back　

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

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

Sure, here's a simple HTML game using JavaScript. It is playable on smartphones and utilizes pictograms:

```html
<!DOCTYPE html>
<html>
<head>
    <title>Merge Game</title>
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        body {
            font-family: Arial, sans-serif;
            background-color: #f7f7f7;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
        #game-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 20px;
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
        }
        #score {
            font-size: 24px;
            margin-bottom: 10px;
        }
        #grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            grid-gap: 10px;
        }
        .cell {
            display: flex;
            align-items: center;
            justify-content: center;
            width: calc(25% - 5px);
            height: 80px;
            font-size: 32px;
            background-color: #ddd;
            border-radius: 4px;
        }
        .cell span {
            font-size: 48px;
        }
    </style>
</head>
<body>
    <div id="game-container">
        <div id="score">Score: 0</div>
        <div id="grid"></div>
    </div>

// Create initial grid with random values
        function createGrid() {
            for (let i = 0; i < size; i++) {
                grid[i] = [];
                for (let j = 0; j < size; j++) {
                    grid[i][j] = 0;
                }
            }

addNumber();
            addNumber();
            updateGrid();
        }

// Update the grid UI
        function updateGrid() {
            const gridContainer = document.getElementById("grid");
            gridContainer.innerHTML = "";

for (let i = 0; i < size; i++) {
                for (let j = 0; j < size; j++) {
                    const cell = document.createElement("div");
                    cell.classList.add("cell");
                    
                    if (grid[i][j] !== 0) {
                        cell.textContent = grid[i][j];
                    }

gridContainer.appendChild(cell);
                }
            }
        }

// Add a new random number (2 or 4) to an empty cell
        function addNumber() {
            const availableCells = [];

for (let i = 0; i < size; i++) {
                for (let j = 0; j < size; j++) {
                   if (grid[i][j] === 0) {
                       availableCells.push({ x: i, y: j });
                   }
                }
            }

if (availableCells.length > 0) {
                const randomCell = availableCells[Math.floor(Math.random() * availableCells.length)];
                const randomNumber = Math.random() < 0.9 ? 2 : 4;
                grid[randomCell.x][randomCell.y] = randomNumber;
            }
        }

// Handle swipe gestures
        const hammertime = new Hammer(document.body);
        hammertime.get('swipe').set({ direction: Hammer.DIRECTION_ALL });
        hammertime.on('swipe', function(event) {
            let moved = false;

switch (event.direction) {
                case Hammer.DIRECTION_LEFT:
                    moved = moveLeft();
                    break;
                case Hammer.DIRECTION_RIGHT:
                    moved = moveRight();
                    break;
                case Hammer.DIRECTION_UP:
                    moved = moveUp();
                    break;
                case Hammer.DIRECTION_DOWN:
                    moved = moveDown();
                    break;
            }

if (moved) {
                addNumber();
                updateGrid();
                checkGameOver();
            }
        });

// Move tiles to the left
        function moveLeft() {
            let moved = false;

for (let i = 0; i < size; i++) {
                for (let j = 1; j < size; j++) {
                    if (grid[i][j] !== 0) {
                        let k = j - 1;
                        while (k >= 0 && grid[i][k] === 0) {
                            grid[i][k] = grid[i][k + 1];
                            grid[i][k + 1] = 0;
                            k--;
                            moved = true;
                        }
                    }
                }
            }

return moved;
        }

// Move tiles to the right
        function moveRight() {
            let moved = false;

for (let i = 0; i < size; i++) {
                for (let j = size - 2; j >= 0; j--) {
                    if (grid[i][j] !== 0) {
                        let k = j + 1;
                        while (k < size && grid[i][k] === 0) {
                            grid[i][k] = grid[i][k - 1];
                            grid[i][k - 1] = 0;
                            k++;
                            moved = true;
                        }
                    }
                }
            }

return moved;
        }

// Move tiles up
        function moveUp() {
            let moved = false;

for (let j = 0; j < size; j++) {
                for (let i = 1; i < size; i++) {
                    if (grid[i][j] !== 0) {
                        let k = i - 1;
                        while (k >= 0 && grid[k][j] === 0) {
                            grid[k][j] = grid[k + 1][j];
                            grid[k + 1][j] = 0;
                            k--;
                            moved = true;
                        }
                    }
                }
            }

return moved;
        }

// Move tiles down
        function moveDown() {
            let moved = false;

for (let j = 0; j < size; j++) {
                for (let i = size - 2; i >= 0; i--) {
                    if (grid[i][j] !== 0) {
                        let k = i + 1;
                        while (k < size && grid[k][j] === 0) {
                            grid[k][j] = grid[k - 1][j];
                            grid[k - 1][j] = 0;
                            k++;
                            moved = true;
                        }
                    }
                }
            }

return moved;
        }

// Check if the game is over (no more empty cells or no possible moves)
        function checkGameOver() {
            let gameOver = true;

for (let i = 0; i < size; i++) {
                for (let j = 0; j < size; j++) {
                    if (grid[i][j] === 0) {
                        gameOver = false;
                        break;
                    }
                    if (i > 0 && grid[i][j] === grid[i - 1][j]) {
                        gameOver = false;
                        break;
                    }
                    if (i < size - 1 && grid[i][j] === grid[i + 1][j]) {
                        gameOver = false;
                        break;
                    }
                    if (j > 0 && grid[i][j] === grid[i][j - 1]) {
                        gameOver = false;
                        break;
                    }
                    if (j < size - 1 && grid[i][j] === grid[i][j + 1]) {
                        gameOver = false;
                        break;
                    }
                }
            }

if (gameOver) {
                alert("Game Over! Final Score: " + score);
                // You can add code here to reset the game if desired
            }
        }

// Start the game
        createGrid();
    </script>
</body>
</html>
```

You can play this game by opening the HTML file in a web browser on your smartphone. The game uses swipe gestures to move the cells. Simply swipe left, right, up, or down to move the cells accordingly. When you can no longer make a valid move, the game ends, and your final score is displayed.