تگ های موضوع بازی با جاوا اسکریپت

بازی 2048 با جاوا اسکریپت: راهنمای کامل و جامع

بازی 2048 یکی از محبوب‌ترین و جذاب‌ترین بازی‌های پازلی است که در سال 2014 توسط توسعه‌دهنده‌ای به نام گابریل سیگل (Gabriele Cirulli) ساخته شد. این بازی به سرعت محبوبیت زیادی کسب کرد و به عنوان یک چالش ذهنی و تمرینی برای تقویت تمرکز، استراتژی و مهارت‌های حل مسئله شناخته شد. در این مقاله، قصد داریم به طور جامع و کامل به موضوع ساخت و پیاده‌سازی بازی 2048 با زبان برنامه‌نویسی جاوا اسکریپت بپردازیم.
در حقیقت، جاوا اسکریپت، زبان برنامه‌نویسی سمت کلاینت است که در ساخت بازی‌های تعاملی وب بسیار کاربرد دارد. توسعه‌دهندگان، این بازی را به عنوان نمونه‌ای عالی برای یادگیری مفاهیم اصلی برنامه‌نویسی، مدیریت رویدادها، و طراحی رابط کاربری در محیط وب استفاده می‌کنند. حال، بیایید با هم به بخش‌های مختلف این فرآیند بپردازیم، از طراحی ساختار داده‌ها گرفته تا پیاده‌سازی واسط کاربری.

ساختار داده‌های بازی

در بازی 2048، صفحه بازی به صورت یک جدول 4 در 4 نمایش داده می‌شود. بنابراین، یکی از مهم‌ترین بخش‌ها، تعریف ساختار داده‌ای است که وضعیت فعلی صفحه را نگهداری کند. معمولاً، این ساختار به صورت یک آرایه دو بعدی یا یک آرایه یک بعدی با 16 عنصر تعریف می‌شود.
برای مثال، می‌توان یک آرایه یک بعدی با طول 16 در نظر گرفت، که هر عنصر نشان‌دهنده یک خانه در جدول است. مقدار هر عنصر یا صفر است (که نشان‌دهنده خانه خالی است) یا عددی توان 2، مانند 2، 4، 8، 16، و غیره، که نشان‌دهنده ارزش هر خانه است.
این ساختار به صورت زیر تعریف می‌شود:

javascript  

let board = [0, 0, 0, 0,

             0, 0, 0, 0,

             0, 0, 0, 0,

             0, 0, 0, 0];

در ابتدا، بازی با دو عدد تصادفی 2 یا 4 شروع می‌شود. این اعداد در خانه‌های تصادفی قرار می‌گیرند تا بازی شروع شود.

تولید اعداد تصادفی

یکی از وظایف مهم در بازی، تولید اعداد تصادفی است. هر بار که کاربر یک حرکت انجام می‌دهد، باید یک عدد جدید (معمولاً 2 یا 4) در یکی از خانه‌های خالی قرار گیرد. این کار به صورت زیر انجام می‌شود:
1. پیدا کردن خانه‌های خالی در آرایه.
2. انتخاب تصادفی یکی از این خانه‌ها.
3. قرار دادن عدد 2 یا 4 در آن خانه، با احتمال 90% برای 2 و 10% برای 4.
کد نمونه برای انجام این کار:

javascript  

function generateNumber() {

    const emptyIndices = [];

    for (let i = 0; i < board.length; i++) {

        if (board[i] === 0) {

            emptyIndices.push(i);

        }

    }

    if (emptyIndices.length === 0) return; // بازی تمام شده است
const randomIndex = emptyIndices[Math.floor(Math.random() * emptyIndices.length)];

    const newNumber = Math.random() < 0.9 ? 2 : 4;

    board[randomIndex] = newNumber;

}

حرکت و ادغام اعداد

یکی از مهم‌ترین بخش‌های بازی، مدیریت حرکت اعداد و ادغام آن‌ها است. در بازی 2048، کاربر می‌تواند صفحه را به سمت چپ، راست، بالا یا پایین حرکت دهد. هر حرکت، باید:
- خانه‌های خالی را کنار بزند.
- اعداد قابل ادغام را در صورت برخورد، ترکیب کند.
- پس از هر حرکت، یک عدد جدید در صفحه ظاهر شود.
برای مثال، اگر کاربر کلید سمت چپ را فشار دهد، باید تمامی اعداد به سمت چپ حرکت کنند و در صورت تکرار، اعداد هم‌ارز در کنار هم ادغام شوند. این فرآیند به صورت جداگانه برای هر جهت انجام می‌شود، اما در نهایت، الگوریتم کلی یکسان است.
یک نمونه ساده برای حرکت به سمت چپ:

javascript  

function slideLeft() {

    for (let row = 0; row < 4; row++) {

        let currentRow = [];

        // جمع‌آوری مقادیر غیر صفر در هر ردیف  

        for (let col = 0; col < 4; col++) {

            const value = board[row * 4 + col];

            if (value !== 0) currentRow.push(value);

        }

        // ادغام اعداد  

        for (let i = 0; i < currentRow.length - 1; i++) {

            if (currentRow[i] === currentRow[i + 1]) {

                currentRow[i] *= 2;

                currentRow.splice(i + 1, 1);

            }

        }

        // پر کردن با صفرهای باقی‌مانده  

        while (currentRow.length < 4) {

            currentRow.push(0);

        }

        // به‌روزرسانی آرایه اصلی  

        for (let col = 0; col < 4; col++) {

            board[row * 4 + col] = currentRow[col];

        }

    }

}

همین منطق باید برای حرکت به سمت راست، بالا و پایین توسعه یابد، با تغییر در جهت‌های مورد نیاز.

رابط کاربری و نمایش بازی

برای نمایش جدول، از عناصر HTML و CSS بهره می‌گیریم. معمولاً، یک `<div>` برای هر خانه ساخته می‌شود و با استفاده از جاوا اسکریپت، محتوای آن به‌روزرسانی می‌شود. برای نمونه:

html  

<div id="game-board">

    <div class="tile" id="tile-0"></div>

    ...

    <div class="tile" id="tile-15"></div>

</div>

در CSS، این خانه‌ها به صورت جدول طراحی می‌شوند، با رنگ‌های مناسب برای هر ارزش، و فونت زیبا برای اعداد.
در جاوا اسکریپت، باید هر بار که وضعیت صفحه تغییر می‌کند، DOM عناصر مربوطه را با مقادیر جدید به‌روز کنیم:

javascript  

function updateBoard() {

    for (let i = 0; i < board.length; i++) {

        const tile = document.getElementById(`tile-${i}`);

        if (board[i] === 0) {

            tile.innerText = '';

            tile.style.backgroundColor = '#cdc1b4'; // رنگ خانه خالی  

        } else {

            tile.innerText = board[i];

            // تغییر رنگ بر اساس مقدار  

            tile.style.backgroundColor = getColorForValue(board[i]);

        }

    }

}

ایجاد تابع `getColorForValue()` برای اختصاص رنگ‌های متنوع به اعداد مختلف، ظاهر بازی را جذاب‌تر می‌کند.

مدیریت رویدادهای کاربر

برای کنترل حرکت‌ها، باید رویدادهای کلید صفحه کلید را مدیریت کنیم:

javascript  

document.addEventListener('keydown', function(event) {

    switch (event.key) {

        case 'ArrowLeft':

            moveLeft();

            break;

        case 'ArrowRight':

            moveRight();

            break;

        case 'ArrowUp':

            moveUp();

            break;

        case 'ArrowDown':

            moveDown();

            break;

    }

    generateNumber();

    updateBoard();

    if (isGameOver()) {

        alert('Game Over!');

    }

});

در اینجا، توابع `moveLeft()`, `moveRight()`, و غیره، همان الگوریتم‌های حرکت را پیاده‌سازی می‌کنند.

بررسی پایان بازی

برای تشخیص پایان بازی، باید بررسی کنیم که آیا هیچ حرکتی امکان‌پذیر است یا نه. اگر تمامی خانه‌ها پر شده باشند و ادغام ممکن نباشد، بازی تمام شده است.

javascript  

function isGameOver() {

    for (let i = 0; i < board.length; i++) {

        if (board[i] === 0) return false;

        // بررسی ادغام در جهت‌های مختلف  

        // ...

    }

    return true;

}

نتیجه‌گیری و نکات مهم

در پایان، ساخت بازی 2048 با جاوا اسکریپت، نیازمند ترکیبی از مدیریت ساختارهای داده، الگوریتم‌های حرکت و ادغام، و طراحی رابط کاربری جذاب است. این پروژه، در عین حال، تمرینی عالی برای توسعه مهارت‌های برنامه‌نویسی، کار با رویدادها، و کار با DOM در محیط وب محسوب می‌شود. علاوه بر این، می‌توان ویژگی‌های بیشتری مانند امتیازدهی، ذخیره‌سازی وضعیت بازی، و اضافه کردن انیمیشن‌های جذاب را به آن افزود تا تجربه کاربری بهتری ارائه دهد.
در نتیجه، توسعه این بازی، نه تنها یک تمرین فنی است، بلکه فرصتی است برای خلاقیت و بهبود مهارت‌های برنامه‌نویسی در حوزه طراحی بازی‌های وب. بنابراین، اگر قصد دارید وارد دنیای برنامه‌نویسی بازی‌های تعاملی شوید، ساختن و توسعه بازی 2048 با جاوا اسکریپت، نقطه شروع بسیار عالی است.