AI game creator

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

No:12000

←

Prev Next

→

Merge Game
Developer User5017｜Date and time 23/8/13 12:04:43
Build time 42.227 sec｜Game capacity 6.502KB｜

Script

←

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>
</head>
<body>
  <canvas id="gameCanvas" style="border:1px solid black;"></canvas>

// Clase para representar una celda del tablero
    class Cell {
      constructor(x, y) {
        this.x = x;
        this.y = y;
        this.pictogram = getRandomPictogram();
        this.merged = false;
      }

// Obtener una imagen de pictograma aleatoria
      getRandomPictogram() {
        var randomIndex = Math.floor(Math.random() * pictograms.length);
        return pictograms[randomIndex];
      }
    }

// Variables y constantes del juego
    var canvas;
    var context;
    var board;
    var tileSize = 100;
    var boardSize = 4;
    var score = 0;

// Inicializar el juego
    function startGame() {
      canvas = document.getElementById("gameCanvas");
      context = canvas.getContext("2d");
      board = [];

// Crear el tablero de celdas
      for (var x = 0; x < boardSize; x++) {
        board[x] = [];
        for (var y = 0; y < boardSize; y++) {
          board[x][y] = new Cell(x, y);
        }
      }

// Mostrar el tablero inicial
      drawBoard();
    }

// Dibujar el tablero en el canvas
    function drawBoard() {
      context.clearRect(0, 0, canvas.width, canvas.height);

// Dibujar las celdas
      for (var x = 0; x < boardSize; x++) {
        for (var y = 0; y < boardSize; y++) {
          var cell = board[x][y];
          var image = new Image();
          image.src = cell.pictogram.src;
          context.drawImage(image, x * tileSize, y * tileSize, tileSize, tileSize);
        }
      }

// Mostrar la puntuación
      context.fillStyle = "black";
      context.font = "bold 24px Arial";
      context.fillText("Puntuación: " + score, 10, canvas.height - 10);
    }

// Fusionar celdas adyacentes del mismo valor
    function mergeCells(direction) {
      var merged = false;

// Obtener la dirección de fusión y los límites del tablero según la dirección
      var startX, startY, endX, endY, stepX, stepY;
      if (direction === "up") {
        startX = 0;
        startY = 1;
        endX = boardSize;
        endY = boardSize;
        stepX = 1;
        stepY = 1;
      } else if (direction === "down") {
        startX = 0;
        startY = boardSize - 2;
        endX = boardSize;
        endY = -1;
        stepX = 1;
        stepY = -1;
      } else if (direction === "left") {
        startX = 1;
        startY = 0;
        endX = boardSize;
        endY = boardSize;
        stepX = 1;
        stepY = 1;
      } else if (direction === "right") {
        startX = boardSize - 2;
        startY = 0;
        endX = -1;
        endY = boardSize;
        stepX = -1;
        stepY = 1;
      }
      
      // Fusionar las celdas adyacentes en la dirección dada
      for (var x = startX; x !== endX; x += stepX) {
        for (var y = startY; y !== endY; y += stepY) {
          var currentCell = board[x][y];
          
          // Solo fusionar celdas no fusionadas previamente
          if (!currentCell.merged) {
            var nextX = x + stepX;
            var nextY = y + stepY;
            
            // Continuar fusionando en la dirección hasta encontrar una celda no vacía o llegar al límite del tablero
            while (isInsideBoard(nextX, nextY) && !board[nextX][nextY].pictogram && !board[nextX][nextY].merged) {
              nextX += stepX;
              nextY += stepY;
            }
            
            // Si hay una celda no fusionada, comprobar si sus valores son iguales para fusionarlas
            if (isInsideBoard(nextX, nextY) && board[nextX][nextY].pictogram && board[nextX][nextY].pictogram.value === currentCell.pictogram.value) {
              // Fusionar las celdas
              board[nextX][nextY].merged = true;
              currentCell.pictogram = getNextPictogram(currentCell.pictogram);
              score += currentCell.pictogram.value;
              merged = true;
            }
          }
        }
        
        // Restaurar estado de fusión para la siguiente fila/columna
        for (var y = startY; y !== endY; y += stepY) {
          if (isInsideBoard(x, y)) {
            board[x][y].merged = false;
          }
        }
      }
      
      // Si se realizaron fusiones, generar una nueva celda aleatoria
      if (merged) {
        generateRandomCell();
      }

// Dibujar el tablero actualizado
      drawBoard();
    }

// Comprobar si las coordenadas están dentro del tablero
    function isInsideBoard(x, y) {
      return x >= 0 && x < boardSize && y >= 0 && y < boardSize;
    }

// Obtener el siguiente pictograma para fusionar
    function getNextPictogram(pictogram) {
      var index = pictograms.indexOf(pictogram);
      return pictograms[index + 1];
    }

// Generar una nueva celda aleatoria en una posición vacía del tablero
    function generateRandomCell() {
      var emptyCells = [];
      
      // Obtener todas las celdas vacías
      for (var x = 0; x < boardSize; x++) {
        for (var y = 0; y < boardSize; y++) {
          if (!board[x][y].pictogram) {
            emptyCells.push({ x: x, y: y });
          }
        }
      }
      
      // Seleccionar una celda vacía aleatoria y asignarle un pictograma
      var randomIndex = Math.floor(Math.random() * emptyCells.length);
      var randomCell = emptyCells[randomIndex];
      
      board[randomCell.x][randomCell.y].pictogram = getRandomPictogram();
    }

// Manejar eventos de teclado para mover las celdas
    document.addEventListener("keydown", function(event) {
      event.preventDefault(); // Evitar scrolling de la página al utilizar las flechas
      
      if (event.keyCode === 38 || event.keyCode === 87) {
        mergeCells("up");
      } else if (event.keyCode === 40 || event.keyCode === 83) {
        mergeCells("down");
      } else if (event.keyCode === 37 || event.keyCode === 65) {
        mergeCells("left");
      } else if (event.keyCode === 39 || event.keyCode === 68) {
        mergeCells("right");
      }
    });

// Iniciar el juego al cargar la página
    startGame();
  </script>
</body>
</html>