با استفاده از HTML، CSS، JavaScript، Tailwind CSS و Canvas Confetti یک بازی تیک تاک بسازید.

به جزیره ارتباط خوش آمدید.

Tic Tac Toe یک بازی کلاسیک است که نسل‌ها از آن لذت برده‌اند. این یک بازی ساده است که می توان آن را در هر مکان و در هر زمان فقط با یک قلم و کاغذ بازی کرد. اما با تکنولوژی مدرن می توانیم این بازی را به سطح بالاتری ببریم. در این ویدیو، نحوه ساخت یک بازی تیک تاک را با استفاده از HTML، CSS، جاوا اسکریپت، Tailwind CSS و Canvas Confetti بررسی خواهیم کرد.

https://www.youtube.com/watch?v=q3uI-1nNGDU

برای ایجاد صفحه بازی، از HTML و CSS استفاده می کنیم. ما یک شبکه 3×3 از مربع ایجاد می کنیم که بازیکنان می توانند روی آن کلیک کنند تا نمادهای خود را قرار دهند. همچنین از Tailwind CSS برای استایل دادن به برد و واکنش‌پذیر کردن آن استفاده می‌کنیم.

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

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

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

ما امتیاز هر بازیکن را با استفاده از جاوا اسکریپت پیگیری می کنیم و آن را در حافظه سمت سرویس گیرنده مرورگر ذخیره می کنیم. این به این معنی است که حتی اگر بازیکن صفحه را ببندد، امتیازها باقی خواهند ماند. ما همچنین یک دکمه “Reset Score” را ارائه خواهیم کرد که بازیکنان می توانند از آن برای بازنشانی امتیازات به صفر استفاده کنند.

برای بازنشانی بازی پس از پیروزی یا تساوی، دکمه “بازنشانی بازی” را ارائه می دهیم که بازیکنان می توانند از آن برای شروع یک بازی جدید استفاده کنند.

چگونه کار می کند؟

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

به‌طور پیش‌فرض، دیوی جونز و جک اسپارو را خواهید دید که به ترتیب X و O را نشان می‌دهند. اما اگر می خواهید بازی را شخصی سازی کنید، می توانید آواتارهای خود را از دستگاه محلی خود آپلود کنید. توجه داشته باشید که آواتارهای آپلود شده پس از بازخوانی صفحه باقی نخواهند ماند زیرا اتصال پایگاه داده وجود ندارد.

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

هر بازیکن امتیازی دارد که پس از کسب پیروزی یک امتیاز افزایش می یابد. امتیازها در سمت مشتری (در حافظه محلی مرورگر شما) ذخیره می شوند، بنابراین حتی اگر صفحه را ببندید، می توانید پیشرفت خود را پیگیری کنید. و اگر می خواهید دوباره شروع کنید، می توانید با کلیک بر روی دکمه “Reset Score” امتیازات را برای هر دو بازیکن به 0 بازنشانی کنید.

برای تنظیم مجدد بازی پس از پیروزی، می توانید روی دکمه “بازنشانی بازی” کلیک کنید.

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

در صورتی که بازی با تساوی به پایان برسد، یک پیغام پاپ آپ نمایش داده می شود که به شما اطلاع می دهد که بازی با تساوی به پایان رسیده است.

📦 نسخه ی نمایشی:
https://t3-game.vercel.app

⚓️اپلیکیشن

پس برای چی منتظری؟ بیایید کمی تیک تاک بازی کنیم!!!

فایل ها:

❤ انگیزه:

🍀حمایت کنید

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

یوتیوب
GitHub
توییتر