آموزش توسعه بازی‌های ساده با استفاده از جاوا اسکریپت و Canvas API: راهنمای گام به گام

توسعه بازی‌های ساده با استفاده از جاوا اسکریپت و Canvas API یکی از بهترین راه‌ها برای یادگیری مفاهیم پایه‌ای بازی‌سازی و تعاملات بصری است. Canvas API به شما امکان می‌دهد که با استفاده از جاوا اسکریپت گرافیک‌های دو بعدی ایجاد کنید و آن‌ها را به صورت بلادرنگ تغییر دهید. این تکنولوژی در توسعه بازی‌های ساده و تعاملی بسیار مفید است. در این مقاله، به بررسی اصول توسعه بازی‌های ساده با استفاده از جاوا اسکریپت و Canvas API می‌پردازیم.

اهداف این مقاله:

• معرفی Canvas API و نحوه استفاده از آن

• پیاده‌سازی بازی‌های ساده و تعاملی

• مدیریت انیمیشن و حرکت در بازی‌ها

• نکات بهینه‌سازی برای عملکرد بهتر بازی‌ها

Canvas API چیست؟

Canvas API یک عنصر HTML5 است که به شما اجازه می‌دهد تا گرافیک‌های دو بعدی را با استفاده از جاوا اسکریپت در صفحات وب ترسیم کنید. این عنصر به شما امکان می‌دهد که پیکسل‌ها، خطوط، اشکال و تصاویر را رسم کرده و آن‌ها را در طول زمان تغییر دهید. Canvas یک بوم (canvas) برای ترسیم و انیمیشن‌سازی محتوای گرافیکی است که به صورت راست‌گرا (imperative) کنترل می‌شود.

ویژگی‌های کلیدی Canvas API:

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

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

• مدیریت برخوردها: قابلیت تشخیص برخورد بین اشیاء برای ایجاد تعاملات در بازی‌ها.

• ترسیم تصاویر و متن: می‌توانید تصاویر و متن‌ها را نیز روی بوم رسم کنید.

گام اول: تنظیم Canvas برای شروع

برای شروع کار با Canvas API، ابتدا باید یک عنصر < canvas > در HTML خود ایجاد کنید. این عنصر به شما یک بوم برای ترسیم گرافیک‌ها می‌دهد.

ایجاد فایل HTML

در یک فایل HTML، یک عنصر < canvas > اضافه کنید و آن را با استفاده از جاوا اسکریپت مدیریت کنید:

< ! DOCTYPE html >
< html lang="fa" >
< head >
    < meta charset="UTF-8">
    < meta name="viewport" content="width=device-width, initial-scale=1.0" >
    < title > بازی ساده با Canvas < / title >
    < style >
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        canvas {
            border: 2px solid black;
        }
    < / style >
< / head >
< body >
    < canvas id="gameCanvas" width="800" height="600" > < / canvas >

    < script src="game.js" > < / script >
< / body >
< / html >

توضیحات HTML:

• عنصر < canvas >: بوم (canvas) جایی است که گرافیک‌های بازی شما در آن رسم می‌شود. در این مثال، عرض بوم 800 پیکسل و ارتفاع آن 600 پیکسل است.

• CSS: بوم در مرکز صفحه قرار گرفته و با یک خط حاشیه سیاه مشخص شده است.

• اسکریپت جاوا اسکریپت: فایل جاوا اسکریپت که بازی در آن نوشته می‌شود در فایل game.js قرار دارد.

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

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

تنظیم بوم و کانتکست

ابتدا باید بوم را از HTML دریافت کرده و context آن را تعریف کنیم. Context در واقع رابطی است که برای ترسیم اشکال استفاده می‌شود.

// game.js
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');

رسم مستطیل

با استفاده از متد fillRect می‌توان یک مستطیل روی بوم رسم کرد. این متد چهار پارامتر می‌پذیرد: مختصات x و y، عرض و ارتفاع مستطیل.

// رسم یک مستطیل
ctx.fillStyle = 'blue';
ctx.fillRect(50, 50, 100, 100);

رسم دایره

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

// رسم یک دایره
ctx.beginPath();
ctx.arc(300, 300, 50, 0, Math.PI * 2, false);
ctx.fillStyle = 'red';
ctx.fill();
ctx.closePath();

گام سوم: ساخت بازی ساده

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

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

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

let x = canvas.width / 2;
let y = canvas.height / 2;
let dx = 2; // سرعت در محور X
let dy = 2; // سرعت در محور Y
let ballRadius = 20;

ساخت تابع رسم توپ

تابعی برای رسم توپ روی بوم تعریف می‌کنیم.

function drawBall() {
    ctx.beginPath();
    ctx.arc(x, y, ballRadius, 0, Math.PI * 2, false);
    ctx.fillStyle = 'green';
    ctx.fill();
    ctx.closePath();
}

ساخت حلقه انیمیشن

برای ایجاد انیمیشن، باید توپ به طور مداوم در بوم حرکت کند. با استفاده از requestAnimationFrame می‌توانیم حرکت توپ را به صورت روان و پیوسته انجام دهیم.

function update() {
    ctx.clearRect(0, 0, canvas.width, canvas.height); // پاک کردن بوم

    drawBall();

    // تغییر جهت توپ هنگام برخورد با دیواره‌ها
    if (x + dx > canvas.width - ballRadius || x + dx < ballRadius) {
        dx = -dx;
    }
    if (y + dy > canvas.height - ballRadius || y + dy < ballRadius) {
        dy = -dy;
    }

    // حرکت توپ
    x += dx;
    y += dy;

    requestAnimationFrame(update); // ادامه انیمیشن
}

اجرای بازی

برای شروع بازی، کافی است تابع update را فراخوانی کنیم.

update();

گام چهارم: افزودن تعاملات کاربر

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

مدیریت رویدادهای صفحه کلید

با استفاده از رویدادهای keydown و keyup می‌توانیم تشخیص دهیم که کاربر کدام کلید را فشرده است.

let rightPressed = false;
let leftPressed = false;
let upPressed = false;
let downPressed = false;

document.addEventListener('keydown', keyDownHandler);
document.addEventListener('keyup', keyUpHandler);

function keyDownHandler(e) {
    if (e.key == "Right" || e.key == "ArrowRight") {
        rightPressed = true;
    }
    else if (e.key == "Left" || e.key == "ArrowLeft") {
        leftPressed = true;
    }
    else if (e.key == "Up" || e.key == "ArrowUp") {
        upPressed = true;
    }
    else if (e.key == "Down" || e.key == "ArrowDown") {
        downPressed = true;
    }
}

function keyUpHandler(e) {
    if (e.key == "Right" || e.key == "ArrowRight") {
        rightPressed = false;
    }
    else if (e.key == "Left" || e.key == "ArrowLeft") {
        leftPressed = false;
    }
    else if (e.key == "Up" || e.key == "ArrowUp") {
        upPressed = false;
    }
    else if (e.key == "Down" || e.key == "ArrowDown") {
        downPressed = false;
    }
}

اضافه کردن حرکت با کلیدهای جهت‌دار

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

function update() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    drawBall();

    if (rightPressed && x < canvas.width - ballRadius) {
        x += 2;
    }
    if (leftPressed && x > ballRadius) {
        x -= 2;
    }
    if (upPressed && y > ballRadius) {
        y -= 2;
    }
    if (downPressed && y < canvas.height - ballRadius) {
        y += 2;
    }

    requestAnimationFrame(update);
}

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

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

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

• استفاده از requestAnimationFrame: برای ایجاد انیمیشن‌های روان، همیشه از requestAnimationFrame به جای setInterval یا setTimeout استفاده کنید. این روش تضمین می‌کند که انیمیشن‌ها با نرخ فریم مناسب و هماهنگ با مرورگر اجرا شوند.

• مدیریت برخوردها: در بازی‌های پیچیده‌تر، باید برخورد بین اشیاء را بهینه مدیریت کنید تا از کند شدن بازی جلوگیری شود.

نتیجه‌گیری

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