آموزش برنامه‌نویسی بازی مار و نقطه فقط با HTML و JavaScript و CSS

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

در این مقاله با مراحل نوشتن یک بازی ساده به کمک جاوااسکریپت و مقداری HTML و CSS‌ در خدمت شما هستیم. با ما باشید تا طراحی وب را با مثال‌های جالب و واقعی یاد بگیریم.

با Notepad++ کدنویسی کنید

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

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

دانلود Notepad++ از سایت رسمی آن

ایجاد صفحه وب یا فایل html

ابتدا فایلی به اسم snake.html روی دستاپ ایجاد کنید و آن را با نوت‌پد پلاس پلاس باز کنید. در فایل ایجاد شده کدهای زیر را پیست کنید که شامل تگ head و body صفحه‌ی وب می‌شود.

<!DOCTYPE html>
<html>
  <head>
   <title>Snake Game</title>
  </head>
  
  <body>
  </body>
</html>

ایجاد پالت یا Canvas برای حرکت مار

برای ترسیم کردن عناصر گرافیکی در صفحه‌ی وب، به تگ canvas نیاز داریم. با توجه به اینکه در ادامه قرار است روی این تگ کار کنیم، به آن یک شناسه یا id مثل gameCanvas نیز می‌دهیم. بنابراین تگ مورد بحث این گونه خواهد بود:

<canvas id="gameCanvas" width="300" height="300"><canvas>

و آن را در بخش Body صفحه‌ی وب قرار می‌دهیم:

<!DOCTYPE html>
<html>
  <head>
   <title>Snake Game</title>
  </head>
  <body>
    <canvas id="gameCanvas" width="300" height="300"></canvas>
  </body>
</html>

البته می‌توانید بالای پالت یک جمله‌ی توضیحی مثل نام بازی نیز اضافه کنید:

<!DOCTYPE html>
<html>
  <head>
   <title>Snake Game</title>
  </head>
  <body>
  

<h1>بازی مار و نقطه‌ها</h1>


    <canvas id="gameCanvas" width="300" height="300"></canvas>
  </body>
</html>

ترسیم گرافیک در Canvas به کمک JavaScript

پالت ما در حال حاضر خالی است و باید آن را با محتوای گرافیکی پر کنیم. برای اینکه فایل مجزایی به همراه HTML بارگذاری نکنیم، می‌توانید کدهای جاوااسکریپت را نیز در فایل HTML اضافه کنیم. ابتدا تگ script را پس از Canvas اضافه کنید.

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

دستورات زیر را بین تگ script باز شده و بسته قرار دهید تا در ادامه توضیحات بیشتری در مورد آن بدهیم:

<!DOCTYPE html>
<html>
  <head>
   <title>Snake Game</title>
  </head>
  <body>
    <canvas id="gameCanvas" width="300" height="300"></canvas>
    
    <script>
      /** CONSTANTS **/
      const CANVAS_BORDER_COLOUR = 'black';
      const CANVAS_BACKGROUND_COLOUR = "white";
      
      // Get the canvas element
      var gameCanvas = document.getElementById("gameCanvas");
      // Return a two dimensional drawing context
      var ctx = gameCanvas.getContext("2d");
      //  Select the colour to fill the canvas
      ctx.fillStyle = CANVAS_BACKGROUND_COLOUR;
      //  Select the colour for the border of the canvas
      ctx.strokestyle = CANVAS_BORDER_COLOUR;
      // Draw a "filled" rectangle to cover the entire canvas
      ctx.fillRect(0, 0, gameCanvas.width, gameCanvas.height);
      // Draw a "border" around the entire canvas
      ctx.strokeRect(0, 0, gameCanvas.width, gameCanvas.height);
    </script>
  </body>
</html>

و اما دستورات استفاده شده از ابتدا تا انتها:

دو ثابت برای مشخص کردن رنگ دور پالت و رنگ پس‌زمینه‌ی پالت که سیاه و سفید است، تعریف شده است.
در ادامه برای یافتن پالت در صفحه، از getElementById("gameCanvas") استفاده شده که المانی با شناسه‌ی gameCanvas را پیدا می‌کند و این المان را در متغیر gameCanvas ذخیره می‌کنیم.
با توجه به اینکه پالت بازی ما از نوع ۲ بعدی است، از دستور gameCanvas.getContext("2d") برای دوبعدی کردن آن استفاده می‌کنیم و متغیر جدید ctx تعریف می‌شود.
در ادامه رنگ حاشیه و پس‌زمینه‌ی ctx با ثابت‌های تعریف‌شده در ابتدای کد مشخص می‌شود.
مرحله‌ی آخر ترسیم کردن مستطیلی با ابعاد معادل عرض و طول پالت است که آن را کاملاً می‌پوشاند. برای این کار از fillRect استفاده شده و مختصات نقطه‌ی شروع که ۰ و ۰ است و نقطه‌ی پایان که ۳۰۰ و ۳۰۰ است، به عنوان دو گوشه‌ی مستطیل ذکر شده است.
برای ترسیم حاشیه نیز از strokeRect استفاده می‌شود.

تعریف مختصات مار در پالت بازی

برای ترسیم مار، مختصات نقاط بدن مار را با یک آرایه‌ی ساده تعریف می‌کنیم. سر مار در مرکز پالت یعنی مختصات ۱۵۰ و ۱۵۰ است. بنابراین مختصه‌ی x نقاط قبلی را کمتر از ۱۵۰ در نظر می‌گیریم و در هر ۱۰ پیکسل یک نقطه تعریف می‌کنیم.

let snake = [
  {x: 150, y: 150},
  {x: 140, y: 150},
  {x: 130, y: 150},
  {x: 120, y: 150},
  {x: 110, y: 150},
];

مختصه‌ی y ثابت است و این یعنی مار در ابتدا افقی است.

ترسیم و ایجاد مار در پالت

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

با fillStyle رنگ را مشخص می‌کنیم و با strokestyle نوع خط حاشیه را مشخص می‌کنیم. با fillRect مربعی با نقطه‌ی شروع که یکی از نقاط بدن مار است و نقطه‌ی پایان که ۱۰ پیکسل در جهت x و y به راست و پایین حرکت کرده، رسم می‌کنیم.

function drawSnakePart(snakePart) {
  ctx.fillStyle = 'lightgreen';
  ctx.strokestyle = 'darkgreen';
  ctx.fillRect(snakePart.x, snakePart.y, 10, 10);
  ctx.strokeRect(snakePart.x, snakePart.y, 10, 10);
}

و مرحله‌ی دوم تکرار ترسیم مربع‌ها است:

function drawSnake() {
  snake.forEach(drawSnakePart);
}

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

<!DOCTYPE html>
<html>
  <head>
   <title>Snake Game</title>
  </head>
  <body>
    <canvas id="gameCanvas" width="300" height="300"></canvas>
    
    <script>
      /** CONSTANTS **/
      const CANVAS_BORDER_COLOUR = 'black';
      const CANVAS_BACKGROUND_COLOUR = "white";
      const SNAKE_COLOUR = 'lightgreen';
      const SNAKE_BORDER_COLOUR = 'darkgreen';
      
      let snake = [
        {x: 150, y: 150},
        {x: 140, y: 150},
        {x: 130, y: 150},
        {x: 120, y: 150},
        {x: 110, y: 150}
      ]
      
      // Get the canvas element
      var gameCanvas = document.getElementById("gameCanvas");
      // Return a two dimensional drawing context
      var ctx = gameCanvas.getContext("2d");
      //  Select the colour to fill the canvas
      ctx.fillStyle = CANVAS_BACKGROUND_COLOUR;
      //  Select the colour for the border of the canvas
      ctx.strokestyle = CANVAS_BORDER_COLOUR;
      // Draw a "filled" rectangle to cover the entire canvas
      ctx.fillRect(0, 0, gameCanvas.width, gameCanvas.height);
      // Draw a "border" around the entire canvas
      ctx.strokeRect(0, 0, gameCanvas.width, gameCanvas.height);
      drawSnake();
      
      /**
       * Draws the snake on the canvas
       */
      function drawSnake() {
        // loop through the snake parts drawing each part on the canvas
        snake.forEach(drawSnakePart)
      }
      /**
       * Draws a part of the snake on the canvas
       * @param { object } snakePart - The coordinates where the part should be drawn
       */
      function drawSnakePart(snakePart) {
        // Set the colour of the snake part
        ctx.fillStyle = SNAKE_COLOUR;
        // Set the border colour of the snake part
        ctx.strokestyle = SNAKE_BORDER_COLOUR;
        // Draw a "filled" rectangle to represent the snake part at the coordinates
        // the part is located
        ctx.fillRect(snakePart.x, snakePart.y, 10, 10);
        // Draw a border around the snake part
        ctx.strokeRect(snakePart.x, snakePart.y, 10, 10);
      }
    </script>
  </body>
</html>

و نتیجه اینگونه است:

تحرک مار در canvas با دستورات جاوااسکریپت

برای فراهم کردن قابلیت حرکت در جهت افقی، با توجه به اینکه فاصله‌ی نقاط و عرض مربع‌های بدن مار را ۱۰ پیکسل فرض کردیم، می‌بایست کاری کنیم که هر بار موقعیت نقاط ۱۰ پیکسل افزایش پیدا کند تا مار به سمت راست حرکت کند و در نتیجه آرایه‌ی نقاط بدن مار کاملاً تغییر می‌کند:

توجه کنید که در تصویر فوق، سرعت تغییرات dx است که ۱۰ پیکسل فرض شده است.

برای این حرکت، تابع advanceSnake را به این صورت تعریف می‌کنیم که نقطه‌ی جدیدی به نوک مار اضافه کند و نقطه‌ی انتهای مار را حذف کند.

function advanceSnake() {
  const head = {x: snake[0].x + dx, y: snake[0].y};
  snake.unshift(head);
  snake.pop();
}

و اما توضیحات کد فوق:

ابتدا سر مار با ثابت head تعریف شده که مختصه‌ی x و y آن از مختصه‌ی x و y اولین نقطه‌ی آرایه‌ی مار بده دست می‌آید به این صورت که x با dx جمع می‌شود و y تغییری نمی‌کند.
با دستور unshift نقطه‌ی جدید که سر جدید مار است را به آرایه اضافه می‌کنیم.
با دستور pop آخرین المان آرایه‌ی نقاط مار را حذف می‌کنیم.

به این ترتیب سر جدید به مار اضافه می‌شود و آخرین نقطه‌ی بدن مار حذف می‌شود و در نتیجه به نظر می‌رسد که مار به اندازه‌ی یک مربع به راست حرکت کرده است.

برای حرکت در جهت بالا و پایین نیز روال کار مشابه است و کافی است مختصه‌ی y‌ به اندازه‌ی dy تغییر کند. بنابراین تابع advanceSnake را کمی تغییر می‌دهیم که مختصات سر جدید مار به اندازه‌ی dx و dy با مختصات قبلی فرق کند:

const head = {x: snake[0].x + dx, y: snake[0].y + dy};

برای تست کردن حرکت مار در جهت عمودی، قبل از استفاده از تابع drawSnake که مار را ترسیم می‌کند، کدهای زیر را اضافه می‌کنیم:

// Move on step to the right
advanceSnake()
// Change vertical velocity to 0
dx = 0;
// Change horizontal velocity to 10
dy = -10;
// Move one step up
advanceSnake();
// Draw snake on the canvas
drawSnake();

بنابراین کد HTML صفحه‌ی بازی مار به این صورت خواهد شد:

<!DOCTYPE html>
<html>
  <head>
   <title>Snake Game</title>
  </head>
  <body>
    <canvas id="gameCanvas" width="300" height="300"></canvas>
    
    <script>
      /** CONSTANTS **/
      const CANVAS_BORDER_COLOUR = 'black';
      const CANVAS_BACKGROUND_COLOUR = "white";
      const SNAKE_COLOUR = 'lightgreen';
      const SNAKE_BORDER_COLOUR = 'darkgreen';
      
      let snake = [
        {x: 150, y: 150},
        {x: 140, y: 150},
        {x: 130, y: 150},
        {x: 120, y: 150},
        {x: 110, y: 150}
      ]
      
      // Horizontal velocity
      let dx = 10;
      // Vertical velocity
      let dy = 0;
      
      // Get the canvas element
      var gameCanvas = document.getElementById("gameCanvas");
      // Return a two dimensional drawing context
      var ctx = gameCanvas.getContext("2d");
      //  Select the colour to fill the canvas
      ctx.fillStyle = CANVAS_BACKGROUND_COLOUR;
      //  Select the colour for the border of the canvas
      ctx.strokestyle = CANVAS_BORDER_COLOUR;
      // Draw a "filled" rectangle to cover the entire canvas
      ctx.fillRect(0, 0, gameCanvas.width, gameCanvas.height);
      // Draw a "border" around the entire canvas
      ctx.strokeRect(0, 0, gameCanvas.width, gameCanvas.height);
      
      // Move on step to the right
      advanceSnake()
      // Change vertical velocity to 0
      dx = 0;
      // Change horizontal velocity to 10
      dy = -10;
      // Move one step up
      advanceSnake();
      // Draw snake on the canvas
      drawSnake();
      
      /**
       * Advances the snake by changing the x-coordinates of its parts
       * according to the horizontal velocity and the y-coordinates of its parts
       * according to the vertical veolocity
       */
      function advanceSnake() {
        const head = {x: snake[0].x + dx, y: snake[0].y + dy};
        snake.unshift(head);
        snake.pop();
      }
      
      /**
       * Draws the snake on the canvas
       */
      function drawSnake() {
        // loop through the snake parts drawing each part on the canvas
        snake.forEach(drawSnakePart)
      }
      /**
       * Draws a part of the snake on the canvas
       * @param { object } snakePart - The coordinates where the part should be drawn
       */
      function drawSnakePart(snakePart) {
        // Set the colour of the snake part
        ctx.fillStyle = SNAKE_COLOUR;
        // Set the border colour of the snake part
        ctx.strokestyle = SNAKE_BORDER_COLOUR;
        // Draw a "filled" rectangle to represent the snake part at the coordinates
        // the part is located
        ctx.fillRect(snakePart.x, snakePart.y, 10, 10);
        // Draw a border around the snake part
        ctx.strokeRect(snakePart.x, snakePart.y, 10, 10);
      }
    </script>
  </body>
</html>

برای پاکسازی پالت نیز تابعی به اسم clearCanvas تعریف می‌کنیم که در مراحل بعدی و حرکت کردن مار مفید واقع می‌شود. این تابع شبیه به ترسیم اولیه‌ی پالت و پر کردن آن با مربعی سفید و حاشیه‌ی سیاه عمل می‌کند.

function clearCanvas() {
  ctx.fillStyle = "white";
  ctx.strokeStyle = "black";
  ctx.fillRect(0, 0, gameCanvas.width, gameCanvas.height);
  ctx.strokeRect(0, 0, gameCanvas.width, gameCanvas.height);
}

حرکت خودکار مار در پالت

برای حرکت کردن مار در پالت، می‌توانیم تابع advanceSnake را چند بار پشت‌سرهم اجرا کنیم. به عنوان مثال برای ۵ خانه حرکت به سمت راست، ۵ بار این تابع اجرا می‌شود و سپس تابع ترسیم مار یعنی drawSnake اجرا می‌شود.

clearCanvas();
advanceSnake();
advanceSnake();
advanceSnake();
advanceSnake();
advanceSnake();
drawSnake();

حرکت در یک مرحله صورت می‌گیرد و پرشی خواهد بود. نتیجه را مشاهده کنید:

برای پله‌پله کردن حرکت مار، از تابع setTimeout جاوااسکریپت استفاده می‌کنیم تا اجرا کردن توابع حرکت و ترسیم مار، با ۱۰۰ میلی‌ثانیه تأخیر انجام شود و البته این توابع را در یک تابع جدید به اسم onTick‌ قرار می‌دهیم:

setTimeout(function onTick() {
  clearCanvas();
  advanceSnake();
  drawSnake();
}, 100);
setTimeout(function onTick() {
  clearCanvas();
  advanceSnake();
  drawSnake();
}, 100);
...
drawSnake();

دقت کنید که وجود clearCanvas در هر مرحله‌ی ترسیم مار لازم است چرا که باید مار قبلی را از Canvas پاک کند. در غیر این صورت طول مار بیشتر و بیشتر می‌شود.

اما یک مشکل بزرگ دیگر در کدها باقی مانده و آن این است که پس از ۱۰۰ میلی‌ثانیه همه‌ی پله‌های حرکت مار انجام می‌شود و باز هم مار ناگهان پرش می‌کند. برای حل کردن این مشکل، تابعی به اسم stepOne را تعریف می‌کنیم که مرحله‌ی اول حرکت و ترسیم مار را انجام می‌دهد و در آن تابع دوم به اسم stepTwo نیز فراخوانی می‌شود. بنابراین دومین حرکت مار با تأخیر ۱۰۰ میلی‌ثانیه‌ای پس از اولین حرکت صورت می‌گیرد.

stepOne();
    
function stepOne() {
  setTimeout(function onTick() {
    clearCanvas();
    advanceSnake();
    drawSnake();
   // Call the second function
   stepTwo();
  }, 100)
}
function stepTwo() {
  setTimeout(function onTick() {
    clearCanvas();
    advanceSnake();
    drawSnake();
    // Call the third function
    stepThree();
  }, 100)
}
...

اما این روش هم جالب نیست چرا که مجبوریم هزاران تابع تعریف کنیم! روش بهتر این است که یک تابع حرکت و رسم مار تعریف کنیم و در این تابع، با تأخیری کوتاه، یک بار دیگر خودش را فراخوانی کنیم. به این ترتیب هر ۱۰۰ میلی‌ثانیه یک مرتبه تابع اجرا می‌شود. بنابراین تابع main به این صورت خواهد بود:

function main() {
  setTimeout(function onTick() {
    clearCanvas();
    advanceSnake();
    drawSnake();
    // Call main again
    main();
  }, 100)
}

و نتیجه را مشاهده کنید:

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

تغییر جهت حرکت مار در پالت کلیدهای جهت کیبورد جاوااسکریپت

با فشار دادن هر کلید که کد خاص و معادلی دارد، یک رویداد یا event اتفاق می‌افتد و سرعت حرکت مار که قبلاً برای سادگی فقط در جهت x بوده، عوض می‌شود. بنابراین از if استفاده می‌کنیم و هر بار بررسی می‌کنیم که کدام کلید جهت فشار داده شده و متناسب با آن، مقدار dx و dy را تعریف می‌کنیم.

دقت کنید که dy مثبت، به معنی حرکت به سمت پایین است.

هر بار زمانی که کلید فشار داده شده را چک می‌کنیم، یک شرط دیگر هم باید بررسی شود و آن جهت حرکت فعلی مار است چرا که مار نباید ناگهان ۱۸۰ درجه تغییر مسیر بدهد و برگردد.

برای این شرط از عبارت مخالف یعنی ! استفاده می‌کنیم و می‌بایست ثابت‌های goingUp و goingDown و goingLeft و goingDown تعریف شود. بنابراین کد به این صورت خواهد شد:

function changeDirection(event) {
  const LEFT_KEY = 37;
  const RIGHT_KEY = 39;
  const UP_KEY = 38;
  const DOWN_KEY = 40;
  const keyPressed = event.keyCode;
  const goingUp = dy === -10;
  const goingDown = dy === 10;
  const goingRight = dx === 10;
  const goingLeft = dx === -10;
  if (keyPressed === LEFT_KEY && !goingRight) {
    dx = -10;
    dy = 0;
  }
  if (keyPressed === UP_KEY && !goingDown) {
    dx = 0;
    dy = -10;
  }
  if (keyPressed === RIGHT_KEY && !goingLeft) {
    dx = 10;
    dy = 0;
  }
  if (keyPressed === DOWN_KEY && !goingDown) {
    dx = 0;
    dy = 10;
  }
}

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

document.addEventListener("keydown", changeDirection)

ایجاد نقاط غذای مار به صورت تصادفی

غذای مار به صورت نقاطی با x و y تصادفی تعریف می‌شود. برای این کار تابع randomTen را تعریف می‌کنیم که دو عدد را دریافت کرده و عددی تصادفی یا رندم بینشان تحویل می‌دهد. تابع بعدی createFood است که مختصه‌ی افقی و عمودی غذا یعنی foodx‌ و foody را تولید می‌کند. به عنوان مثال با ارسال ۰ که عدد شروع است و عرض پالت منهای ۱۰ پیکسل که حداکثر عرض است به تابع randomTen، مختصه‌ی افقی به صورت تصادفی ایجاد می‌شود.

در نهایت در تابع createFood‌ در یک حلقه‌ی forEach‌ بررسی می‌کنیم که نقطه‌ی غذا روی یکی از نقاط بدن مار نباشد.

function randomTen(min, max) {
  return Math.round((Math.random() * (max-min) + min) / 10) * 10;
}
function createFood() {
  foodX = randomTen(0, gameCanvas.width - 10);
  foodY = randomTen(0, gameCanvas.height - 10);
  snake.forEach(function isFoodOnSnake(part) {
    const foodIsOnSnake = part.x == foodX && part.y == foodY
    if (foodIsOnSnake)
      createFood();
  });
}

برای ترسیم نقاط غذا از تابع دیگری استفاده می‌کنیم که مستطیلی قرمز با مرز سیاه در نقاط غذا ترسیم کند:

function drawFood() {
 ctx.fillStyle = 'red';
 ctx.strokestyle = 'darkred';
 ctx.fillRect(foodX, foodY, 10, 10);
 ctx.strokeRect(foodX, foodY, 10, 10);
}

و در نهایت باید تابع createFood را در حلقه‌ای که مار را متحرک می‌کرد، یعنی تابع main، قبل از تکرار اجرای main فراخوانی و اجرا کنیم:

function main() {
  setTimeout(function onTick() {
    clearCanvas();
    drawFood()
    advanceSnake();
    drawSnake();
    main();
  }, 100)
}

افزایش طول مار با خوردن نقاط غذا

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

به جای تعریف کردن دستور شرطی، ابتدا یک ثابت تعریف می‌کنیم که در آن از && که معادل "و" یا AND است، استفاده می‌شود تا بررسی شود که آیا مختصه‌ی افقی و عمودی سر مار با مختصات افقی و عمومی نقطه‌ی غذا یکسان است یا خیر. در ادامه اگر این عدد ثابت معادل ۱ یا True بود، تابع ایجاد غذا اجرا می‌شود و اگر اینگونه نبود، تابع pop اجرا می‌شود تا آخرین نقطه‌ی مار را حذف کند و به این ترتیب مار یک نقطه حرکت کند.

function advanceSnake() {
  const head = {x: snake[0].x + dx, y: snake[0].y};
  snake.unshift(head);
  const didEatFood = snake[0].x === foodX && snake[0].y === foodY;
  if (didEatFood) {
    createFood();
  } else {
    snake.pop();
  }
}

نمایش امتیاز بازی مار و نقطه

بازی بدون امتیاز بی‌معنی است. بنابراین یک div با id مشخصی مثل score در صفحه‌ی html اضافه می‌کنیم و هر بار که مار نقطه‌ی غذای جدیدی را جذب کرد، امتیاز را یک واحد افزایش می‌دهیم. امتیاز اولیه صفر است، بنابراین تگ‌های بخش body به این صورت خواهد بود:

<div id="score">0</div>
<canvas id="gameCanvas" width="300" height="300"></canvas>

و در تابع advanceSnake تغییر دیگری ایجاد می‌کنیم که متغیر score هر بار با برخورد سر مار به نقطه‌ی غذا، ۱۰ واحد بیشتر شود و سپس مقدار المانی با شناسه‌ی score، با دستور innerHTML تغییر کند.

function advanceSnake() {
  ...
  if (didEatFood) {
    score += 10;
    document.getElementById('score').innerHTML = score;
    createFood();
  } else {
    ...
  }
}

شرط پایان بازی

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

شرط بعدی پایان بازی نیز تلاقی کردن با دیوار است که برای چهار دیوار مختلف می‌بایست بررسی شود.

function didGameEnd() {
  for (let i = 4; i < snake.length; i++) {
    const didCollide = snake[i].x === snake[0].x &&
      snake[i].y === snake[0].y
    if (didCollide) return true
  }
  const hitLeftWall = snake[0].x < 0;
  const hitRightWall = snake[0].x > gameCanvas.width - 10;
  const hitToptWall = snake[0].y < 0;
  const hitBottomWall = snake[0].y > gameCanvas.height - 10;
  return hitLeftWall || 
         hitRightWall || 
         hitToptWall ||
         hitBottomWall
}

اگر تابع didGameEnd مقدار True داشته باشد، در تابع main برگشت انجام می‌شود.

function main() { if (didGameEnd()) return; …}

به این ترتیب کد کامل صفحه‌ی HTML بازی مار به این صورت خواهد شد:

<!DOCTYPE html>
<html>
  <head>
   <title>Snake Game</title>
  </head>
  <body>
    
<div id="score">0</div>

    <canvas id="gameCanvas" width="300" height="300"></canvas>

    <script>
      /** CONSTANTS **/
      const CANVAS_BORDER_COLOUR = 'black';
      const CANVAS_BACKGROUND_COLOUR = "white";
      const SNAKE_COLOUR = 'lightgreen';
      const SNAKE_BORDER_COLOUR = 'darkgreen';
      const FOOD_COLOUR = 'red';
      const FOOD_BORDER_COLOUR = 'darkred';
      let snake = [
        {x: 150, y: 150},
        {x: 140, y: 150},
        {x: 130, y: 150},
        {x: 120, y: 150},
        {x: 110, y: 150}
      ]
      // The user's score
      let score = 0;
      // Horizontal velocity
      let dx = 10;
      // Vertical velocity
      let dy = 0;
      // Get the canvas element
      var gameCanvas = document.getElementById("gameCanvas");
      // Return a two dimensional drawing context
      var ctx = gameCanvas.getContext("2d");
      //  Select the colour to fill the canvas
      ctx.fillStyle = CANVAS_BACKGROUND_COLOUR;
      //  Select the colour for the border of the canvas
      ctx.strokestyle = CANVAS_BORDER_COLOUR;
      // Draw a "filled" rectangle to cover the entire canvas
      ctx.fillRect(0, 0, gameCanvas.width, gameCanvas.height);
      // Draw a "border" around the entire canvas
      ctx.strokeRect(0, 0, gameCanvas.width, gameCanvas.height);
      // Start game
      main();
      // Create the first food location
      createFood();
      // Call changeDirection whenever a key is pressed
      document.addEventListener("keydown", changeDirection);
      function main() {
        if (didGameEnd()) return;
        setTimeout(function onTick() {
          clearCanvas();
          drawFood();
          advanceSnake();
          drawSnake();
          // Call main again
          main();
        }, 100)
      }
      /**
       * Change the background colour of the canvas to CANVAS_BACKGROUND_COLOUR and
       * draw a border around it
       */
      function clearCanvas() {
        //  Select the colour to fill the drawing
        ctx.fillStyle = CANVAS_BACKGROUND_COLOUR;
        //  Select the colour for the border of the canvas
        ctx.strokestyle = CANVAS_BORDER_COLOUR;
        // Draw a "filled" rectangle to cover the entire canvas
        ctx.fillRect(0, 0, gameCanvas.width, gameCanvas.height);
        // Draw a "border" around the entire canvas
        ctx.strokeRect(0, 0, gameCanvas.width, gameCanvas.height);
      }
      /**
       * Returns true if the head of the snake touched another part of the game
       * or any of the walls
       */
      function didGameEnd() {
        for (let i = 4; i < snake.length; i++) {
          const didCollide = snake[i].x === snake[0].x && snake[i].y === snake[0].y
          if (didCollide) return true
        }
        const hitLeftWall = snake[0].x < 0;
        const hitRightWall = snake[0].x > gameCanvas.width - 10;
        const hitToptWall = snake[0].y < 0;
        const hitBottomWall = snake[0].y > gameCanvas.height - 10;
        return hitLeftWall || hitRightWall || hitToptWall || hitBottomWall
      }
      /**
       * Draw the food on the canvas
       */
      function drawFood() {
        ctx.fillStyle = FOOD_COLOUR;
        ctx.strokestyle = FOOD_BORDER_COLOUR;
        ctx.fillRect(foodX, foodY, 10, 10);
        ctx.strokeRect(foodX, foodY, 10, 10);
      }
      /**
       * Advances the snake by changing the x-coordinates of its parts
       * according to the horizontal velocity and the y-coordinates of its parts
       * according to the vertical veolocity
       */
      function advanceSnake() {
        // Create the new Snake's head
        const head = {x: snake[0].x + dx, y: snake[0].y + dy};
        // Add the new head to the beginning of snake body
        snake.unshift(head);
        const didEatFood = snake[0].x === foodX && snake[0].y === foodY;
        if (didEatFood) {
          // Increase score
          score += 10;
          // Display score on screen
          document.getElementById('score').innerHTML = score;
          // Generate new food location
          createFood();
        } else {
          // Remove the last part of snake body
          snake.pop();
        }
      }
      /**
       * Generates a random number that is a multiple of 10 given a minumum
       * and a maximum number
       * @param { number } min - The minimum number the random number can be
       * @param { number } max - The maximum number the random number can be
       */
      function randomTen(min, max) {
        return Math.round((Math.random() * (max-min) + min) / 10) * 10;
      }
      /**
       * Creates random set of coordinates for the snake food.
       */
      function createFood() {
        // Generate a random number the food x-coordinate
        foodX = randomTen(0, gameCanvas.width - 10);
        // Generate a random number for the food y-coordinate
        foodY = randomTen(0, gameCanvas.height - 10);
        // if the new food location is where the snake currently is, generate a new food location
        snake.forEach(function isOnSnake(part) {
          if (part.x == foodX && part.y == foodY) createFood();
        });
      }
      /**
       * Draws the snake on the canvas
       */
      function drawSnake() {
        // loop through the snake parts drawing each part on the canvas
        snake.forEach(drawSnakePart)
      }
      /**
       * Draws a part of the snake on the canvas
       * @param { object } snakePart - The coordinates where the part should be drawn
       */
      function drawSnakePart(snakePart) {
        // Set the colour of the snake part
        ctx.fillStyle = SNAKE_COLOUR;
        // Set the border colour of the snake part
        ctx.strokestyle = SNAKE_BORDER_COLOUR;
        // Draw a "filled" rectangle to represent the snake part at the coordinates
        // the part is located
        ctx.fillRect(snakePart.x, snakePart.y, 10, 10);
        // Draw a border around the snake part
        ctx.strokeRect(snakePart.x, snakePart.y, 10, 10);
      }
      /**
       * Changes the vertical and horizontal velocity of the snake according to the
       * key that was pressed.
       * The direction cannot be switched to the opposite direction, to prevent the snake
       * from reversing
       * For example if the the direction is 'right' it cannot become 'left'
       * @param { object } event - The keydown event
       */
      function changeDirection(event) {
        const LEFT_KEY = 37;
        const RIGHT_KEY = 39;
        const UP_KEY = 38;
        const DOWN_KEY = 40;
        const keyPressed = event.keyCode;
        const goingUp = dy === -10;
        const goingDown = dy === 10;
        const goingRight = dx === 10;
        const goingLeft = dx === -10;
        if (keyPressed === LEFT_KEY && !goingRight) {
          dx = -10;
          dy = 0;
        }
        if (keyPressed === UP_KEY && !goingDown) {
          dx = 0;
          dy = -10;
        }
        if (keyPressed === RIGHT_KEY && !goingLeft) {
          dx = 10;
          dy = 0;
        }
        if (keyPressed === DOWN_KEY && !goingUp) {
          dx = 0;
          dy = 10;
        }
      }
    </script>
  </body>
</html>

دیباگ کردن کد

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

مشکل فعلی حرکت مار این است که اگر کاربر قبل از ۱۰۰ میلی‌ثانیه، کلید جهت را فشار دهد، موقعیت جدید مار محاسبه می‌شود و اگر شرط تلاقی که موجب باختن وی می‌شود، برقرار باشد، بازی تمام است! برای جلوگیری از چنین اتفاقی، یک متغیر جدید به اسم changingDirection تعریف می‌کنیم و مقدار آن را در زمانی که تابع تغییر جهت فراخوانی شده، True در نظر می‌گیریم و در حالتی که مار در حرکت است و تابع advanceSnake اجرا می‌شود، False تعریف می‌کنیم. به این ترتیب می‌توانیم با یک شرط اضافی، باگ را برطرف کنیم.

function changeDirection(event) {
  const LEFT_KEY = 37;
  const RIGHT_KEY = 39;
  const UP_KEY = 38;
  const DOWN_KEY = 40;
  if (changingDirection) return;
  changingDirection = true;
  ...
}
function main() {
  setTimeout(function onTick() {
    changingDirection = false;
    
    ...
  }, 100)
}

در نهایت کد ما با اضافه کردن کمی استایل اضافی در تگ style که ظاهر صفحه‌ی بازی را زیباتر می‌کند، به این صورت خواهد شد:

اگر سرعت بازی زیاد است، ۱۰۰ میلی‌ثانیه را در تابع حرکت مار افزایش دهید.

<!DOCTYPE html>
<html>
  <head>
    <title>Snake Game</title>
    <link href="https://fonts.googleapis.com/css?family=Antic+Slab" rel="stylesheet">

  </head>

  <body>

    <div id="score">0</div>
    <canvas id="gameCanvas" width="300" height="300"></canvas>
    <h1 class="gamename">بازي مار و نقطه‌ها</h1>
    <style>
	  .gamename {text-align:center;font-family:tahoma}
      #gameCanvas {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
      #score {
        text-align: center;
        font-size: 140px;
        font-family: 'Antic Slab', serif;
      }
    </style>
  </body>

  <script>
    const GAME_SPEED = 100;
    const CANVAS_BORDER_COLOUR = 'black';
    const CANVAS_BACKGROUND_COLOUR = "white";
    const SNAKE_COLOUR = 'lightgreen';
    const SNAKE_BORDER_COLOUR = 'darkgreen';
    const FOOD_COLOUR = 'red';
    const FOOD_BORDER_COLOUR = 'darkred';
    let snake = [
      {x: 150, y: 150},
      {x: 140, y: 150},
      {x: 130, y: 150},
      {x: 120, y: 150},
      {x: 110, y: 150}
    ]
    // The user's score
    let score = 0;
    // When set to true the snake is changing direction
    let changingDirection = false;
    // Food x-coordinate
    let foodX;
    // Food y-coordinate
    let foodY;
    // Horizontal velocity
    let dx = 10;
    // Vertical velocity
    let dy = 0;
    // Get the canvas element
    const gameCanvas = document.getElementById("gameCanvas");
    // Return a two dimensional drawing context
    const ctx = gameCanvas.getContext("2d");
    // Start game
    main();
    // Create the first food location
    createFood();
    // Call changeDirection whenever a key is pressed
    document.addEventListener("keydown", changeDirection);
    /**
     * Main function of the game
     * called repeatedly to advance the game
     */
    function main() {
      // If the game ended return early to stop game
      if (didGameEnd()) return;
      setTimeout(function onTick() {
        changingDirection = false;
        clearCanvas();
        drawFood();
        advanceSnake();
        drawSnake();
        // Call game again
        main();
      }, GAME_SPEED)
    }
    /**
     * Change the background colour of the canvas to CANVAS_BACKGROUND_COLOUR and
     * draw a border around it
     */
    function clearCanvas() {
      //  Select the colour to fill the drawing
      ctx.fillStyle = CANVAS_BACKGROUND_COLOUR;
      //  Select the colour for the border of the canvas
      ctx.strokestyle = CANVAS_BORDER_COLOUR;
      // Draw a "filled" rectangle to cover the entire canvas
      ctx.fillRect(0, 0, gameCanvas.width, gameCanvas.height);
      // Draw a "border" around the entire canvas
      ctx.strokeRect(0, 0, gameCanvas.width, gameCanvas.height);
    }
    /**
     * Draw the food on the canvas
     */
    function drawFood() {
      ctx.fillStyle = FOOD_COLOUR;
      ctx.strokestyle = FOOD_BORDER_COLOUR;
      ctx.fillRect(foodX, foodY, 10, 10);
      ctx.strokeRect(foodX, foodY, 10, 10);
    }
    /**
     * Advances the snake by changing the x-coordinates of its parts
     * according to the horizontal velocity and the y-coordinates of its parts
     * according to the vertical veolocity
     */
    function advanceSnake() {
      // Create the new Snake's head
      const head = {x: snake[0].x + dx, y: snake[0].y + dy};
      // Add the new head to the beginning of snake body
      snake.unshift(head);
      const didEatFood = snake[0].x === foodX && snake[0].y === foodY;
      if (didEatFood) {
        // Increase score
        score += 10;
        // Display score on screen
        document.getElementById('score').innerHTML = score;
        // Generate new food location
        createFood();
      } else {
        // Remove the last part of snake body
        snake.pop();
      }
    }
    /**
     * Returns true if the head of the snake touched another part of the game
     * or any of the walls
     */
    function didGameEnd() {
      for (let i = 4; i < snake.length; i++) {
        if (snake[i].x === snake[0].x && snake[i].y === snake[0].y) return true
      }
      const hitLeftWall = snake[0].x < 0;
      const hitRightWall = snake[0].x > gameCanvas.width - 10;
      const hitToptWall = snake[0].y < 0;
      const hitBottomWall = snake[0].y > gameCanvas.height - 10;
      return hitLeftWall || hitRightWall || hitToptWall || hitBottomWall
    }
    /**
     * Generates a random number that is a multiple of 10 given a minumum
     * and a maximum number
     * @param { number } min - The minimum number the random number can be
     * @param { number } max - The maximum number the random number can be
     */
    function randomTen(min, max) {
      return Math.round((Math.random() * (max-min) + min) / 10) * 10;
    }
    /**
     * Creates random set of coordinates for the snake food.
     */
    function createFood() {
      // Generate a random number the food x-coordinate
      foodX = randomTen(0, gameCanvas.width - 10);
      // Generate a random number for the food y-coordinate
      foodY = randomTen(0, gameCanvas.height - 10);
      // if the new food location is where the snake currently is, generate a new food location
      snake.forEach(function isFoodOnSnake(part) {
        const foodIsoNsnake = part.x == foodX && part.y == foodY;
        if (foodIsoNsnake) createFood();
      });
    }
    /**
     * Draws the snake on the canvas
     */
    function drawSnake() {
      // loop through the snake parts drawing each part on the canvas
      snake.forEach(drawSnakePart)
    }
    /**
     * Draws a part of the snake on the canvas
     * @param { object } snakePart - The coordinates where the part should be drawn
     */
    function drawSnakePart(snakePart) {
      // Set the colour of the snake part
      ctx.fillStyle = SNAKE_COLOUR;
      // Set the border colour of the snake part
      ctx.strokestyle = SNAKE_BORDER_COLOUR;
      // Draw a "filled" rectangle to represent the snake part at the coordinates
      // the part is located
      ctx.fillRect(snakePart.x, snakePart.y, 10, 10);
      // Draw a border around the snake part
      ctx.strokeRect(snakePart.x, snakePart.y, 10, 10);
    }
    /**
     * Changes the vertical and horizontal velocity of the snake according to the
     * key that was pressed.
     * The direction cannot be switched to the opposite direction, to prevent the snake
     * from reversing
     * For example if the the direction is 'right' it cannot become 'left'
     * @param { object } event - The keydown event
     */
    function changeDirection(event) {
      const LEFT_KEY = 37;
      const RIGHT_KEY = 39;
      const UP_KEY = 38;
      const DOWN_KEY = 40;
      /**
       * Prevent the snake from reversing
       * Example scenario:
       * Snake is moving to the right. User presses down and immediately left
       * and the snake immediately changes direction without taking a step down first
       */
      if (changingDirection) return;
      changingDirection = true;
      
      const keyPressed = event.keyCode;
      const goingUp = dy === -10;
      const goingDown = dy === 10;
      const goingRight = dx === 10;
      const goingLeft = dx === -10;
      if (keyPressed === LEFT_KEY && !goingRight) {
        dx = -10;
        dy = 0;
      }
      
      if (keyPressed === UP_KEY && !goingDown) {
        dx = 0;
        dy = -10;
      }
      
      if (keyPressed === RIGHT_KEY && !goingLeft) {
        dx = 10;
        dy = 0;
      }
      
      if (keyPressed === DOWN_KEY && !goingUp) {
        dx = 0;
        dy = 10;
      }
    }
  </script>
</html>

freecodecampسیاره‌ی آی‌تی

سوالات و پاسخ‌ها و دیدگاه‌ها

محمد مهدی گفت:

جولای 19, 2018 در 11:01 ب.ظ

من رفتم تا 2570 تونستم برم .مرسی مطلب مفیدی بود و جالب من خودم برنامه نویس هستم

پاسخ

آشنایی با AutoHotKey و انجام کارهای پیچیده با کلیدهای کیبورد

علیرضا شیریگفت:

سلام برای تغییر عملکرد دکمه‌های کیبورد میتونید از برنامه PowerToys مایکروسافت استفاده کنید که قبلاً معرفی کردیم. برای شورت‌کات‌هایی مثل Ctrl + C هم فکر میکنم جواب میده. تغییر دکمه های کیبورد و استفاده از کلید دیگری به جای کلید خراب در ویندوز

پاسخ

رضاایلانیگفت:

سلام بنده میخوام ی کد بنویسم ک مثلا بجای کلیدهای ترکیبی ctrl+c یا کپی یک کلمه؛ با زدن کلید F1 کیبورد اینکار اعمال شود و بجای past کردن ک کلیدهای ترکیبی ctrl+v است با کلید F2 این مورد انجام شود ممنون میشم کدش رو بهم بگید

چگونه تنظیمات Paste در Word را تغییر دهیم تا همواره متن ساده پیست شود؟

کا ظ مگفت:

سلام ببخشید چطور میتونم در محیط ورد با یک کلیک روی کلمه کپی بشه . و با یک کلیک در جای دیگر پیس بشه . یعنی به متن حالت کپی بدم

آشنایی با نمودارهای اکسل و کاربرد انواع نمودار در اکسل

علی امیریگفت:

من فقط از نمودار ستونی استفاده میکردم ولی با خوندن این مقاله متوجه شدم که نمودار xy برای کار من خیلی بهتر هست. با تشکر از سایت خوبتون.

ترس از عصب کشی دندان و دندانپزشکی نداشته باشید + معرفی یک دندانپزشکی

جوادگفت:

به نظرم عصب کشی دندان زیاد ترسناک نیست. ترسناک در اصل کشیدن دندانه