落ち物パズルマスは９×9の正方形's game

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

No:22619

←

Prev Next

→

落ち物パズルマスは９×9の正方形
Developer User7165｜Date and time 23/10/23 17:15:32
Build time 51.942 sec｜Game capacity 3.141KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋アプリランキング

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

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>落ち物パズル</title>
  <style>
    #game-board {
      display: grid;
      grid-template-columns: repeat(9, 1fr);
      grid-template-rows: repeat(9, 1fr);
      gap: 2px;
    }
    
    .cell {
      border: 1px solid gray;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
    }
  </style>
</head>
<body>
  <div id="game-board"></div>

let board = [];
    let currentPiece = "";
    let score = 0;

// Create game board with initial pieces
    function createBoard() {
      for (let row = 0; row < rows; row++) {
        let newRow = [];
        for (let col = 0; col < cols; col++) {
          let piece = getRandomPiece();
          newRow.push(piece);
          createCell(piece, row, col);
        }
        board.push(newRow);
      }
    }

// Generate a random piece
    function getRandomPiece() {
      const pieces = ['😀', '😊', '😎', '🤩', '😍'];
      const randomIndex = Math.floor(Math.random() * pieces.length);
      return pieces[randomIndex];
    }

// Create a cell with a specific piece at given position
    function createCell(piece, row, col) {
      const cell = document.createElement('div');
      cell.className = 'cell';
      cell.style.width = `${cellSize}px`;
      cell.style.height = `${cellSize}px`;
      cell.style.fontSize = `${cellSize * 0.8}px`;
      cell.textContent = piece;
      cell.dataset.row = row;
      cell.dataset.col = col;
      cell.addEventListener('click', cellClickHandler);
      gameBoard.appendChild(cell);
    }

// Handle cell click event
    function cellClickHandler() {
      const row = parseInt(this.dataset.row);
      const col = parseInt(this.dataset.col);
      
      if (currentPiece === "") {
        currentPiece = board[row][col];
        this.style.backgroundColor = "blue";
      } else {
        swapPieces(row, col);
        currentPiece = "";
        this.style.backgroundColor = "initial";
      }
    }

// Swap pieces when two adjacent cells are clicked
    function swapPieces(row, col) {
      if ((row + 1 < rows && board[row + 1][col] === currentPiece) ||
          (row - 1 >= 0 && board[row - 1][col] === currentPiece) ||
          (col + 1 < cols && board[row][col + 1] === currentPiece) ||
          (col - 1 >= 0 && board[row][col - 1] === currentPiece)) {
        board[row][col] = currentPiece;
        board[row][col] = board[row][col] = "";
        score++;
        updateBoard();
      } else {
        alert("Invalid move!");
      }
    }

// Update the game board after swapping pieces
    function updateBoard() {
      const cells = document.getElementsByClassName('cell');
      for (let i = 0; i < cells.length; i++) {
        const row = parseInt(cells[i].dataset.row);
        const col = parseInt(cells[i].dataset.col);
        cells[i].textContent = board[row][col];
      }
    }

createBoard();
  </script>
</body>
</html>