AI game creator

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

No:8588

4752

←

Prev Next

→

Merge Game
Developer User4216｜Date and time 23/7/17 5:09:19
Build time 70.213 sec｜Game capacity 10.959KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

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

<!DOCTYPE html>
<html>
<head>
    <style>
        #grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            grid-gap: 10px;
            margin: 20px auto;
            width: 320px;
        }

.cell {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 70px;
            background-color: lightgray;
            border-radius: 5px;
            font-size: 30px;
        }
    </style>
</head>
<body>
    <div id="grid">
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
    </div>

var mergedCount = 0;

// Initialize the game state
        function initializeGame() {
            // Clear the previous state
            for (var i = 0; i < cells.length; i++) {
                cells[i].innerText = "";
                cells[i].style.backgroundColor = "lightgray";
            }
            
            // Generate two random cells
            var random1 = getRandomCell();
            var random2 = getRandomCell();

while (random2 === random1) {
                random2 = getRandomCell();
            }

cells[random1].innerText = "2";
            cells[random1].style.backgroundColor = "#eee4da";
            cells[random2].innerText = "2";
            cells[random2].style.backgroundColor = "#eee4da";

mergedCount = 0;
        }

// Generate a random cell position
        function getRandomCell() {
            return Math.floor(Math.random() * cells.length);
        }

// Handle arrow key events
        function handleArrowKey(event) {
            switch (event.keyCode) {
                case 37: // Left Arrow
                    shiftLeft();
                    break;
                case 38: // Up Arrow
                    shiftUp();
                    break;
                case 39: // Right Arrow
                    shiftRight();
                    break;
                case 40: // Down Arrow
                    shiftDown();
                    break;
            }
        }

// Merge the cells towards the left
        function shiftLeft() {
            var moved = false;

for (var i = 0; i < cells.length; i++) {
                if (cells[i].innerText === "") continue;

var currentCell = i;

while (currentCell % 4 !== 0) {
                    var targetCell = currentCell - 1;

if (cells[targetCell].innerText === "") {
                        cells[targetCell].innerText = cells[currentCell].innerText;
                        cells[currentCell].innerText = "";
                        currentCell = targetCell;
                        moved = true;
                    } else if (cells[targetCell].innerText === cells[currentCell].innerText && !cells[targetCell].classList.contains("merged")) {
                        var newValue = parseInt(cells[currentCell].innerText) * 2;
                        cells[targetCell].innerText = newValue;
                        cells[currentCell].innerText = "";
                        cells[targetCell].style.backgroundColor = getCellColor(newValue);
                        cells[targetCell].classList.add("merged");
                        mergedCount++;
                        moved = true;
                        break;
                    } else {
                        break;
                    }
                }
            }

if (moved) updateGameState();
        }

// Merge the cells upwards
        function shiftUp() {
            var moved = false;

for (var i = 0; i < cells.length; i++) {
                if (cells[i].innerText === "") continue;

var currentCell = i;

while (currentCell >= 4) {
                    var targetCell = currentCell - 4;

if (moved) updateGameState();
        }

// Merge the cells towards the right
        function shiftRight() {
            var moved = false;

for (var i = cells.length - 1; i >= 0; i--) {
                if (cells[i].innerText === "") continue;

var currentCell = i;

while ((currentCell + 1) % 4 !== 0) {
                    var targetCell = currentCell + 1;

if (moved) updateGameState();
        }

// Merge the cells downwards
        function shiftDown() {
            var moved = false;

for (var i = cells.length - 1; i >= 0; i--) {
                if (cells[i].innerText === "") continue;

var currentCell = i;

while (currentCell < 12) {
                    var targetCell = currentCell + 4;

if (moved) updateGameState();
        }

// Update the game state (add a new random cell and check for end game)
        function updateGameState() {
            // Clear the merged class for all cells
            for (var i = 0; i < cells.length; i++) {
                cells[i].classList.remove("merged");
            }

// Check for Game Over
            if (!hasPossibleMoves() && mergedCount === 0) {
                alert("Game Over!");
                initializeGame();
                return;
            }

// Add a new random cell
            var emptyCells = [];

for (var i = 0; i < cells.length; i++) {
                if (cells[i].innerText === "") {
                    emptyCells.push(i);
                }
            }

var randomCell = emptyCells[Math.floor(Math.random() * emptyCells.length)];
            cells[randomCell].innerText = "2";
            cells[randomCell].style.backgroundColor = "#eee4da";

// Check for Win
            if (hasWinningNumber()) {
                alert("You Win!");
                initializeGame();
                return;
            }
        }

// Check if there are possible moves
        function hasPossibleMoves() {
            for (var i = 0; i < cells.length; i++) {
                if (cells[i].innerText === "") {
                    return true;
                }
            }

return false;
        }

// Check if the winning number is present
        function hasWinningNumber() {
            for (var i = 0; i < cells.length; i++) {
                if (cells[i].innerText === "2048") {
                    return true;
                }
            }

return false;
        }

// Get the cell background color based on the value
        function getCellColor(value) {
            switch (value) {
                case 2: return "#eee4da";
                case 4: return "#ede0c8";
                case 8: return "#f2b179";
                case 16: return "#f59563";
                case 32: return "#f67c5f";
                case 64: return "#f65e3b";
                case 128: return "#edcf72";
                case 256: return "#edcc61";
                case 512: return "#edc850";
                case 1024: return "#edc53f";
                case 2048: return "#edc22e";
            }
        }

// Initialize the game
        initializeGame();

// Add event listener for arrow keys
        window.addEventListener("keydown", handleArrowKey);
    </script>
</body>
</html>