AI game creator

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

No:20873

←

Prev Next

→

Merge Game
Developer User9203｜Date and time 23/10/11 17:39:23
Build time 337.898 sec｜Game capacity 9.302KB｜

Script

Score: 0

Game Over!

←

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>
    body {
      font-family: Arial, sans-serif;
    }

#game-board {
      display: flex;
      flex-wrap: wrap;
      width: 300px;
      height: 300px;
      border: 2px solid black;
    }

.cell {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 33.33%;
      height: 33.33%;
      font-size: 24px;
      font-weight: bold;
      border: 1px solid lightgray;
      box-sizing: border-box;
    }

.cell img {
      max-width: 80%;
      max-height: 80%;
    }

#score {
      margin-top: 20px;
      font-size: 20px;
      font-weight: bold;
    }

#game-over {
      display: none;
      margin-top: 20px;
      font-size: 24px;
      font-weight: bold;
      color: red;
    }
  </style>
</head>
<body>
  <div id="game-board"></div>
  <div id="score">Score: 0</div>
  <div id="game-over">Game Over!</div>

const gameBoard = document.querySelector('#game-board');
    const scoreDisplay = document.querySelector('#score');
    const gameOverDisplay = document.querySelector('#game-over');

let score = 0;
    let gameGrid = [];
    let gameOver = false;

// Create a cell element with a random value and corresponding pictogram
    function createCell() {
      const cell = {};
      cell.value = Math.random() < 0.9 ? 2 : 4; // 90% chance of value 2, 10% chance of value 4
      cell.element = document.createElement('div');
      cell.element.classList.add('cell');
      cell.element.innerHTML = `<img src="${getCellPictogram(cell.value)}"/>`;
      return cell;
    }

// Get the URL of the pictogram corresponding to the given value
    function getCellPictogram(value) {
      const pictogram = pictograms.find(p => p.value === value);
      return pictogram ? pictogram.image : '';
    }

// Render the game grid
    function renderGrid() {
      gameBoard.innerHTML = '';
      for (let row = 0; row < 4; row++) {
        for (let col = 0; col < 4; col++) {
          const cell = gameGrid[row][col];
          gameBoard.appendChild(cell.element);
        }
      }
    }

// Update the score display
    function updateScore() {
      scoreDisplay.textContent = `Score: ${score}`;
    }

// Start a new game
    function startGame() {
      gameGrid = [];
      gameOver = false;
      score = 0;
      gameOverDisplay.style.display = 'none';

for (let row = 0; row < 4; row++) {
        gameGrid.push([]);
        for (let col = 0; col < 4; col++) {
          const cell = createCell();
          gameGrid[row].push(cell);
        }
      }

renderGrid();
      updateScore();
    }

// Merge cells in the grid
    function mergeCells(row, col, direction) {
      const cell1 = gameGrid[row][col];
      let merged = false;

if (direction === 'up') {
        if (row > 0) {
          const cell2 = gameGrid[row - 1][col];
          if (cell1.value === cell2.value) {
            cell1.value *= 2;
            cell2.value = 0;
            merged = true;
            score += cell1.value;
          }
        }
      } else if (direction === 'down') {
        if (row < 3) {
          const cell2 = gameGrid[row + 1][col];
          if (cell1.value === cell2.value) {
            cell1.value *= 2;
            cell2.value = 0;
            merged = true;
            score += cell1.value;
          }
        }
      } else if (direction === 'left') {
        if (col > 0) {
          const cell2 = gameGrid[row][col - 1];
          if (cell1.value === cell2.value) {
            cell1.value *= 2;
            cell2.value = 0;
            merged = true;
            score += cell1.value;
          }
        }
      } else if (direction === 'right') {
        if (col < 3) {
          const cell2 = gameGrid[row][col + 1];
          if (cell1.value === cell2.value) {
            cell1.value *= 2;
            cell2.value = 0;
            merged = true;
            score += cell1.value;
          }
        }
      }

return merged;
    }

// Move the cells in the grid
    function moveCells(direction) {
      let moved = false;

for (let row = 0; row < 4; row++) {
        for (let col = 0; col < 4; col++) {
          const cell = gameGrid[row][col];
          if (cell.value === 0) continue;

if (newRow === row && newCol === col) continue; // Cell already in the correct position

const newPositionCell = gameGrid[newRow][newCol];
          newPositionCell.value = cell.value;
          cell.value = 0;
          moved = true;
        }
      }

return moved;
    }

// Check if there are any available moves left on the grid
    function checkGameOver() {
      for (let row = 0; row < 4; row++) {
        for (let col = 0; col < 4; col++) {
          const cell = gameGrid[row][col];
          if (cell.value === 0) return false; // There is an empty cell, game not over yet

if (row > 0 && cell.value === gameGrid[row - 1][col].value) return false; // Merge possible vertically
          if (row < 3 && cell.value === gameGrid[row + 1][col].value) return false; // Merge possible vertically
          if (col > 0 && cell.value === gameGrid[row][col - 1].value) return false; // Merge possible horizontally
          if (col < 3 && cell.value === gameGrid[row][col + 1].value) return false; // Merge possible horizontally
        }
      }

return true; // No available moves left, game over
    }

// Handle arrow key presses for cell movement
    function handleArrowKey(event) {
      if (gameOver) return;

let moved = false;
      let merged = false;

switch (event.key) {
        case 'ArrowUp':
          for (let col = 0; col < 4; col++) {
            for (let row = 1; row < 4; row++) {
              merged = mergeCells(row, col, 'up');
              moved = moveCells('up') || moved;
            }
          }
          break;
        case 'ArrowDown':
          for (let col = 0; col < 4; col++) {
            for (let row = 2; row >= 0; row--) {
              merged = mergeCells(row, col, 'down');
              moved = moveCells('down') || moved;
            }
          }
          break;
        case 'ArrowLeft':
          for (let row = 0; row < 4; row++) {
            for (let col = 1; col < 4; col++) {
              merged = mergeCells(row, col, 'left');
              moved = moveCells('left') || moved;
            }
          }
          break;
        case 'ArrowRight':
          for (let row = 0; row < 4; row++) {
            for (let col = 2; col >= 0; col--) {
              merged = mergeCells(row, col, 'right');
              moved = moveCells('right') || moved;
            }
          }
          break;
      }

if (moved) {
        if (merged) generateRandomCell(); // Only generate a new cell if cells were merged
        renderGrid();

if (checkGameOver()) {
          gameOver = true;
          gameOverDisplay.style.display = 'block';
        }
      }
    }

// Generate a random cell in an empty position on the grid
    function generateRandomCell() {
      const emptyCells = [];

for (let row = 0; row < 4; row++) {
        for (let col = 0; col < 4; col++) {
          const cell = gameGrid[row][col];
          if (cell.value === 0) {
            emptyCells.push({ row, col });
          }
        }
      }

if (emptyCells.length > 0) {
        const randomCell = emptyCells[Math.floor(Math.random() * emptyCells.length)];
        const newCell = createCell();
        gameGrid[randomCell.row][randomCell.col] = newCell;
      }
    }

// Event listener for arrow key presses
    document.addEventListener('keydown', handleArrowKey);

// Start the game
    startGame();
  </script>
</body>
</html>