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

No:23953

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

Script

Sì, posso creare un gioco di abbinamento di caramelle a match 3 come richiesto! Ecco un esempio di implementazione in un singolo file HTML utilizzando JavaScript:

Gioco Caramelle Match 3

Punteggio: 0

Questo codice crea un gioco di abbinamento di caramelle in cui l'utente deve selezionare due caramelle adiacenti dello stesso tipo per eliminarle dal tabellone e guadagnare punti. Se l'utente seleziona quattro caramelle adiacenti formando un quadrato di 2x2 dello stesso tipo, elimina tutte e quattro le caramelle e guadagna un punteggio più alto. Le caramelle vengono rappresentate con un pictogramma di 🍬 nel gioco. Il punteggio viene visualizzato nella parte superiore del gioco.

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

Sì, posso creare un gioco di abbinamento di caramelle a match 3 come richiesto! Ecco un esempio di implementazione in un singolo file HTML utilizzando JavaScript:

```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Gioco Caramelle Match 3</title>
    <style>
        /* Aggiungere lo stile desiderato per il gioco */
        body {
            font-family: Arial, sans-serif;
        }
        .board {
            display: grid;
            grid-template-columns: repeat(8, 1fr);
            gap: 5px;
            max-width: 400px;
            margin: 0 auto;
        }
        .cell {
            width: 50px;
            height: 50px;
            border: 1px solid #999;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <h1>Gioco Caramelle Match 3</h1>
    <div id="score">Punteggio: 0</div>
    <div class="board"></div>

// Funzione per generare un nuovo tabellone di gioco
        function generateBoard() {
            const board = document.querySelector('.board');
            board.innerHTML = '';

for (let row = 0; row < 8; row++) {
                for (let col = 0; col < 8; col++) {
                    const randomType = Math.floor(Math.random() * 6);
                    const candy = new Candy(randomType);
                    const cell = document.createElement('div');
                    cell.classList.add('cell');
                    cell.dataset.row = row;
                    cell.dataset.col = col;
                    cell.dataset.type = randomType;
                    cell.innerText = '🍬'; // Utilizzo di un pictogramma per rappresentare la caramella
                    cell.addEventListener('click', selectCell);
                    board.appendChild(cell);
                }
            }
        }

// Funzione per selezionare una caramella
        function selectCell(event) {
            const selectedCell = event.target;
            const selectedType = selectedCell.dataset.type;
            const selectedRow = parseInt(selectedCell.dataset.row);
            const selectedCol = parseInt(selectedCell.dataset.col);

// Verifica se è possibile selezionare una caramella adiacente
            if (isValidMove(selectedRow, selectedCol)) {
                const selectedCandies = document.querySelectorAll('.cell.selected');
                selectedCandies.forEach((candy) => {
                    candy.classList.remove('selected');
                });
                selectedCell.classList.add('selected');

// Verifica se c'è una corrispondenza di 3 o un quadrato 2x2
                checkMatches();
            }
        }

// Funzione per verificare se una mossa è valida (adiacente)
        function isValidMove(row, col) {
            const selectedCandies = document.querySelectorAll('.cell.selected');
            if (selectedCandies.length === 0) {
                return true;
            }
            const selectedCell = selectedCandies[0];
            const selectedRow = parseInt(selectedCell.dataset.row);
            const selectedCol = parseInt(selectedCell.dataset.col);
            const diffRow = Math.abs(row - selectedRow);
            const diffCol = Math.abs(col - selectedCol);
            return (diffRow === 1 && diffCol === 0) || (diffRow === 0 && diffCol === 1);
        }

// Funzione per verificare se ci sono corrispondenze di 3 o quadrati 2x2
        function checkMatches() {
            const selectedCandies = document.querySelectorAll('.cell.selected');
            if (selectedCandies.length === 2) {
                const firstCandy = selectedCandies[0];
                const secondCandy = selectedCandies[1];

if (isAdjacent(firstCandy, secondCandy)) {
                    const firstType = parseInt(firstCandy.dataset.type);
                    const secondType = parseInt(secondCandy.dataset.type);

if (firstType === secondType) {
                        // Rimuovi le caramelle selezionate
                        const board = document.querySelector('.board');
                        board.removeChild(firstCandy);
                        board.removeChild(secondCandy);
                        updateScore(10);
                        generateNewCandies(); // Genera nuove caramelle dopo aver rimosso le corrispondenze
                    }
                }
            } else if (selectedCandies.length === 4) {
                const firstCandy = selectedCandies[0];
                const secondCandy = selectedCandies[1];
                const thirdCandy = selectedCandies[2];
                const fourthCandy = selectedCandies[3];

if (isSquare(firstCandy, secondCandy, thirdCandy, fourthCandy)) {
                    // Rimuovi le caramelle selezionate
                    const board = document.querySelector('.board');
                    board.removeChild(firstCandy);
                    board.removeChild(secondCandy);
                    board.removeChild(thirdCandy);
                    board.removeChild(fourthCandy);
                    updateScore(50);
                    generateNewCandies(); // Genera nuove caramelle dopo aver rimosso il quadrato 2x2
                }
            }
        }

// Funzione per verificare se due caramelle sono adiacenti
        function isAdjacent(firstCandy, secondCandy) {
            const firstRow = parseInt(firstCandy.dataset.row);
            const firstCol = parseInt(firstCandy.dataset.col);
            const secondRow = parseInt(secondCandy.dataset.row);
            const secondCol = parseInt(secondCandy.dataset.col);
            const diffRow = Math.abs(firstRow - secondRow);
            const diffCol = Math.abs(firstCol - secondCol);
            return (diffRow === 1 && diffCol === 0) || (diffRow === 0 && diffCol === 1);
        }

// Funzione per verificare se le quattro caramelle formano un quadrato 2x2
        function isSquare(firstCandy, secondCandy, thirdCandy, fourthCandy) {
            const firstRow = parseInt(firstCandy.dataset.row);
            const firstCol = parseInt(firstCandy.dataset.col);
            const secondRow = parseInt(secondCandy.dataset.row);
            const secondCol = parseInt(secondCandy.dataset.col);
            const thirdRow = parseInt(thirdCandy.dataset.row);
            const thirdCol = parseInt(thirdCandy.dataset.col);
            const fourthRow = parseInt(fourthCandy.dataset.row);
            const fourthCol = parseInt(fourthCandy.dataset.col);
            return (Math.abs(firstRow - secondRow) === 1 && Math.abs(firstCol - thirdCol) === 1) &&
                   (Math.abs(secondRow - fourthRow) === 1 && Math.abs(thirdCol - fourthCol) === 1);
        }

// Funzione per generare nuove caramelle dopo aver rimosso le corrispondenze
        function generateNewCandies() {
            const board = document.querySelector('.board');
            const candies = document.querySelectorAll('.cell');
            candies.forEach((candy) => {
                const row = parseInt(candy.dataset.row);
                const col = parseInt(candy.dataset.col);
                if (!board.querySelector(`[data-row="${row}"][data-col="${col}"]`)) {
                    const randomType = Math.floor(Math.random() * 6);
                    const newCandy = new Candy(randomType);
                    const newCell = document.createElement('div');
                    newCell.classList.add('cell');
                    newCell.dataset.row = row;
                    newCell.dataset.col = col;
                    newCell.dataset.type = randomType;
                    newCell.innerText = '🍬';
                    newCell.addEventListener('click', selectCell);
                    board.appendChild(newCell);
                }
            });
        }

// Funzione per aggiornare il punteggio
        function updateScore(score) {
            const scoreElement = document.getElementById('score');
            const currentScore = parseInt(scoreElement.innerText.split(':')[1]);
            scoreElement.innerText = `Punteggio: ${currentScore + score}`;
        }

// Avvia il gioco
        generateBoard();
    </script>
</body>
</html>
```

Le caramelle vengono rappresentate con un pictogramma di 🍬 nel gioco. Il punteggio viene visualizzato nella parte superiore del gioco.