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

No:13475

142

Merge Game
Developer User5890｜Date and time 23/8/28 9:00:11
Build time 23.36 sec｜Game capacity 6.137KB｜

Merge Game

→ 　

0　

0　

　
　
　
　

[PR]現在の人気グッズランキング

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

(C)2023 HisashiApp

<!DOCTYPE html>
<html>

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

.container {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-wrap: wrap;
            max-width: 400px;
            margin: 0 auto;
            margin-top: 50px;
        }

.box {
            width: 80px;
            height: 80px;
            margin: 5px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            border: 1px solid #ccc;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <h1>Merge Game</h1>
    <div class="container">
        <div class="box tile" id="tile1"></div>
        <div class="box tile" id="tile2"></div>
        <div class="box tile" id="tile3"></div>
        <div class="box tile" id="tile4"></div>
        <div class="box tile" id="tile5"></div>
        <div class="box tile" id="tile6"></div>
        <div class="box tile" id="tile7"></div>
        <div class="box tile" id="tile8"></div>
        <div class="box tile" id="tile9"></div>
        <div class="box tile" id="tile10"></div>
        <div class="box tile" id="tile11"></div>
        <div class="box tile" id="tile12"></div>
        <div class="box tile" id="tile13"></div>
        <div class="box tile" id="tile14"></div>
        <div class="box tile" id="tile15"></div>
        <div class="box tile" id="tile16"></div>
    </div>

<script>
        // Initialize the game
        const tiles = document.getElementsByClassName('tile');
        let numbers = [2, 2, 4, 4];
        let score = 0;

const getRandomNumber = () => {
            return numbers[Math.floor(Math.random() * numbers.length)];
        }

const initializeBoard = () => {
            numbers = [2, 2, 4, 4];
            score = 0;
            for (let i = 0; i < tiles.length; i++) {
                tiles[i].innerHTML = '';
            }
            addRandomTile();
            addRandomTile();
        }

const addRandomTile = () => {
            const emptyTiles = Array.from(tiles).filter(tile => tile.innerHTML === '');
            const randomEmptyTile = emptyTiles[Math.floor(Math.random() * emptyTiles.length)];
            if (randomEmptyTile) {
                randomEmptyTile.innerHTML = getRandomNumber();
            }
        }

const combineTiles = (start, end, step) => {
            let combined = false;
            for (let i = start; i != end; i += step) {
                const currentTile = tiles[i];
                const nextTile = tiles[i + step];
                if (currentTile.innerHTML === nextTile.innerHTML && currentTile.innerHTML !== '') {
                    const newValue = parseInt(currentTile.innerHTML) * 2;
                    currentTile.innerHTML = newValue;
                    nextTile.innerHTML = '';
                    score += newValue;
                    combined = true;
                }
            }
            return combined;
        }

const moveTiles = (start, end, step) => {
            let moved = false;
            for (let i = start; i != end; i += step) {
                const currentTile = tiles[i];
                const nextTile = tiles[i + step];
                if (currentTile.innerHTML === '') {
                    currentTile.innerHTML = nextTile.innerHTML;
                    nextTile.innerHTML = '';
                    moved = true;
                }
            }
            return moved;
        }

const handleKeyDown = (event) => {
            let moved = false;
            let combined = false;
            switch (event.key) {
                case 'ArrowUp':
                    for (let i = 0; i < 4; i++) {
                        moved |= moveTiles(i, 12, 4);
                        combined |= combineTiles(i, 12, 4);
                        moved |= moveTiles(i, 12, 4);
                    }
                    break;
                case 'ArrowDown':
                    for (let i = 3; i < 16; i += 4) {
                        moved |= moveTiles(i, -1, -4);
                        combined |= combineTiles(i, -1, -4);
                        moved |= moveTiles(i, -1, -4);
                    }
                    break;
                case 'ArrowLeft':
                    for (let i = 0; i < 16; i += 4) {
                        moved |= moveTiles(i, i + 3, 1);
                        combined |= combineTiles(i, i + 3, 1);
                        moved |= moveTiles(i, i + 3, 1);
                    }
                    break;
                case 'ArrowRight':
                    for (let i = 3; i < 16; i += 4) {
                        moved |= moveTiles(i, i - 3, -1);
                        combined |= combineTiles(i, i - 3, -1);
                        moved |= moveTiles(i, i - 3, -1);
                    }
                    break;
                default:
                    return;
            }
            if (moved || combined) {
                addRandomTile();
                checkGameOver();
            }
        }

const checkGameOver = () => {
            let gameOver = true;
            for (let i = 0; i < tiles.length; i++) {
                if (tiles[i].innerHTML === '') {
                    gameOver = false;
                    break;
                }
                if (i % 4 !== 3 && tiles[i].innerHTML === tiles[i + 1].innerHTML) {
                    gameOver = false;
                    break;
                }
                if (i < 12 && tiles[i].innerHTML === tiles[i + 4].innerHTML) {
                    gameOver = false;
                    break;
                }
            }
            if (gameOver) {
                alert(`Game Over! Your score: ${score}`);
                initializeBoard();
            }
        }

// Initial setup
        initializeBoard();

// Event listeners
        document.addEventListener('keydown', handleKeyDown);
    </script>
</body>

</html>