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

کد تتریس در جاوا اسکریپت: راهنمای کامل و جامع

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

ساختار کلی بازی تتریس در جاوا اسکریپت

برای شروع، باید بدانیم که ساختار کلی بازی تتریس شامل چند بخش اصلی است:
1. صفحه بازی (Board): جایی که قطعات روی آن قرار می‌گیرند و بازی ادامه می‌یابد.
2. قطعات (Tetrominoes): قطعات مختلف با اشکال متفاوت که باید در صفحه قرار بگیرند.
3. گرافیک و طراحی (Rendering): نمایش صفحه و قطعات در مرورگر.
4. مدیریت رویدادها (Event Handling): کنترل حرکت، چرخش و سقوط قطعات.
5. منطق بازی (Game Logic): بررسی خطوط کامل، حذف خطوط، افزایش سطح و امتیازگیری.
6. حالت پایان بازی (Game Over): زمانی که فضای صفحه پر می‌شود و بازی تمام می‌شود.
در ادامه، هر بخش را به تفصیل شرح می‌دهیم و نمونه‌های کد مربوطه را بررسی می‌کنیم.

ساختار صفحه بازی

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

javascript  

const rows = 20;

const cols = 10;

let board = Array.from({ length: rows }, () => Array(cols).fill(0));

در اینجا، آرایه `board` نمایانگر صفحه است. مقدار صفر نشان‌دهنده خانه خالی است و هر عدد دیگر نشان‌دهنده نوع قطعه یا حالت اشغال شده است.

ساختن قطعات (Tetrominoes)

قطعات تتریس شامل اشکال مختلف هستند، مانند I، O، T، S، Z، J، L. هر کدام از این اشکال، مجموعه‌ای از مختصات یا ماتریس‌های 4x4 دارند که نشان می‌دهد چگونه در صفحه قرار می‌گیرند.
برای مثال، ساختار قطعه T:

javascript  

const TShape = [

  [0, 1, 0],

  [1, 1, 1],

  [0, 0, 0]

];

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

رندر کردن بازی در مرورگر

برای نمایش بازی، معمولا از عنصر `<canvas>` در HTML استفاده می‌شود. پس باید در فایل HTML، یک عنصر canvas تعریف کنیم:

html  

<canvas id="tetris" width="240" height="400"></canvas>

در فایل جاوا اسکریپت، باید این عنصر را بگیریم و برای رسم، از `getContext('2d')` استفاده کنیم:

javascript  

const canvas = document.getElementById('tetris');

const context = canvas.getContext('2d');

context.scale(20, 20); // برای بزرگ‌نمایی هر خانه  

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

javascript  

function drawBoard() {

  for (let y = 0; y < rows; y++) {

    for (let x = 0; x < cols; x++) {

      if (board[y][x] !== 0) {

        context.fillStyle = 'blue'; // رنگ قطعه  

        context.fillRect(x, y, 1, 1);

      } else {

        context.fillStyle = 'white'; // خانه خالی  

        context.fillRect(x, y, 1, 1);

      }

    }

  }

}

کنترل حرکت و چرخش قطعات

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

javascript  

document.addEventListener('keydown', event => {

  if (event.keyCode === 37) {

    // حرکت به چپ  

  } else if (event.keyCode === 39) {

    // حرکت به راست  

  } else if (event.keyCode === 40) {

    // سقوط سریع  

  } else if (event.keyCode === 38) {

    // چرخش  

  }

});

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

منطق بازی و سقوط قطعه‌ها

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

javascript  

let dropInterval = setInterval(drop, 1000);
function drop() {

  // بررسی اینکه آیا امکان سقوط وجود دارد  

  // اگر امکان دارد، قطعه را پایین‌تر حرکت می‌دهیم  

  // در غیر این صورت، قطعه تثبیت می‌شود و خط کامل بررسی می‌شود  

}

وقتی قطعه در پایین صفحه قرار می‌گیرد، باید آن را به صفحه ثابت کنیم و یک قطعه جدید ایجاد کنیم.

چک کردن خطوط کامل و حذف آن‌ها

وقتی قطعه تثبیت شد، باید خطوط کامل را پیدا کنیم. این کار با بررسی هر ردیف انجام می‌شود:

javascript  

function sweepLines() {

  for (let y = 0; y < rows; y++) {

    if (board[y].every(cell => cell !== 0)) {

      // خط کامل است، حذف می‌شود  

      // ردیف‌های بالای آن به پایین می‌آیند  

    }

  }

}

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

پایان بازی و بازی مجدد

زمانی که فضای صفحه پر می‌شود و قطعه جدید نمی‌تواند ظهور کند، بازی پایان یافته است. باید پیام پایان بازی نمایش داده شده و گزینه‌ای برای شروع مجدد وجود داشته باشد.

javascript  

function gameOver() {

  alert('Game Over!');

  clearInterval(dropInterval);

}

نکات مهم و چالش‌ها

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

نتیجه‌گیری

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