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

No:23952

Crea un gioco in cui tu devi unire le caramelle a ..ALL
Developer User11059｜Date and time 23/11/4 18:13:29
Build time 129.546 sec｜Game capacity 7.015KB｜

Script

Gioco delle caramelle

Punteggio: 0

←

Prev　Next

→ 　

Back　

[PR]現在の人気ゲームランキング

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

<!DOCTYPE html>
<html>
<head>
  <title>Match 3 Candy Game</title>
  <style>
    body {
      text-align: center;
    }

.board {
      display: flex;
      flex-wrap: wrap;
      width: 300px;
      margin: 30px auto;
    }

.cell {
      width: 60px;
      height: 60px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 30px;
      border: 1px solid black;
      cursor: pointer;
    }

.cell:hover {
      background-color: lightgray;
    }

.bomb {
      color: red;
    }

.swap {
      background-color: yellow;
    }

.score {
      margin-bottom: 10px;
    }
  </style>
</head>
<body>
  <h1>Gioco delle caramelle</h1>
  <div class="score">Punteggio: 0</div>
  <div class="board"></div>

let score = 0;
      let currentCandy;
      let selectedCell;
      let cellsToSwap = [];

const board = document.querySelector('.board');
      const scoreElement = document.querySelector('.score');

function createCell() {
        const cell = document.createElement('div');
        cell.classList.add('cell');
        return cell;
      }

function createRandomCandy() {
        const candyIndex = Math.floor(Math.random() * candyTypes.length);
        const candy = candyTypes[candyIndex];
        return candy;
      }

function createRandomCandyCell() {
        const cell = createCell();
        cell.innerText = createRandomCandy();
        return cell;
      }

function createBombCell() {
        const cell = createCell();
        cell.classList.add('bomb');
        cell.innerText = '💣';
        return cell;
      }

function createEmptyCell() {
        const cell = createCell();
        return cell;
      }

function clearBoard() {
        while (board.firstChild) {
          board.removeChild(board.firstChild);
        }
      }

function addRandomCandyCells() {
        const emptyCells = Array.from(board.children).filter(cell => cell.innerText === '');
        emptyCells.forEach(cell => {
          const randomCandyCell = createRandomCandyCell();
          randomCandyCell.dataset.index = cell.dataset.index;
          cell.replaceWith(randomCandyCell);
        });
      }

function getAdjacentCandies(cell) {
        const index = parseInt(cell.dataset.index);
        const adjacentIndices = [index - boardSize, index + boardSize];

if (index % boardSize !== 0) {
          adjacentIndices.push(index - 1);
        }
        if ((index + 1) % boardSize !== 0) {
          adjacentIndices.push(index + 1);
        }

return adjacentIndices
          .filter(adjacentIndex => adjacentIndex >= 0 && adjacentIndex < boardSize * boardSize)
          .map(adjacentIndex => board.children[adjacentIndex]);
      }

function isSameType(cell1, cell2) {
        return cell1.innerText === cell2.innerText;
      }

function clearSelectedCell() {
        if (selectedCell) {
          selectedCell.style.background = '';
          selectedCell = null;
        }
      }

function clearSwapCells() {
        cellsToSwap.forEach(cell => cell.classList.remove('swap'));
        cellsToSwap = [];
      }

function swapCandies() {
        const firstIndex = parseInt(cellsToSwap[0].dataset.index);
        const secondIndex = parseInt(cellsToSwap[1].dataset.index);

if (Math.abs(firstIndex - secondIndex) === 1 || Math.abs(firstIndex - secondIndex) === boardSize) {
          const tempText = cellsToSwap[0].innerText;
          cellsToSwap[0].innerText = cellsToSwap[1].innerText;
          cellsToSwap[1].innerText = tempText;

if (!checkMatch()) {
            setTimeout(() => {
              cellsToSwap[1].innerText = cellsToSwap[0].innerText;
              cellsToSwap[0].innerText = tempText;
            }, 500);
          }
        } else {
          setTimeout(() => {
            cellsToSwap[1].style.background = '';
            cellsToSwap[0].style.background = '';
          }, 500);
        }

clearSwapCells();
      }

function selectCell(cell) {
        cell.classList.add('swap');

if (cellsToSwap.length === 0) {
          cellsToSwap.push(cell);
        } else if (cellsToSwap.length === 1) {
          cellsToSwap.push(cell);
          swapCandies();
        } else {
          clearSelectedCell();
        }
      }

function checkMatch() {
        let matchedCandies = [];
        const checkedCells = [];

function findMatch(currentCell) {
          if (checkedCells.includes(currentCell)) {
            return;
          }

const currentCandy = currentCell.innerText;
          matchedCandies.push(currentCell);
          checkedCells.push(currentCell);

const adjacentCandies = getAdjacentCandies(currentCell)
            .filter(cell => isSameType(cell, currentCell));

adjacentCandies.forEach(cell => findMatch(cell));
        }

findMatch(cellsToSwap[0]);
        findMatch(cellsToSwap[1]);

if (matchedCandies.length >= 3) {
          score += matchedCandies.length;
          scoreElement.innerText = `Punteggio: ${score}`;

matchedCandies.forEach(cell => {
            cell.innerText = '';
            cell.style.background = '';
          });

addRandomCandyCells();
          return true;
        }

return false;
      }

function handleCellClick(e) {
        const targetCell = e.target;

if (targetCell.innerText === '') {
          return;
        }

if (selectedCell) {
          if (selectedCell === targetCell) {
            clearSelectedCell();
          } else {
            selectCell(targetCell);
          }
        } else {
          selectCell(targetCell);
        }
      }

function handleCellHover(e) {
        const targetCell = e.target;

if (selectedCell && selectedCell !== targetCell) {
          targetCell.style.background = 'lightblue';
        }
      }

function setEventListener() {
        board.addEventListener('click', handleCellClick)
        board.addEventListener('mouseover', handleCellHover);
      }

function removeEventListener() {
        board.removeEventListener('click', handleCellClick)
        board.removeEventListener('mouseover', handleCellHover);
      }

function startGame() {
        clearBoard();
        createBoard();
        setEventListener();
      }

startGame();
    }

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