ایجاد بازی مار ( snake ) با جاوا اسکریپت

با ساخت بازی مار با جاوا اسکریپت، شما به یک ماجرای مفهومی و جذاب در دنیای برنامه‌نویسی و بازی‌سازی وارد می‌شوید. این بازی ساده اما سرگرم‌کننده، مهارت‌های برنامه‌نویسی شما را به چالش می‌کشد و به شما امکان می‌دهد تا بازی‌های خود را به شکل خلاقانه‌تری طراحی کنید. 

در این بازی، شما به یک دنیای مجازی وارد می‌شوید که در آن مار کوچکی به اندازه‌گیری آغاز می‌کند. هدف اصلی شما این است که این مار را به یک مار بزرگ تبدیل کرده و به عنوان یک بازیکن با مهارت در سرزمین مارها شناخته شوید.

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

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

بنابراین، شروع به ساخت بازی مار با جاوا اسکریپت کنید، به تجربه‌های جذاب برنامه‌نویسی و بازی‌سازی خود رنگ دهید و دنیای شگفت‌انگیزی از بازی‌های خود را ایجاد کنید. این یک سفر هیجان‌انگیز و خلاقانه خواهد بود که شما را به دنیای جذابی از کدنویسی و تفریح هدایت می‌کند.

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

محیط بازی را ایجاد کنید: ابتدا یک صفحه بازی با مشخصات خود (مانند ابعاد و اندازه‌ی خانه‌ها) را تعریف کنید. در اینجا از یک مشتری HTML برای نمایش بازی استفاده می‌کنیم.

تعریف مار: مار را به صورت یک آرایه از مکان‌ها (تعداد خانه‌ها) تعریف کنید. به عنوان مثال، می‌توانید مار را با یک مکان اولیه و یک جهت حرکت ابتدایی تعریف کنید.

رسم مار و غذا: مار را با توجه به مکان‌های آن در صفحه بازی رسم کنید. همچنین یک مکان برای غذا تعریف کنید و آن را در صفحه بازی نمایش دهید.

حرکت مار: با استفاده از یک تایمر (مثلاً setInterval)، مار را به فاصله‌های زمانی مشخص به ازای هر مرحله حرکت دهید. برای این منظور مکان جدید سر مار را محاسبه کنید و بررسی کنید که آیا به دیوار یا به غذا برخورد کرده است.

بررسی شرایط بازی: در هر مرحله، بررسی کنید که آیا مار به دیوار برخورده است یا به غذا دست یافته است. اگر به دیوار برخورد کرد، بازی تمام می‌شود و بازیکن باخته است. اگر به غذا دست یافت، طول مار افزایش می‌یابد و مکان جدیدی برای غذا تعیین می‌شود.

تغییر جهت حرکت: با توجه به ورودی کاربر (مانند کلیدهای فشرده شده)، جهت حرکت مار را تغییر دهید.

تازه‌سازی صفحه بازی: در هر مرحله، صفحه بازی را تازه‌سازی کنید تا مار، غذا و وضعیت جدید نمایش داده شوند.

ادامه بازی: تا زمانی که شرایط بازی تمام نشده‌اند، ادامه بازی دهید. این معمولاً با تکرار توابع مربوط به حرکت مار و بررسی شرایط بازی انجام می‌شود.

پایان بازی: وقتی شرایط پایان بازی (برخورد مار با دیوار یا تصمیم بازیکن به پایان بازی) برقرار شود، بازی را پایان دهید و امتیاز بازیکن را نمایش دهید.

ابتدا کد های CSS مربوط به صفحه بازی و مار و غذا را مینویسیم. توجه کنید که کد های CSS در تگ style  قرار میگیرند

#gameArea {
      width: 400px;
      height: 400px;
      background-color: black;
      position: relative;
}

.snake {
      width: 20px;
      height: 20px;
      background-color: green;
      position: absolute;
 }

#food {
      width: 20px;
      height: 20px;
      background-color: red;
      position: absolute;
}

تعریف متغییر های اولیه

const gameArea = document.getElementById('gameArea');
const snake = [{ x: 100, y: 100 }];
const food = { x: 200, y: 200 };
const blockSize = 20;
const speed = 1000; 
let direction = 'right';

createSnake(): این تابع برای ایجاد و نمایش مار در محیط بازی استفاده می‌شود. برای هر قطعه از مار، یک عنصرایجاد می‌کند و آن را به محیط بازی اضافه می‌کند. هر قطعه از مار به صورت یک div با کلاس "snake" ایجاد می‌شود.

function createSnake() {
        for (let i = 0; i < snake.length; i++) {
            const segment = document.createElement('div');
            segment.classList.add('snake');
            segment.style.left = snake[i].x + 'px';
            segment.style.top = snake[i].y + 'px';
            gameArea.appendChild(segment);
        }
    }

updateGameArea(): این تابع در هر مرحله از بازی فراخوانده می‌شود تا وضعیت بازی را بروز کند. در این تابع:

جهت جدید حرکت مار محاسبه می‌شود با توجه به کلیدهای کلیدی که توسط کاربر فشرده شده‌اند.

بررسی می‌شود که آیا مار به دیوار برخورده یا به غذا دست یافته است.

مکان جدید سر مار محاسبه می‌شود و قسمت پایین مار حذف می‌شود.

با استفاده از setTimeout، تابع به صورت بازگشتی و به فاصله‌های زمانی کوتاهتر بازخوانی می‌شود تا بازی به طور مستمر به‌روزرسانی شود.

function updateGameArea() {
        let newHeadX = snake[0].x;
        let newHeadY = snake[0].y;
        switch (direction) {
            case 'up':
                newHeadY -= blockSize;
                break;
            case 'down':
                newHeadY += blockSize;
                break;
            case 'left':
                newHeadX -= blockSize;
                break;
            case 'right':
                newHeadX += blockSize;
                break;
        }
        // Check for collisions with walls
        if (newHeadX < 0 || newHeadX >= gameArea.clientWidth || newHeadY < 0 || newHeadY >= gameArea.clientHeight) {
            alert('Game Over! You hit the wall.');
            return;
        }
        // Check for collisions with food
        if (newHeadX === food.x && newHeadY === food.y) {
            snake.unshift({ x: newHeadX, y: newHeadY });
            food.x = Math.floor(Math.random() * (gameArea.clientWidth / blockSize)) * blockSize;
            food.y = Math.floor(Math.random() * (gameArea.clientHeight / blockSize)) * blockSize;
        } else {
            snake.pop();
            snake.unshift({ x: newHeadX, y: newHeadY });
        }
        // Clear the game area
        gameArea.innerHTML = '';
        // Draw the snake
        createSnake();
        // Draw the food
        const foodElement = document.createElement('div');
        foodElement.id = 'food';
        foodElement.style.left = food.x + 'px';
        foodElement.style.top = food.y + 'px';
        gameArea.appendChild(foodElement);
        // Update the game loop
        setTimeout(updateGameArea, speed);
}

document.addEventListener('keydown', (event) => { /* ... */ }): این تابع برای شنیدن واژه‌های کلیدی که توسط کاربر فشرده می‌شوند و تغییر جهت حرکت مار استفاده می‌شود. وقتی کاربر یک کلید جهتی (فوق، پایین، چپ یا راست) فشرده می‌کند، جهت حرکت مار به تابع updateGameArea منتقل می‌شود.

document.createElement('div'): این تابع برای ایجاد یک عنصر

appendChild(element): این تابع برای افزودن یک عنصر به داخل یک عنصر والد (در اینجا به محیط بازی) استفاده می‌شود. این تابع برای اضافه کردن مار و غذا به محیط بازی استفاده می‌شود.

// Event listener for keyboard input
document.addEventListener('keydown', (event) => {
        switch (event.key) {
            case 'ArrowUp':
                if (direction !== 'down') direction = 'up';
                break;
            case 'ArrowDown':
                if (direction !== 'up') direction = 'down';
                break;
            case 'ArrowLeft':
                if (direction !== 'right') direction = 'left';
                break;
            case 'ArrowRight':
                if (direction !== 'left') direction = 'right';
                break;
        }
});

createSnake();
updateGameArea();

امیدوارم از این آموزش لذت برده باشید