DEV Community

Cover image for Pumpkin Patch Sweeper: A Gourd-geous HTML
Bala Madhusoodhanan
Bala Madhusoodhanan

Posted on

Pumpkin Patch Sweeper: A Gourd-geous HTML

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>
Enter fullscreen mode Exit fullscreen mode

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;
        }
Enter fullscreen mode Exit fullscreen mode

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;
        }
Enter fullscreen mode Exit fullscreen mode

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.');
                }
            }
        }
Enter fullscreen mode Exit fullscreen mode

Demo:
Pumpkin

Top comments (2)

Collapse
 
wyattdave profile image
david wyatt

Amazing what you can do with a few lines of code 😎

Collapse
 
balagmadhu profile image
Bala Madhusoodhanan

have to confess .. the idea was to build using PowerApps... I think started bit late and wanted to get the Halloween theme game on time

sec