ساخت آسان بازی مینروب ( mineSweeper ) با جاوا اسکریپت

با سلام به تو دوست عزیز که این مقاله رو برای خوندن انتخاب کردی.

در این مقاله قصد داریم تا بازی بمب معروف (mineSweeper) یا مینروب را با استفاده از جاوا اسکریپت پیاده سازی کنیم.

بازی "مینروب" یا همان "بمب" یک بازی کلاسیک است که در آن شما باید در یک میدان مربعی که با خانه‌ها پر شده است، مین‌هایی که در زیر آن‌ها نهفته‌اند را پیدا کرده و از آن‌ها دوری کنید. در صورتی که روی خانه ای که حاوی بمب هست کلیک کنید، شما بازنده می شوید.

الگوریتم بازی "مینروب" به صورت ساده به شرح زیر است:

1. تعریف میدان:

   - یک میدان مربعی با ابعاد مشخص (تعداد ردیف‌ها و ستون‌ها) ایجاد می‌کنیم. این میدان شامل تعدادی خانه است. و هر خانه میتواند خالی با شد یا شامل عدد یا بمب باشد

2. تعیین مکان‌های مین:

   - مکان‌های تعداد معینی از مین‌ها به صورت تصادفی درون میدان انتخاب می‌شوند. مثلا میتوانیم مین‌ها را با عدد منفی مشخص کنیم.

3. بررسی خانه‌ها:

   - هر خانه از میدان یکی از حالت‌های زیر را دارد:

     - اگر خالی باشد (نه حاوی بمب است نه خانه های اطراف آن حاوی بمب است)، ما باید تمام خانه‌های اطراف آن را نیز بررسی کنیم و اگر خانه‌هایی دیگر هم خالی باشند، آن‌ها را نیز باز کنیم. 

     - اگر حاوی مین باشد، بازی را می بازید.

     - اگر حاوی عدد مثبتی باشد( تعدادی مین در خانه های اطراف آن باشد )، تعداد مین‌های آن خانه را ( مثلا 2 ) در خود آن خانه نمایش می‌دهیم.

4. پایان بازی:

   - اگر کاربر یک خانه حاوی مین را باز کند، کاربر میبازد.

   - اگر تمام خانه‌های غیرمین باز شوند، کاربر برنده می شود.

5. اجرای بازی:

   - بازی از یک نقطه شروع می‌شود (معمولاً با کلیک کاربر)، و سپس با استفاده از الگوریتم برای بررسی و افشای خانه‌ها، بازی پیش می‌رود.

کدنویسی بازی مینروب یا بمب به زبان جاوا اسکریپت:

ابتدا صفحه مربعی را با کد های CSS زیر میسازیم

   .board {
            display: grid;
            grid-template-columns: repeat(10, 30px);
        }
        .cell {
            width: 30px;
            height: 30px;
            border: 1px solid #000;
            text-align: center;
            font-size: 20px;
            cursor: pointer;
        } 

سپس تعداد سطر و ستون و تعداد مین ها را با جاوا اسکریپت مشخص میکنیم

const board = document.getElementById("board");
const numRows = 10;
const numCols = 10;
const numMines = 20;
 let mines = [];

تابع initializeBoard صفحه بازی را با تعداد سطر و ستون مورد نظرمان میسازد

function initializeBoard() {
        for (let i = 0; i < numRows; i++) {
            for (let j = 0; j < numCols; j++) {
                const cell = document.createElement("div");
                cell.classList.add("cell");
                cell.dataset.row = i;
                cell.dataset.col = j;
                board.appendChild(cell);
                cell.addEventListener("click", handleCellClick);
            }
        }
        placeMines();
 }

تابع placeMines مین ها (بمب ها) را در صفحه به صورت رندم جایگذاری میکند

   function placeMines() {
        for (let i = 0; i < numMines; i++) {
            let row, col;
            do {
                row = Math.floor(Math.random() * numRows);
                col = Math.floor(Math.random() * numCols);
            } while (mines.some(mine => mine.row === row && mine.col === col));
            mines.push({row, col});
        }
    }

مهمترین تابع handleCellClick است که کلیک کاربر را مدیریت میکند

    function handleCellClick(event) {
        const cell = event.target;
        const row = parseInt(cell.dataset.row);
        const col = parseInt(cell.dataset.col);
        if (mines.some(mine => mine.row === row && mine.col === col)) {
            cell.style.backgroundColor = "red";
            revealMines();
            alert("Game Over!");
        } else {
            const mineCount = countNeighboringMines(row, col);
            cell.textContent = mineCount;
            if (document.querySelectorAll(".cell:not([style*='background-color: red'])").length === numMines) {
                alert("You Win!");
            }
        }
        cell.removeEventListener("click", handleCellClick);
    }

سپس با کد زیر میتوانیم تعداد مین های اطراف یک خانه را بدست آوریم

  function countNeighboringMines(row, col) {
        let count = 0;
        for (let dr = -1; dr <= 1; dr++) {
            for (let dc = -1; dc <= 1; dc++) {
                const newRow = row + dr;
                const newCol = col + dc;
                if (newRow >= 0 && newRow < numRows && newCol >= 0 && newCol < numCols) {
                    if (mines.some(mine => mine.row === newRow && mine.col === newCol)) {
                        count++;
                    }
                }
            }
        }
        return count;
    }

در نهایت تابع زیر در صورتی که کاربر بر روی بمب کلیک کند تمام بمب ها را نمایش میدهد

    function revealMines() {
        mines.forEach(mine => {
            const cell = document.querySelector(`.cell[data-row='${mine.row}'][data-col='${mine.col}']`);
            cell.textContent = "B";
        });
    }

یادمان نرود برای شروع بازی باید تابع initializeBoard را صدا بزنیم. 

initializeBoard();

تا اینجا باید توانسته باشید که یک صفحه HTML ایجاد کنید که یک تخته بازی MineSweeper با 10 ردیف و 10 ستون و 20 مین ایجاد می‌کند. شما می‌توانید تعداد ردیف‌ها، ستون‌ها و مین‌ها را تغییر دهید تا اندازه تخته بازی را تغییر دهید.

نتیجه گیری:

در این مقاله، ما به نوشتن بازی مینروب با استفاده از جاوا اسکریپت پرداختیم. این پروژه به عنوان یک مثال ساده برای شروع نوشتن بازی‌های وب مینروب ایجاد شد. این پروژه شامل یک صفحه وب ساده با یک مشبک 10x10 بود که با استفاده از HTML، CSS، و جاوا اسکریپت ساخته شد.

نکات کلیدی:

1. ما از CSS Grid برای ایجاد مشبک بازی استفاده کردیم تا مربع‌های بازی را در یک شبکه منظم قرار دهیم.

2. از توابع جاوا اسکریپت برای تولید مربع‌های بازی و ساخت رندم بمب‌ها استفاده کردیم.

3. توسعه بازی مینروب به توابعی نیاز دارد که قوانین بازی را پیاده‌سازی کنند و بازی را کنترل کنند. این توابع باید اعداد و بمب‌ها را در مربع‌ها قرار دهند و واکشی داده‌ها را انجام دهند.

نوشتن یک بازی مینروب کامل و پیچیده‌تر نیاز به توانایی‌های برنامه‌نویسی پیشرفته و آشنایی با مفاهیم مختلف مانند الگوریتم‌ها و مدیریت حالت بازی دارد. سورس کد این بازی را میتوانید دانلود کنید و همچنین می‌توانید با استفاده از کتابخانه‌های مختلف وب مانند بوت استرپ ، تجربه کاربری (UX) و رابط کاربری (UI) بهتری برای بازی ایجاد کنید.