Tic Tac Toe یک بازی کلاسیک است که به راحتی می توان با استفاده از HTML، CSS و جاوا اسکریپت ایجاد کرد. در این مقاله مراحل ساخت بازی تیک تاک را از ابتدا مرور خواهیم کرد.
این یک طراحی ساده برای مبتدیان و نیم است. اما قبل از آن یکی دیگر را به اشتراک گذاشته ام بازی پیشرفته جاوا اسکریپت تیک تاک پا اگر بخواهید می توانید طراحی کنید.
مرحله 1: HTML را تنظیم کنید
ابتدا بیایید ساختار HTML بازی را ایجاد کنیم. برای نشان دادن تابلوی تیک تاک به یک جدول با 3 سطر و 3 ستون نیاز داریم.
هر سلول در جدول دکمه ای خواهد بود که بازیکن می تواند روی آن کلیک کند تا حرکت خود را انجام دهد. در اینجا کد HTML برای جدول آمده است:
<table>
<tr>
<td><button id="0"></button></td>
<td><button id="1"></button></td>
<td><button id="2"></button></td>
</tr>
<tr>
<td><button id="3"></button></td>
<td><button id="4"></button></td>
<td><button id="5"></button></td>
</tr>
<tr>
<td><button id="6"></button></td>
<td><button id="7"></button></td>
<td><button id="8"></button></td>
</tr>
</table>
مرحله 2: بازی را با CSS سبک کنید
در مرحله بعد، اجازه دهید مقداری CSS برای استایل دادن به جدول و دکمه ها اضافه کنیم. می‌توانیم از CSS برای تغییر رنگ پس‌زمینه جدول استفاده کنیم، اندازه و رنگ دکمه‌ها را تنظیم کنیم، و برای زیبا جلوه دادن بازی، مقداری padding و حاشیه اضافه کنیم.
table {
background-color: #f2f2f2;
width: 300px;
height: 300px;
margin: 0 auto;
}
button {
width: 100px;
height: 100px;
font-size: 48px;
background-color: #fff;
border: none;
padding: 0;
}
مرحله 3: با جاوا اسکریپت قابلیت اضافه کنید
اکنون که HTML و CSS را تنظیم کرده ایم، اجازه دهید جاوا اسکریپت را اضافه کنیم تا بازی کاربردی شود. ابتدا باید به هر دکمه یک رویداد شنونده اضافه کنیم که با کلیک بازیکن روی یک دکمه فعال می شود.
شنونده رویداد تابعی را فراخوانی می کند که بسته به نوبت چه کسی، متن دکمه را به “X” یا “O” به روز می کند.
for (let i = 0; i < 9; i++) {
let button = document.getElementById(i);
button.addEventListener("click", function() {
button.innerText = "X";
});
}
ما همچنین باید ردیابی کنیم که نوبت چه کسی است، بنابراین زمانی که بازیکن روی دکمه‌ای کلیک می‌کند، می‌توانیم بین «X» و «O» جایگزین کنیم.
ما می توانیم این کار را با ایجاد یک چرخش متغیر انجام دهیم که در ابتدا روی “X” تنظیم شده است و سپس هر بار که روی دکمه کلیک می شود روی “O” تغییر می کند.
let turn = "X";
for (let i = 0; i < 9; i++) {
let button = document.getElementById(i);
button.addEventListener("click", function() {
button.innerText = turn;
turn = (turn === "X") ? "O" : "X";
});
}
در نهایت، باید هر بار که یک دکمه کلیک می‌شود، برنده یا قرعه‌کشی را بررسی کنیم. پس از تکمیل تمام مراحل، یک بازی کاربردی جاوا اسکریپت تیک تاک خواهیم داشت که می‌توان آن را مستقیماً در مرورگر بازی کرد.
این یک مثال اساسی از ایجاد یک بازی Tic Tac Toe با استفاده از HTML، CSS و جاوا اسکریپت است. راه های زیادی برای بهبود و گسترش این بازی اساسی وجود دارد، مانند اضافه کردن دکمه تنظیم مجدد، ردیاب امتیاز یا حتی حالت چند نفره. با کمی خلاقیت و مقداری کدنویسی اضافی، امکانات بی پایان است.
