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

No:46926

72

Merge Game
Developer User20307｜Date and time 24/2/26 17:18:01
Build time 13.064 sec｜Game capacity 2.745KB｜

Merge Game

Click on the squares to merge them and increase their value!

→ 　

0　

0　

　
　
　
　

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

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

(C)2023 HisashiApp

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Merge Game</title>
<style>
    body {
        font-family: Arial, sans-serif;
        text-align: center;
    }
</style>
</head>
<body>
<h1>Merge Game</h1>
<p>Click on the squares to merge them and increase their value!</p>
<div id="gameBoard"></div>

<script>
    const colors = ['#FF5733', '#33FF57', '#3373FF', '#FF33C7', '#C733FF'];
    const boardSize = 4;
    const board = [];
    
    function initializeGame() {
        for (let i = 0; i < boardSize; i++) {
            board.push([]);
            for (let j=0; j < boardSize; j++) {
                board[i].push({ value: 0 });
            }
        }
        addNewSquare();
        addNewSquare();
        renderBoard();
    }
    
    function addNewSquare() {
        const emptySquares = [];
        for (let i = 0; i < boardSize; i++) {
            for (let j = 0; j < boardSize; j++) {
                if (board[i][j].value === 0) {
                    emptySquares.push({ row: i, col: j });
                }
            }
        }
        if (emptySquares.length > 0) {
            const randomIndex = Math.floor(Math.random() * emptySquares.length);
            const newValue = Math.random() < 0.9 ? 1 : 2;
            const randomSquare = emptySquares[randomIndex];
            board[randomSquare.row][randomSquare.col].value = newValue;
        }
    }
    
    function renderBoard() {
        const gameBoard = document.getElementById('gameBoard');
        gameBoard.innerHTML = '';
        for (let i = 0; i < boardSize; i++) {
            for (let j = 0; j < boardSize; j++) {
                const square = document.createElement('div');
                square.classList.add('square');
                if (board[i][j].value !== 0) {
                    square.innerText = board[i][j].value;
                    square.style.background = colors[Math.log2(board[i][j].value) - 1];
                }
                gameBoard.appendChild(square);
            }
            gameBoard.appendChild(document.createElement('br'));
        }
    }
    
    function moveGrid(dir) {
        // IMPLEMENT MOVE LOGIC HERE
    }
    
    document.addEventListener('keydown', (event) => {
        switch(event.key) {
            case 'ArrowLeft':
                moveGrid('left');
                break;
            case 'ArrowUp':
                 moveGrid('up');
                 break;
            case 'ArrowRight':
                 moveGrid('right');
                 break;
            case 'ArrowDown':
                 moveGrid('down');
                 break;
        }
    });
    
    initializeGame();
</script>
</body>
</html>