چگونه با استفاده از HTML، CSS و جاوا اسکریپت یک بازی مار بسازیم

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

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

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

نحوه ایجاد رابط کاربری برای بوم

از HTML و CSS برای اضافه کردن بوم برای حرکت مار استفاده کنید. بسیاری از پروژه‌های HTML و CSS دیگر وجود دارند که می‌توانید در صورت نیاز به بازنگری در مفاهیم اولیه، روی آنها تمرین کنید.

برای دریافت کد منبع کامل می توانید به مخزن GitHub این پروژه مراجعه کنید.

یک فایل جدید به نام “index.html” ایجاد کنید.
فایل را با استفاده از هر ویرایشگر متنی مانند Visual Code یا Atom باز کنید. ساختار اصلی کد HTML را اضافه کنید: Snake Game
در داخل تگ بدن، یک بوم برای نمایش صفحه بازی برای مار اضافه کنید.

بازی مار

در همان پوشه فایل HTML خود، یک فایل جدید به نام “styles.css” ایجاد کنید.

در داخل، مقداری CSS برای کل صفحه وب اضافه کنید. همچنین می‌توانید با استفاده از سایر نکات و ترفندهای ضروری CSS به وب‌سایت خود سبک دهید.#game { width:400px; ارتفاع: 400 پیکسل margin:0 auto; background-color:#eee;}h2 { text-align:center; font-family:Arial; اندازه فونت: 36px;}

در داخل فایل HTML خود، پیوندی به CSS در تگ head اضافه کنید:

برای مشاهده بوم، فایل “index.html” خود را در یک مرورگر وب باز کنید.

<!doctype html>
<html lang="en-US">
  <head>
    <title>Snake Game</title>
  </head>
  <body>

  </body>
</html>

<h2>Snake Game</h2>
<div id="game">
  <canvas id="snake"></canvas>
</div>

#game {
  width:400px;
  height:400px;
  margin:0 auto;
  background-color:#eee;
}
h2 {
  text-align:center;
  font-family:Arial;
  font-size:36px;
}

<link rel="stylesheet" type="text/css" href="styles.css">

چگونه مار را بکشیم

در مثال زیر، خط سیاه نشان دهنده مار است:

چندین مربع یا “قطعه” مار را تشکیل می دهند. با رشد مار، تعداد مربع ها نیز افزایش می یابد. در ابتدای بازی، طول مار یک تکه است.

در داخل فایل HTML خود، به یک فایل جاوا اسکریپت جدید در پایین تگ بدنه پیوند دهید:
script.js را ایجاد کنید و با گرفتن عنصر DOM از canvas شروع کنید:var canvas = document.getElementById(“snake”);
زمینه عنصر HTML بوم را تنظیم کنید. در این حالت، شما می خواهید که بازی یک بوم 2 بعدی ارائه دهد. این به شما امکان می دهد چندین شکل یا تصویر را روی عنصر HTML بکشید.var canvas2d = canvas.getContext(“2d”);
سایر متغیرهای درون بازی را تنظیم کنید، مانند اینکه آیا بازی به پایان رسیده است یا خیر، و ارتفاع و عرض بوم:var gameEnded = false;canvas.width = 400;canvas.height = 400;
یک متغیر به نام “snakeSegments” اعلام کنید. این تعداد مربع هایی را که مار می گیرد نگه می دارد. همچنین می توانید یک متغیر برای پیگیری طول مار ایجاد کنید:var snakeSegments = [];var snakeLength = 1;
موقعیت X و Y اولیه snake را اعلام کنید:var snakeX = 0;var snakeY = 0;
یک تابع جدید ایجاد کنید. در داخل، قطعه snake شروع را به آرایه snakeSegments اضافه کنید، با مختصات X و Y اولیه آن:function moveSnake() { snakeSegments.unshift({ x: snakeX, y: snakeY });}
یک تابع جدید ایجاد کنید. در داخل، استایل پر را روی مشکی تنظیم کنید. این رنگی است که برای ترسیم snake:function drawSnake() { canvas2d.fillStyle = “black”; }
برای هر بخش که اندازه مار را تشکیل می دهد، مربعی با عرض و ارتفاع 10 پیکسل رسم کنید: برای (var i = 0; i < snakeSegments.length; i++) { canvas2d.fillRect(snakeSegments[i].x، snakeSegments [i].y، 10، 10)؛ }
یک حلقه بازی ایجاد کنید که هر 100 میلی ثانیه اجرا شود. این باعث می‌شود که بازی دائماً مار را در موقعیت جدید خود بکشد، که وقتی مار شروع به حرکت کرد بسیار مهم خواهد بود:function gameLoop() { moveSnake(); drawSnake();
فایل “index.html” را در یک مرورگر وب باز کنید تا مار را با کوچکترین اندازه در موقعیت شروع خود ببینید.

<body>
  <!-- Your code here -->
  <script src="script.js"></script>
</body>

var canvas = document.getElementById("snake");

var canvas2d = canvas.getContext("2d");

var gameEnded = false;
canvas.width = 400;
canvas.height = 400;

var snakeSegments = [];
var snakeLength = 1;

var snakeX = 0;
var snakeY = 0;

function moveSnake() {
  snakeSegments.unshift({ x: snakeX, y: snakeY });
}

function drawSnake() {
  canvas2d.fillStyle = "black"; 
}

  for (var i = 0; i < snakeSegments.length; i++) {
    canvas2d.fillRect(snakeSegments[i].x, snakeSegments[i].y, 10, 10);
  }

function gameLoop() {
  moveSnake();
 drawSnake();

چگونه مار را به حرکت در آوریم

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

در بالای فایل، جهت اولیه snake را اعلام کنید:var directionX = 10;var directionY = 0;
یک کنترل کننده رویداد اضافه کنید که با فشار دادن یک کلید توسط بازیکن فعال شود:document.onkeydown = function(event) {};
در داخل کنترل کننده رویداد، جهت حرکت مار را بر اساس کلید فشرده شده تغییر دهید:switch (event.keyCode) { case 37: // فلش چپ directionX = -10; جهتY = 0; زنگ تفريح؛ مورد 38: // فلش رو به بالا directionX = 0; جهتY = -10; زنگ تفريح؛ case 39: // فلش راست directionX = 10; جهتY = 0; زنگ تفريح؛ مورد 40: // فلش رو به پایین directionX = 0; جهتY = 10; زنگ تفريح؛}
در تابع moveSnake() از جهت به روز رسانی مختصات X و Y snake استفاده کنید. به عنوان مثال، اگر مار باید به سمت چپ حرکت کند، جهت X “-10” خواهد بود. این مختصات X را به‌روزرسانی می‌کند تا 10 پیکسل برای هر فریم از بازی حذف شود:function moveSnake() { snakeSegments.unshift({ x: snakeX, y: snakeY }); snakeX += جهتX; snakeY += جهتY;}
بازی در حال حاضر بخش های قبلی را در حالی که مار در حال حرکت است حذف نمی کند. با این کار مار به شکل زیر در می آید:
برای رفع این مشکل، قبل از کشیدن مار جدید در هر فریم، در ابتدای تابع drawSnake():canvas2d.clearRect(0, 0, canvas.width, canvas.height) بوم را پاک کنید.
همچنین باید آخرین عنصر آرایه snakeSegments را در تابع moveSnake() حذف کنید:while (snakeSegments.length > snakeLength) { snakeSegments.pop();}
فایل “index.html” را باز کنید و کلیدهای چپ، راست، بالا یا پایین را فشار دهید تا مار حرکت کند.

var directionX = 10;
var directionY = 0;

document.onkeydown = function(event) {

};

switch (event.keyCode) {
  case 37: // Left arrow
    directionX = -10;
    directionY = 0;
    break;
  case 38: // Up arrow
    directionX = 0;
    directionY = -10;
    break;
  case 39: // Right arrow
    directionX = 10;
    directionY = 0;
    break;
  case 40: // Down arrow
    directionX = 0;
    directionY = 10;
    break;
}

function moveSnake() {
  snakeSegments.unshift({ x: snakeX, y: snakeY });
  snakeX += directionX;
  snakeY += directionY;
}

canvas2d.clearRect(0, 0, canvas.width, canvas.height);

while (snakeSegments.length > snakeLength) {
  snakeSegments.pop();
}

نحوه اضافه کردن غذا به بوم

برای نشان دادن تکه های غذا برای مار، نقطه هایی را به بازی تخته اضافه کنید.

یک متغیر جدید در بالای فایل برای ذخیره آرایه ای از قطعات غذا اعلام کنید:var dots = [];
یک تابع جدید ایجاد کنید. در داخل، مختصات تصادفی X و Y را برای نقاط ایجاد کنید. همچنین می‌توانید اطمینان حاصل کنید که در هر زمان فقط 10 نقطه روی تابلو وجود دارد:function spawnDots() { if(dots.length < 10) { var dotX = Math.floor(Math.random() * canvas.width); var dotY = Math.floor(Math.random() * canvas.height); dots.push({ x: dotX, y: dotY }); }}
پس از ایجاد مختصات X و Y برای غذا، آنها را با استفاده از رنگ قرمز روی بوم بکشید:for (var i = 0; i
فراخوانی تابع جدید spawnDots() در داخل حلقه بازی:function gameLoop() { moveSnake(); drawSnake(); spawnDots(); if(!gameEnded) { setTimeout(gameLoop, 100); }}
فایل “index.html” را باز کنید تا غذا را روی صفحه بازی مشاهده کنید.

var dots = [];

function spawnDots() {
  if(dots.length < 10) {
    var dotX = Math.floor(Math.random() * canvas.width);
    var dotY = Math.floor(Math.random() * canvas.height);
    dots.push({ x: dotX, y: dotY });
  }
}

for (var i = 0; i < dots.length; i++) {
  canvas2d.fillStyle = "red";
  canvas2d.fillRect(dots[i].x, dots[i].y, 10, 10);
}

function gameLoop() {
  moveSnake();
  drawSnake();
  spawnDots();
  if(!gameEnded) {
    setTimeout(gameLoop, 100);
  }
}

چگونه مار را رشد دهیم

وقتی مار با یک نقطه غذایی برخورد می کند، می توانید با افزایش طول آن باعث رشد مار شوید.

یک تابع جدید ایجاد کنید. در داخل آن، از طریق هر عنصر در آرایه نقطه‌ای حلقه بزنید:function checkCollision() { for (var i = 0; i
اگر موقعیت مار با مختصات هر نقطه مطابقت داشت، طول مار را افزایش دهید و نقطه:if را حذف کنید (snakeX < نقطه[i].x + 10 && snakeX + 10 > نقطه[i].x && snakeY < نقطه[i] ].y + 10 && snakeY + 10 > نقطه[i].y) { snakeLength++; dots.splice(i, 1);}
تابع جدید checkCollision() را در حلقه بازی فراخوانی کنید:function gameLoop() { moveSnake(); drawSnake(); spawnDots(); checkCollision(); if(!gameEnded) { setTimeout(gameLoop, 100); }}
فایل “index.html” را در یک مرورگر وب باز کنید. مار را با استفاده از صفحه کلید حرکت دهید تا تکه های غذا را جمع آوری کرده و مار را رشد دهید.

function checkCollision() {
  for (var i = 0; i < dots.length; i++) {
        
  }
}

if (snakeX < dots[i].x + 10 && 
  snakeX + 10 > dots[i].x && 
  snakeY < dots[i].y + 10 && 
  snakeY + 10 > dots[i].y) {
    snakeLength++;
    dots.splice(i, 1);
}

function gameLoop() {
  moveSnake();
  drawSnake();
  spawnDots();
  checkCollision();
  if(!gameEnded) {
    setTimeout(gameLoop, 100);
  }
}

نحوه پایان دادن به بازی

برای پایان دادن به بازی، بررسی کنید که آیا مار با دم خودش یا هر یک از دیوارها برخورد کرده است.

ایجاد یک تابع جدید برای چاپ هشدار “بازی تمام شد”.function gameOver() { setTimeout(function() { alert(“Game Over!”); }, 500); بازی به پایان رسید = واقعی}
در داخل تابع checkCollision() بررسی کنید که آیا مار به دیوارهای بوم برخورد کرده است یا خیر. اگر چنین است، تابع gameOver():if (snakeX < -10 || snakeY < -10 || snakeX > canvas.width+10 || snakeY > canvas.height+10) { gameOver();}
برای بررسی اینکه آیا سر مار با هر یک از قسمت های دم برخورد کرده است یا خیر، از طریق هر تکه مار حلقه بزنید:for (var i = 1; i < snakeSegments.length; i++) {}
در داخل حلقه for، بررسی کنید که آیا محل سر مار با هر یک از بخش های دم مطابقت دارد یا خیر. اگر چنین است، به این معنی است که سر با یک دم برخورد کرده است، بنابراین بازی را تمام کنید:if (snakeX === snakeSegments[i].x && snakeY === snakeSegments[i].y) { gameOver();}
فایل “index.html” را در یک مرورگر وب باز کنید. سعی کنید برای پایان بازی به دیوار یا دم خود ضربه بزنید.

function gameOver() {
  setTimeout(function() {
    alert("Game over!");
  }, 500); 
  gameEnded = true
}

if (snakeX < -10 || 
  snakeY < -10 || 
  snakeX > canvas.width+10 ||
  snakeY > canvas.height+10) {
    gameOver();
}

for (var i = 1; i < snakeSegments.length; i++) {

}

if (snakeX === snakeSegments[i].x && snakeY === snakeSegments[i].y) {
  gameOver();
}

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

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

مطلب مرتبط: بررسی مدیریت دولت در React با استفاده از Jotai: یک راهنمای عملی