AI game creator

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

No:43221

←

Prev Next

→

Merge Game
Developer User19145｜Date and time 24/2/15 1:24:21
Build time 16.862 sec｜Game capacity 4.649KB｜

Script

Score: 0

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいゲームランキング

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

<!DOCTYPE html>
<html>
<head>
    <title>Merge Game</title>
    <style>
        * {
            box-sizing: border-box;
        }
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
        }
        .game-container {
            max-width: 350px;
            margin: 0 auto;
            padding: 20px;
            background-color: #fff;
            border-radius: 5px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }
        .score {
            font-size: 24px;
            font-weight: bold;
            margin-bottom: 20px;
        }
        .board {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-evenly;
        }
        .cell {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 80px;
            height: 80px;
            margin: 5px;
            border-radius: 5px;
            font-size: 26px;
            font-weight: bold;
            background-color: #d9d9d9;
            color: #333;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="game-container">
        <div class="score">Score: 0</div>
        <div class="board"></div>
    </div>

// Game board size
        const gridSize = 4;

// Initialize the game board
        let board = [];
        for (let i = 0; i < gridSize; i++) {
            board[i] = [];
            for (let j = 0; j < gridSize; j++) {
                board[i][j] = getRandomPictogram();
            }
        }

// Display the initial game board
        renderBoard(board);

// Function to render the game board
        function renderBoard(board) {
            const boardElement = document.querySelector('.board');
            boardElement.innerHTML = '';

for (let i = 0; i < board.length; i++) {
                for (let j = 0; j < board[i].length; j++) {
                    const cell = document.createElement('div');
                    cell.className = 'cell';
                    cell.textContent = board[i][j];
                    boardElement.appendChild(cell);
                }
            }
        }

// Function to get a random pictogram from the list
        function getRandomPictogram() {
            const randomIndex = Math.floor(Math.random() * pictograms.length);
            return pictograms[randomIndex];
        }

// Function to handle merging logic
        function mergeCells() {
            const mergedBoard = [];
            for (let i = 0; i < board.length; i++) {
                mergedBoard[i] = [];
                for (let j = 0; j < board[i].length; j++) {
                    if (i < board.length - 1 && board[i][j] === board[i + 1][j]) {
                        // Merge cells vertically
                        const mergedCell = board[i][j] + board[i + 1][j];
                        mergedBoard[i][j] = mergedCell;
                        mergedBoard[i + 1][j] = mergedCell;
                    } else if (j < board[i].length - 1 && board[i][j] === board[i][j + 1]) {
                        // Merge cells horizontally
                        const mergedCell = board[i][j] + board[i][j + 1];
                        mergedBoard[i][j] = mergedCell;
                        mergedBoard[i][j + 1] = mergedCell;
                    } else {
                        // Copy the cell as is
                        mergedBoard[i][j] = board[i][j];
                    }
                }
            }
            board = mergedBoard;
            renderBoard(board);
            updateScore();
        }

// Function to handle the game score
        function updateScore() {
            const scoreElement = document.querySelector('.score');
            let score = 0;
            for (let i = 0; i < board.length; i++) {
                for (let j = 0; j < board[i].length; j++) {
                    if (board[i][j].length > 1) {
                        score += board[i][j].length;
                    }
                }
            }
            scoreElement.textContent = 'Score: ' + score;
        }

// Event listener for merging cells on click
        const boardElement = document.querySelector('.board');
        boardElement.addEventListener('click', mergeCells);
    </script>
</body>
</html>