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

No:38315

←

Prev Next

→

Merge Game
Developer User17355｜Date and time 24/1/24 8:14:48
Build time 43.451 sec｜Game capacity 12.22KB｜

Script

Merge Game

Score: 0

Game Over

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
  <head>
    <title>Merge Game</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        background-color: #f9f9f9;
      }

h1 {
        text-align: center;
      }

.grid {
        display: grid;
        grid-template-columns: repeat(4, 100px);
        gap: 10px;
        margin: 0 auto;
      }

.cell {
        width: 100px;
        height: 100px;
        border-radius: 10px;
        background-color: #ccc;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 30px;
        font-weight: bold;
      }

.icons {
        width: 60px;
        height: 60px;
        object-fit: cover;
      }

.score {
        text-align: center;
        font-size: 20px;
        font-weight: bold;
        margin-top: 20px;
      }

.game-over {
        text-align: center;
        font-size: 30px;
        font-weight: bold;
        color: red;
        margin-top: 100px;
      }
    </style>
  </head>
  <body>
    <h1>Merge Game</h1>
    <div class="grid"></div>
    <div class="score">Score: 0</div>
    <div class="game-over">Game Over</div>
    <script>
      document.addEventListener("DOMContentLoaded", () => {
        const grid = document.querySelector(".grid");
        const score = document.querySelector(".score");
        const gameOver = document.querySelector(".game-over");

const icons = [
          "🍉",
          "🍌",
          "🍓",
          "🍇",
          "🍊",
          "🍎",
          "🍒",
          "🥝",
          "🍑",
          "🍍",
          "🍋",
          "🍏",
        ];

let cells = [];
        let maxScore = 0;

// Create initial cells
        function createCells() {
          for (let i = 0; i < 16; i++) {
            const cell = document.createElement("div");
            cell.classList.add("cell");
            grid.appendChild(cell);
            cells.push(cell);
          }
        }

// Select a random available cell
        function selectRandomCell() {
          const emptyCells = cells.filter((cell) => !cell.textContent);
          if (emptyCells.length) {
            const randomIndex = Math.floor(Math.random() * emptyCells.length);
            return emptyCells[randomIndex];
          } else {
            return null;
          }
        }
        
        // Check if the game is over
        function isGameOver() {
          const emptyCells = cells.filter((cell) => !cell.textContent);
          return emptyCells.length === 0 && !canMerge();
        }

// Merge two cells if they have the same value
        function mergeCells(firstCell, secondCell) {
          if (
            firstCell &&
            secondCell &&
            firstCell.textContent === secondCell.textContent
          ) {
            const value = parseInt(firstCell.textContent, 10) * 2;
            firstCell.textContent = value;
            secondCell.textContent = "";
            firstCell.style.backgroundColor = getCellBackgroundColor(value);
            secondCell.style.backgroundColor = "#ccc";
            updateScore(value);
            maxScore = Math.max(maxScore, value);

if (value === 2048) {
              showGameWon();
            }
          }
        }

// Get the background color for a value
        function getCellBackgroundColor(value) {
          const colors = [
            "#eee4da",
            "#ede0c8",
            "#f2b179",
            "#f59563",
            "#f67c5f",
            "#f65e3b",
            "#edcf72",
            "#edcc61",
            "#edc850",
            "#edc53f",
            "#edc22e",
            "#3c3a32",
            "#3c3e58",
            "#3c3b63",
            "#3d3f74",
            "#3e3e9c",
            "#4c40a0",
            "#4a42ac",
            "#4a49be",
            "#3a52c1",
            "#2c55c4",
            "#3264cf",
            "#1475c0",
            "#1680c4",
            "#1090c8",
            "#28a9d0",
            "#28babe",
            "#1ec8b7",
            "#35d2ae",
            "#3dceb1",
            "#56dabe",
            "#5fe1be",
            "#7bdfb4",
            "#89dbaa",
            "#95de9b",
            "#a2de8a",
            "#acd77b",
            "#bad17b",
            "#b6c362",
            "#c6b056",
            "#d1a74f",
            "#c59629",
            "#e8c02f",
            "#e2b913",
            "#faaf22",
            "#f5953a",
            "#f67c5f",
            "#f65e3b",
            "#edcf72",
            "#edcc62",
            "#edc850",
            "#edc53f",
            "#edc22e",
          ];
          return colors[Math.log2(value) - 1] || "#ccc";
        }

// Update the score
        function updateScore(value) {
          const currentScore = parseInt(score.textContent, 10);
          score.textContent = currentScore + value;
        }

// Show the game over message
        function showGameOver() {
          gameOver.style.display = "block";
        }

// Show the game won message
        function showGameWon() {
          const gameWonText = document.createElement("div");
          gameWonText.classList.add("game-over");
          gameWonText.textContent = "Congratulations! You won!";
          document.body.appendChild(gameWonText);
        }

// Check if cells can be merged in any direction
        function canMerge() {
          for (let i = 0; i < cells.length; i++) {
            const currentCell = cells[i];
            const topCell = cells[i - 4];
            const bottomCell = cells[i + 4];
            const leftCell = cells[i - 1];
            const rightCell = cells[i + 1];

if (
              (currentCell && topCell && currentCell.textContent === topCell.textContent) ||
              (currentCell && bottomCell && currentCell.textContent === bottomCell.textContent) ||
              (currentCell && leftCell && currentCell.textContent === leftCell.textContent) ||
              (currentCell && rightCell && currentCell.textContent === rightCell.textContent)
            ) {
              return true;
            }
          }
          return false;
        }

// Handle keydown events
        function handleKeyDown(event) {
          if (event.key === "ArrowUp") {
            event.preventDefault();
            moveCellsUp();
          } else if (event.key === "ArrowDown") {
            event.preventDefault();
            moveCellsDown();
          } else if (event.key === "ArrowLeft") {
            event.preventDefault();
            moveCellsLeft();
          } else if (event.key === "ArrowRight") {
            event.preventDefault();
            moveCellsRight();
          }
        }

// Move cells up
        function moveCellsUp() {
          let moved = false;
          for (let i = 4; i < cells.length; i++) {
            const currentCell = cells[i];
            let row = Math.floor(i / 4);
            let column = i % 4;
            let j = i - 4;

while (j >= 0) {
              const topCell = cells[j];
              let topRow = Math.floor(j / 4);
              if (!topCell.textContent) {
                mergeCells(currentCell, topCell);
                topCell.textContent = currentCell.textContent;
                currentCell.textContent = "";
                currentCell.style.backgroundColor = "#ccc";
                moved = true;
              } else if (topCell.textContent === currentCell.textContent && row === topRow + 1) {
                mergeCells(currentCell, topCell);
                break;
              } else {
                break;
              }
              j -= 4;
            }
          }

if (moved) {
            selectRandomSpawn();
            if (isGameOver()) {
              showGameOver();
            }
          }
        }

// Move cells down
        function moveCellsDown() {
          let moved = false;
          for (let i = cells.length - 5; i >= 0; i--) {
            const currentCell = cells[i];
            let row = Math.floor(i / 4);
            let column = i % 4;
            let j = i + 4;

while (j < cells.length) {
              const bottomCell = cells[j];
              let bottomRow = Math.floor(j / 4);
              if (!bottomCell.textContent) {
                mergeCells(currentCell, bottomCell);
                bottomCell.textContent = currentCell.textContent;
                currentCell.textContent = "";
                currentCell.style.backgroundColor = "#ccc";
                moved = true;
              } else if (
                bottomCell.textContent === currentCell.textContent &&
                row === bottomRow - 1
              ) {
                mergeCells(currentCell, bottomCell);
                break;
              } else {
                break;
              }
              j += 4;
            }
          }

if (moved) {
            selectRandomSpawn();
            if (isGameOver()) {
              showGameOver();
            }
          }
        }

// Move cells left
        function moveCellsLeft() {
          let moved = false;
          for (let i = 1; i < cells.length; i++) {
            const currentCell = cells[i];
            let row = Math.floor(i / 4);
            let column = i % 4;
            let j = i - 1;

while (column > 0) {
              const leftCell = cells[j];
              let leftColumn = j % 4;
              if (!leftCell.textContent) {
                mergeCells(currentCell, leftCell);
                leftCell.textContent = currentCell.textContent;
                currentCell.textContent = "";
                currentCell.style.backgroundColor = "#ccc";
                moved = true;
              } else if (
                leftCell.textContent === currentCell.textContent &&
                row === Math.floor(j / 4)
              ) {
                mergeCells(currentCell, leftCell);
                break;
              } else {
                break;
              }
              j -= 1;
              column -= 1;
            }
          }

if (moved) {
            selectRandomSpawn();
            if (isGameOver()) {
              showGameOver();
            }
          }
        }

// Move cells right
        function moveCellsRight() {
          let moved = false;
          for (let i = cells.length - 2; i >= 0; i--) {
            const currentCell = cells[i];
            let row = Math.floor(i / 4);
            let column = i % 4;
            let j = i + 1;

while (column < 3) {
              const rightCell = cells[j];
              let rightColumn = j % 4;
              if (!rightCell.textContent) {
                mergeCells(currentCell, rightCell);
                rightCell.textContent = currentCell.textContent;
                currentCell.textContent = "";
                currentCell.style.backgroundColor = "#ccc";
                moved = true;
              } else if (
                rightCell.textContent === currentCell.textContent &&
                row === Math.floor(j / 4)
              ) {
                mergeCells(currentCell, rightCell);
                break;
              } else {
                break;
              }
              j += 1;
              column += 1;
            }
          }

if (moved) {
            selectRandomSpawn();
            if (isGameOver()) {
              showGameOver();
            }
          }
        }

// Select a random spawn after moving
        function selectRandomSpawn() {
          const randomCell = selectRandomCell();
          if (randomCell) {
            const randomIcon = icons[Math.floor(Math.random() * icons.length)];
            randomCell.textContent = randomIcon;
            randomCell.style.backgroundColor = getCellBackgroundColor(2);
          }
        }

// Initialize the game
        function initGame() {
          createCells();
          selectRandomSpawn();
          selectRandomSpawn();
          document.addEventListener("keydown", handleKeyDown);
        }

initGame();
      });
    </script>
  </body>
</html>