مارکت

نمونه بازی ساده شطرنج دو نفره با استفاده از جاوا اسکریپت

در دنیای توسعه وب و برنامه‌نویسی، ساختن بازی‌های تعاملی و جذاب، به ویژه بازی‌های استراتژیک مانند شطرنج، همیشه مورد توجه توسعه‌دهندگان قرار گرفته است. یکی از محبوب‌ترین زبان‌های برنامه‌نویسی که برای ساختن این نوع بازی‌ها به کار می‌رود، جاوا اسکریپت است. جاوا اسکریپت، زبانی قدرتمند و انعطاف‌پذیر است که امکان ساخت بازی‌های تعاملی در مرورگرهای وب را فراهم می‌کند. در این مقاله، قصد داریم یک نمونه بازی ساده شطرنج دو نفره را با استفاده از جاوا اسکریپت به صورت جامع و کامل شرح دهیم.
مقدمه‌ای بر ساخت بازی شطرنج در جاوا اسکریپت
بازی شطرنج، یک بازی استراتژیک و پیچیده است که نیازمند طراحی واسط کاربری کارآمد، منطق بازی صحیح و کنترل دقیق رویدادهای کاربر است. در این پروژه، هدف ما ساخت یک نسخه ساده و قابل فهم است که دو بازیکن بتوانند به راحتی بازی کنند. در اینجا، تمرکز بر روی پایه‌های اصلی بازی است: طراحی صفحه، جایگذاری مهره‌ها، حرکت دادن مهره‌ها، و کنترل نوبت‌ها.
طراحی صفحه و ساختار HTML
ابتدا، باید یک صفحه HTML ساده بسازیم که صفحه بازی را نمایش می‌دهد. برای این منظور، از یک جدول (table) استفاده می‌کنیم که 8 در 8 خانه دارد. هر خانه، یک عنصر `<div>` یا `<td>` است که می‌تواند مهره‌های مختلف را نگه دارد. برچسب‌های CSS برای استایل دهی به خانه‌ها و مهره‌ها، ظاهر جذابی فراهم می‌کنند. برای مثال، خانه‌های سفید و سیاه به صورت متناوب رنگ‌آمیزی می‌شوند تا ظاهر استاندارد شطرنج حفظ شود.

html  

<table id="chessboard">

  <!-- خانه‌های جدول به صورت دینامیک ساخته می‌شود -->

</table>

در قسمت جاوا اسکریپت، با استفاده از حلقه‌ها، این جدول ساخته می‌شود و مهره‌ها در محل‌های اولیه قرار می‌گیرند. این کار به صورت خودکار انجام می‌شود تا بتوانیم به راحتی تغییرات مورد نیاز را اعمال کنیم.
ساختار داده‌ها و منطق بازی
برای مدیریت وضعیت بازی، از آرایه‌های چندبعدی استفاده می‌کنیم. این آرایه‌ها، هر خانه را نگه می‌دارند و نوع مهره موجود در آن، مانند "pawn", "rook", "knight"، به همراه رنگ آن، مشخص می‌شود. برای مثال، آرایه‌ای مانند `board[8][8]`، وضعیت هر خانه را نگهداری می‌کند.
در ادامه، باید قوانینی برای حرکت مهره‌ها تعریف کنیم. هر مهره، حرکت خاص خودش را دارد. برای مثال، پیاده تنها می‌تواند یک خانه جلو برود، اما اسب (knight) به صورت "L" حرکت می‌کند. این قوانین در قالب توابع جداگانه نوشته می‌شوند که بررسی می‌کنند حرکت داده شده، قانونی است یا خیر.
رویدادهای کاربر و تعامل در بازی
در قسمت تعامل، باید رویدادهای کلیک بر روی خانه‌ها را مدیریت کنیم. وقتی کاربر روی خانه‌ای کلیک می‌کند، برنامه بررسی می‌کند که آیا این خانه حاوی مهره است یا نه. اگر مهره‌ای وجود دارد و نوبت بازیکن است، گزینه‌های حرکت ممکن برای آن مهره نمایش داده می‌شوند. این کار با افزودن استایل‌های خاص، مانند حاشیه‌های رنگی، انجام می‌شود.
علاوه بر این، وقتی کاربر روی خانه‌ای که حرکت‌پذیر است کلیک می‌کند، مهره به آن مکان منتقل می‌شود، وضعیت آرایه بازی به‌روز می‌شود، و نوبت تغییر می‌کند. این روند، تکرار می‌شود تا بازی پایان یابد.
مدیریت نوبت‌ها و وضعیت بازی
برای مدیریت نوبت‌ها، از یک متغیر نگه می‌داریم که مشخص می‌کند نوبت چه بازیکنی است. مثلا، `currentPlayer = 'white'` یا `'black'`. در هر حرکت، پس از تکمیل، این متغیر تغییر می‌کند و نوبت به دیگری می‌رسد. این کار، از طریق کنترل شرط‌ها و شرط‌های موجود در کد انجام می‌شود.
رعایت قوانین خاص و کشف وضعیت بازی
در این نمونه، ما قوانین پیچیده مانند اعلان پیروزی، کشته شدن شاه، یا موارد خاص مانند "روک" یا "پیاده‌رو" را ساده‌سازی کرده‌ایم. اما، برای ساختن یک بازی کامل، باید این قوانین را توسعه داد و رویدادهای مربوط به آن‌ها را مدیریت کرد. برای نمونه، وقتی شاه کشته می‌شود، بازی اعلام پایان می‌یابد.
استفاده از CSS برای ظاهر بازی
برای جذاب‌تر کردن بازی، از CSS بهره می‌گیریم. رنگ‌بندی خانه‌ها، حالت‌های هایلایت شده، رنگ‌های مهره‌ها، و انیمیشن‌های ساده، ظاهر بازی را جذاب و کاربرپسند می‌سازند. به عنوان مثال، مهره‌ها می‌توانند با عکس‌های کوچک نمایش داده شوند یا با نمادهای متنی.
کد نمونه و ساختار کلی
در ادامه، یک نمونه کد ساده آورده شده است که نشان می‌دهد چگونه جدول ساخته می‌شود، مهره‌ها قرار می‌گیرند، و رویدادهای کلیک مدیریت می‌شوند. این نمونه، پایه‌ای است که می‌توانید بر اساس نیازهای خود توسعه دهید.

javascript  

// ساخت جدول و مهره‌ها  

function createBoard() {

  const board = document.getElementById('chessboard');

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

    const tr = document.createElement('tr');

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

      const td = document.createElement('td');

      td.id = `cell-${row}-${col}`;

      td.style.backgroundColor = (row + col) % 2 === 0 ? 'white' : 'gray';

      td.addEventListener('click', () => handleCellClick(row, col));

      tr.appendChild(td);

    }

    board.appendChild(tr);

  }

  // قرار دادن مهره‌های اولیه  

  initializePieces();

}

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