Pumpkin Patch Sweeper: A Gourd-geous HTML

#html #gamedev #programming #tutorial

Intro:
The season of Halloween is full of wonder and mystery, how about bringing a spin of pumpkins on the classic Minesweeper game. In this gourd-geous HTML adventure, we'll guide you through the process of creating a Halloween-themed Minesweeper game where pumpkins replace the mines

UI component:
The below code defines style for the layout for the game board ( 4x4 grid) , styles the individual cells, and provides distinct visual cues for pumpkins and unopened cells to enhance the user experience.

<style>
        .board {
            display: grid;
            grid-template-columns: repeat(4, 50px);
        }
        .cell {
            width: 50px;
            height: 50px;
            text-align: center;
            border: 1px solid #ccc;
            cursor: pointer;
        }
        .pumpkin {
            background-color: #ff5722;
            color: #fff;
        }
        .unopened {
            background-color: #ccc;
        }
    </style>

Setting up the individual cells and position reference

function createCell(row, col) {
            const cell = document.createElement('div');
            cell.classList.add('cell', 'unopened');
            cell.dataset.row = row;
            cell.dataset.col = col;
            cell.innerHTML = '';
            board.appendChild(cell);
            return cell;
        }

Next function generates random positions for pumpkins within the game grid, ensuring that there are no duplicate positions. The function returns an array containing these positions, which can then be used to place pumpkins in the game.


        function generatePumpkins() {
            const pumpkins = [];
            while (pumpkins.length < pumpkinCount) {
                const row = Math.floor(Math.random() * gridSize);
                const col = Math.floor(Math.random() * gridSize);
                const isDuplicate = pumpkins.some(pumpkin => pumpkin.row === row && pumpkin.col === col);
                if (!isDuplicate) {
                    pumpkins.push({ row, col });
                }
            }
            return pumpkins;
        }

The next function would be to manages the game logic when a player clicks on a cell. It updates the game state, checks for pumpkin encounters, and determines whether the game has been won or lost. The function is a crucial part of the Pumpkin Sweeper game's interactivity.

    function handleCellClick() {
            const cell = this;
            if (cell.classList.contains('unopened')) {
                cell.classList.remove('unopened');
                gridsLeft--;
                document.getElementById('gridCount').textContent = gridsLeft;
                if (cell.classList.contains('pumpkin')) {
                    cell.textContent = '💥'; // Display a pumpkin explosion
                    gameOver('You found a pumpkin!');
                }
                if (gridsLeft === pumpkinCount) {
                    gameOver('Congratulations! You cleared all the grids without finding a pumpkin.');
                }
            }
        }

Demo: