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

این بازی ساده را در مرورگر وب خود در کمترین زمان اجرا کنید!

Tic-tac-toe یک بازی محبوب است که از شبکه 3×3 استفاده می کند. هدف بازی این است که اولین بازیکنی باشید که سه علامت را در یک ردیف مستقیم افقی، عمودی یا مورب قرار می دهد.

شما می توانید یک بازی Tic-tac-toe ایجاد کنید که در یک مرورگر وب با استفاده از HTML، CSS و جاوا اسکریپت اجرا شود. می توانید از HTML برای اضافه کردن محتوایی که دارای شبکه 3×3 است و از CSS برای اضافه کردن سبک به طراحی بازی استفاده کنید.

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

نحوه ایجاد رابط کاربری برای بازی Tic-Tac-Toe

سورس کد کامل این بازی را می توانید از سایت آن مطالعه و دانلود کنید
مخزن GitHub
.

Tic-tac-toe یکی از بازی‌هایی است که می‌توانید هنگام یادگیری برنامه‌نویسی انجام دهید. تمرین یک زبان یا محیط جدید، مانند موتور توسعه بازی PICO-8، خوب است.

برای ایجاد یک بازی Tic-tac-toe که در یک مرورگر وب اجرا می شود، باید HTML را برای محتوای صفحه اضافه کنید. سپس می توانید با استفاده از CSS به آن استایل دهید.

یک فایل جدید به نام “index.html” ایجاد کنید.
در “index.html”، ساختار اصلی یک فایل HTML را اضافه کنید: Tic Tac Toe Game < body>
در داخل تگ بدنه HTML، جدولی حاوی سه ردیف، با سه سلول در هر ردیف اضافه کنید:

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

در داخل فایل CSS، مقداری استایل به شبکه 3 در 3 خود اضافه کنید: جدول { border-collapse: collapse; حاشیه: 0 خودکار;}td { width: 100px; ارتفاع: 100 پیکسل؛ text-align: center; vertical-align: وسط; حاشیه: 1px مشت سیاه؛}

فایل CSS را با افزودن آن به تگ head به فایل HTML خود پیوند دهید:

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

<div class="container">
  <table>
    <tr>
      <td id="1"></td>
      <td id="2"></td>
      <td id="3"></td>
    </tr>
    <tr>
      <td id="4"></td>
      <td id="5"></td>
      <td id="6"></td>
    </tr>
    <tr>
      <td id="7"></td>
      <td id="8"></td>
      <td id="9"></td>
    </tr>
  </table>
</div>

table {
  border-collapse: collapse;
  margin: 0 auto;
}

td {
  width: 100px;
  height: 100px;
  text-align: center;
  vertical-align: middle;
  border: 1px solid black;
}

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

نحوه اضافه کردن نمادها به صفحه بازی به نوبت

در بازی، دو بازیکن وجود خواهند داشت که هر کدام یک علامت “X” یا “O” دارند. می توانید با کلیک بر روی یکی از سلول های شبکه، نماد “X” یا “O” را اضافه کنید. این کار تا زمانی ادامه می یابد که یکی از شما یک ردیف افقی، عمودی یا مورب مستقیم ایجاد کند.

شما می توانید این قابلیت را با استفاده از جاوا اسکریپت اضافه کنید.

در همان پوشه فایل های HTML و CSS خود، یک فایل جاوا اسکریپت به نام “script.js” ایجاد کنید.
با افزودن اسکریپت به پایین تگ بدنه، فایل جاوا اسکریپت را به فایل HTML خود پیوند دهید:
در داخل فایل جاوا اسکریپت، یک رشته برای نشان دادن نماد پخش کننده اضافه کنید. این می تواند “X” یا “O” باشد. به طور پیش فرض، اولین بازیکن یک “X” قرار می دهد: let playerSymbol = “X”;
متغیر دیگری برای پیگیری اینکه آیا بازی به پایان رسیده است اضافه کنید: let gameEnded = false
هر سلول در جدول HTML دارای شناسه ای بین 1 تا 9 است. برای هر سلول در جدول، یک شنونده رویداد اضافه کنید که هر زمان که کاربر روی سلول کلیک کند اجرا می شود: برای (بگذارید i = 1؛ i <= 9؛ i++) { document.getElementById(i.toString()).addEventListener( "click", function() { } );}
در شنونده رویداد، HTML داخلی را برای نمایش نماد فعلی تغییر دهید. حتماً از یک عبارت شرطی جاوا اسکریپت استفاده کنید تا ابتدا مطمئن شوید که سلول خالی است و بازی هنوز به پایان نرسیده است:if (this.innerHTML === “” && !gameEnded) { this.innerHTML = playerSymbol;}
یک کلاس به عنصر HTML اضافه کنید تا به نمادی که در شبکه نشان داده می شود، استایل دهید. نام کلاس‌های CSS بسته به نماد، “X” یا “O” خواهد بود:this.classList.add(playerSymbol.toLowerCase());
در داخل فایل “styles.css”، این دو کلاس جدید را برای نمادهای “X” و “O” اضافه کنید. نمادهای “X” و “O” به رنگ های مختلف نمایش داده می شوند:.x { color: blue; اندازه قلم: 80px;}.o { رنگ: قرمز; اندازه فونت: 80px;}
در فایل جاوا اسکریپت، پس از تغییر innerHTML برای نمایش نماد، نماد را تعویض کنید. برای مثال، اگر بازیکن فقط یک “X” گذاشته است، نماد بعدی را به “O” تغییر دهید:if (playerSymbol === “X”) playerSymbol = “O”else playerSymbol = “X”
برای اجرای بازی، فایل “index.html” را در یک مرورگر وب باز کنید تا شبکه 3 در 3 نمایش داده شود:
با کلیک بر روی سلول ها، نمادها را در شبکه قرار دهید. بازی به طور متناوب بین نمادهای “X” و “O” خواهد بود:

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

let playerSymbol = "X";

let gameEnded = false

for (let i = 1; i <= 9; i++) {
  document.getElementById(i.toString()).addEventListener(
    "click", 
    function() {
            
    }
  );
}

if (this.innerHTML === "" && !gameEnded) {
  this.innerHTML = playerSymbol;
}

this.classList.add(playerSymbol.toLowerCase());

.x {
  color: blue;
  font-size: 80px;
}

.o {
  color: red;
  font-size: 80px;
}

if (playerSymbol === "X")
  playerSymbol = "O"
else
  playerSymbol = "X"

نحوه تعیین برنده

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

در داخل فایل جاوا اسکریپت خود، یک متغیر جدید اضافه کنید تا تمام موقعیت های “برنده” ممکن برای شبکه 3 در 3 ذخیره شود. به عنوان مثال، “[1،2،3]” ردیف بالایی است، یا “[1،4،7]” یک ردیف مورب است. ]، [7، 8، 9]، [1، 4، 7]، [2، 5، 8]، [3، 6، 9]، [1، 5، 9]، [3، 5، 7] ;
یک تابع جدید به نام checkWin():function checkWin() اضافه کنید { }
در داخل تابع، هر یک از موقعیت های برنده ممکن را حلقه کنید: برای (بگذارید i = 0; i < winPos.length; i++) {}
در داخل حلقه for، بررسی کنید که آیا همه سلول‌ها دارای نماد پخش‌کننده هستند:if ( document.getElementById(winPos[i][0]).innerHTML === playerSymbol && document.getElementById(winPos[i][1]).innerHTML = == playerSymbol && document.getElementById(winPos[i][2]).innerHTML === playerSymbol) {}
اگر شرط به درستی ارزیابی شود، تمام نمادها در یک خط مستقیم قرار دارند. در داخل دستور if، یک پیام به کاربر نمایش دهید. همچنین می توانید با افزودن یک کلاس CSS به نام “win”، استایل عنصر HTML را تغییر دهید:document.getElementById(winPos[i][0]).classList.add(“win”);document.getElementById(winPos[i] [1]).classList.add(“win”);document.getElementById(winPos[i][2]).classList.add(“win”); gameEnded = true;setTimeout(function() { alert(playerSymbol + “wins!”);}, 500);
این کلاس CSS “win” را به فایل “styles.css” اضافه کنید. وقتی بازیکن برنده شود، رنگ پس‌زمینه سلول‌های برنده را به زرد تغییر می‌دهد: win { background-color: yellow;}
تابع checkWin() را هر بار که بازیکنی نوبت دارد، در داخل کنترل کننده رویداد اضافه شده در مراحل قبلی، فراخوانی کنید: برای (اجازه دهید i = 1؛ i <= 9؛ i++) { // هر زمان که بازیکنی روی یک سلول سند کلیک کند. getElementById(i.toString()).addEventListener( "click", function() { if (this.innerHTML === "" && !gameEnded) { // نمایش "X" و "O" در سلول سبک آن را this.innerHTML = playerSymbol؛ this.classList.add(playerSymbol.toLowerCase()); // بررسی کنید که آیا بازیکنی برنده شده است ( )؛ // برای نوبت بعدی نماد را با نماد دیگر عوض کنید اگر (playerSymbol = == "X") playerSymbol = "O" else playerSymbol = "X" } } )؛}

let winPos = [
  [1, 2, 3], [4, 5, 6], 
  [7, 8, 9], [1, 4, 7], 
  [2, 5, 8], [3, 6, 9], 
  [1, 5, 9], [3, 5, 7]
];

function checkWin() {
  
}

for (let i = 0; i < winPos.length; i++) {

}

if (
  document.getElementById(winPos[i][0]).innerHTML === playerSymbol &&
  document.getElementById(winPos[i][1]).innerHTML === playerSymbol &&
  document.getElementById(winPos[i][2]).innerHTML === playerSymbol
) {

}

document.getElementById(winPos[i][0]).classList.add("win");
document.getElementById(winPos[i][1]).classList.add("win");
document.getElementById(winPos[i][2]).classList.add("win"); 
gameEnded = true;

setTimeout(function() {
  alert(playerSymbol + " wins!");
}, 500);

.win {
  background-color: yellow;
}

for (let i = 1; i <= 9; i++) {
  // Whenever a player clicks on a cell
  document.getElementById(i.toString()).addEventListener(
    "click", 
    function() {
      if (this.innerHTML === "" && !gameEnded) {
        // Display either "X" or "O" in the cell, and style it
        this.innerHTML = playerSymbol;
        this.classList.add(playerSymbol.toLowerCase());
                
        // Check if a player has won
        checkWin();
                
        // Swap the symbol to the other one for the next turn
        if (playerSymbol === "X")
          playerSymbol = "O"
        else
          playerSymbol = "X"
      }
    }
  );
}

نحوه ریست کردن صفحه بازی

هنگامی که یک بازیکن در بازی برنده شد، می توانید صفحه بازی را دوباره تنظیم کنید. همچنین در صورت تساوی می توانید صفحه بازی را ریست کنید.

در فایل HTML، بعد از جدول، یک دکمه تنظیم مجدد اضافه کنید:Reset
مقداری استایل به دکمه تنظیم مجدد اضافه کنید:.container { display: flex; flex-direction: column;}#reset { margin: 48px 40%; padding: 20px;}
در فایل جاوا اسکریپت، یک کنترل کننده رویداد اضافه کنید که هر زمان که کاربر روی دکمه بازنشانی کلیک کند اجرا می شود:document.getElementById(“reset”).addEventListener( “click”, function() { });
برای هر سلول در شبکه، عنصر HTML را با استفاده از تابع getElementById() دریافت کنید. برای حذف نمادهای «O» و «X»، innerHTML را بازنشانی کنید و همه استایل‌های دیگر CSS را حذف کنید: برای (بگذارید i = 1; i <= 9; i++) { document.getElementById(i.toString()).innerHTML = ""؛ document.getElementById(i.toString()).classList.remove("x"); document.getElementById(i.toString()).classList.remove("o"); document.getElementById(i.toString()).classList.remove("win"); بازی پایان یافت = نادرست؛}
بازی را با باز کردن فایل “index.html” در یک مرورگر وب اجرا کنید.
شروع به قرار دادن نمادهای “X” و “O” در شبکه کنید. سعی کنید یکی از نمادها برنده شوید.
دکمه ریست را فشار دهید تا صفحه بازی ریست شود.

<button id="reset">Reset</button>

.container {
  display: flex;
  flex-direction: column;
}

#reset {
  margin: 48px 40%;
  padding: 20px;
}

document.getElementById("reset").addEventListener(
  "click", 
  function() {

  }
);

for (let i = 1; i <= 9; i++) {
  document.getElementById(i.toString()).innerHTML = "";
  document.getElementById(i.toString()).classList.remove("x");
  document.getElementById(i.toString()).classList.remove("o");
  document.getElementById(i.toString()).classList.remove("win");
  gameEnded = false;
}

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

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

هیچ راهی بهتر از تمرین برنامه نویسی برای بهبود برنامه نویسی وجود ندارد!

مطلب مرتبط: راهنمای مبتدیان برای استفاده از Velo توسط Wix