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

No:13302

←

Prev Next

→

Merge Game
Developer User5865｜Date and time 23/8/28 1:23:15
Build time 32.996 sec｜Game capacity 6.445KB｜

Script

Sure! Here's a simple implementation of a merge game using JavaScript, HTML, and pictograms:

Merge Game

Score: 0

Game Over!

In this game, the objective is to merge cells with the same value to achieve higher valued cells. You can play the game using the arrow keys on your smartphone. The game will render a grid and random cells with the value '2' or '4' will appear in empty cells. To merge cells, swipe in the desired direction using arrow keys (up, down, left, or right). Whenever two cells with the same value merge, their value doubles. The game ends when there are no more empty cells or legal moves left. The score will be displayed on the screen, and 'Game Over!' will be shown when the game ends. Enjoy the game!

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

Sure! Here's a simple implementation of a merge game using JavaScript, HTML, and pictograms:

```html
<!DOCTYPE html>
<html>
<head>
    <title>Merge Game</title>
    <style>
        body {
            text-align: center;
            font-family: Arial, sans-serif;
        }

.cell {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 80px;
            height:80px;
            border: 1px solid #ccc;
            margin: 5px;
            font-size: 24px;
        }

#score {
            font-size: 20px;
            margin-top: 20px;
        }

#game-over {
            font-size: 48px;
            margin-top: 20px;
            color: #f00;
            display: none;
        }
    </style>
</head>
<body>
    <h1>Merge Game</h1>
    <div id="grid"></div>
    <div id="score">Score: 0</div>
    <div id="game-over">Game Over!</div>

// Initialize game grid
        let grid = [];
        for (let i = 0; i < GRID_SIZE; i++) {
            grid[i] = [];
            for (let j = 0; j < GRID_SIZE; j++) {
                grid[i][j] = 0;
            }
        }

// Initialize starting cells
        addNewCell();
        addNewCell();

// Render the grid
        function renderGrid() {
            const gridContainer = document.getElementById('grid');
            gridContainer.innerHTML = '';

for (let i = 0; i < GRID_SIZE; i++) {
                for (let j = 0; j < GRID_SIZE; j++) {
                    const cellValue = grid[i][j];
                    const cell = document.createElement('div');
                    cell.classList.add('cell');

if (cellValue > 0) {
                        cell.innerText = getCellSymbol(cellValue);
                    }

gridContainer.appendChild(cell);
                }
                gridContainer.appendChild(document.createElement('br'));
            }
        }

// Add a new random cell to the grid
        function addNewCell() {
            const availableCells = [];

for (let i = 0; i < GRID_SIZE; i++) {
                for (let j = 0; j < GRID_SIZE; j++) {
                    if (grid[i][j] === 0) {
                        availableCells.push({ row: i, col: j });
                    }
                }
            }

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

// Update the score
        function updateScore(score) {
            document.getElementById('score').innerText = `Score: ${score}`;
        }

// Check if game over
        function isGameOver() {
            for (let i = 0; i < GRID_SIZE; i++) {
                for (let j = 0; j < GRID_SIZE; j++) {
                    if (grid[i][j] === 0) {
                        return false;
                    }

if (i !== GRID_SIZE - 1 && grid[i][j] === grid[i + 1][j]) {
                        return false;
                    }

if (j !== GRID_SIZE - 1 && grid[i][j] === grid[i][j + 1]) {
                        return false;
                    }
                }
            }

return true;
        }

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

for (let i = 0; i < GRID_SIZE; i++) {
                for (let j = 1; j < GRID_SIZE; j++) {
                    if (grid[i][j] !== 0) {
                        for (let k = j - 1; k >= 0; k--) {
                            if (grid[i][k] === 0) {
                                grid[i][k] = grid[i][k + 1];
                                grid[i][k + 1] = 0;
                                moved = true;
                            } else if (grid[i][k] === grid[i][k + 1]) {
                                grid[i][k] *= 2;
                                grid[i][k + 1] = 0;
                                moved = true;
                                break;
                            } else {
                                break;
                            }
                        }
                    }
                }
            }

return moved;
        }

// Handle arrow key events
        function handleArrowKeyDown(event) {
            let moved = false;

if (event.keyCode === 37) { // Left arrow key
                moved = moveLeft();
            } else if (event.keyCode === 38) { // Up arrow key
                // Implement moving up logic here
            } else if (event.keyCode === 39) { // Right arrow key
                // Implement moving right logic here
            } else if (event.keyCode === 40) { // Down arrow key
                // Implement moving down logic here
            }

if (moved) {
                addNewCell();
                renderGrid();

if (isGameOver()) {
                    document.getElementById('game-over').style.display = 'block';
                }
            }
        }

// Get the symbol/pictogram for a cell value
        function getCellSymbol(value) {
            return value === 2 ? '🐣' :
                   value === 4 ? '🐥' :
                   value === 8 ? '🐤' :
                   // Add more cases for pictograms if desired
                   '';
        }

// Bind arrow key event listener
        window.addEventListener('keydown', handleArrowKeyDown);

// Render the initial grid
        renderGrid();

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