سورس شکار دایره | بازی مرورگری با HTML، CSS و JavaScript

شکار دایره یک بازی تحت وب ساده و سریع است که با HTML، CSS و JavaScript خالص ساخته شده و بدون هیچ کتابخانه‌ی خارجی اجرا می‌شود. در این بازی، دایره‌های نئونی به صورت تصادفی در محیط بازی ظاهر می‌شوند و بازیکن باید در مدت ۳۰ ثانیه بیشترین تعداد ممکن را با کلیک یا لمس بگیرد. 🎯

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

✨ قابلیت‌های اصلی

• سیستم امتیازدهی زنده: هر کلیک موفق روی دایره، یک امتیاز اضافه می‌کند و امتیاز به‌صورت لحظه‌ای روی صفحه به‌روز می‌شود.
• زمان‌سنج معکوس: بازی به‌صورت پیش‌فرض ۳۰ ثانیه زمان دارد و زمان باقی‌مانده در نوار بالای صفحه نمایش داده می‌شود.
• ذخیره‌ی رکورد در مرورگر: بالاترین امتیاز با استفاده از localStorage ذخیره می‌شود و بعد از بستن مرورگر نیز باقی می‌ماند.
• ظهور تصادفی دایره‌ها: دایره‌ها در موقعیت‌های تصادفی با اندازه‌های متفاوت ظاهر می‌شوند.
• انیمیشن حرفه‌ای: دایره‌ها با افکت Pop-In ظاهر و با افکت Hit بعد از کلیک محو می‌شوند.
• طراحی نئونی و مدرن: پس‌زمینه گرادیانتی سه‌رنگ، افکت Glassmorphism و دایره‌های درخشان با فناوری CSS.
• ریسپانسیو کامل: بازی روی موبایل، تبلت و دسکتاپ به‌خوبی نمایش داده می‌شود و برای صفحه‌های کوچک نیز Media Query اختصاصی دارد.
• بدون وابستگی خارجی: هیچ کتابخانه یا فایل خارجی بارگذاری نمی‌شود و کل پروژه از سه فایل ساده تشکیل شده است.
• حجم بسیار کم: مجموع حجم فایل‌ها کمتر از ده کیلوبایت است.
• مناسب برای توسعه: ساختار کد ماژولار، کامنت‌گذاری‌شده و دارای بخش تنظیمات متمرکز (CONFIG) برای تغییر سریع مقادیر بازی.

🕹️ نحوه عملکرد بازی

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

در ابتدای هر اسپاون، JavaScript موقعیت تصادفی برای دایره محاسبه می‌کند؛ به‌گونه‌ای که دایره کاملاً داخل محدوده بازی قرار بگیرد. دایره‌ها بعد از یک عمر مشخص (قابل تنظیم در بخش CONFIG) به صورت خودکار از صفحه حذف می‌شوند. اگر بازیکن روی دایره کلیک کند، امتیاز اضافه شده و دایره با افکت Hit محو می‌شود.

بازی تا زمان اتمام زمان‌سنج ادامه دارد و پس از آن، یک صفحه‌ی پایان باز می‌شود که امتیاز نهایی، رکورد فعلی و پیام مناسب («رکورد جدید» یا «زمان تمام شد») را نمایش می‌دهد. 🔵

📁 ساختار فایل‌های پروژه

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

🌐 فایل HTML

فایل index.html ساختار اصلی صفحه را ایجاد می‌کند. صفحه به زبان فارسی و با چیدمان راست‌به‌چپ تنظیم شده است. بخش‌های اصلی شامل یک هدر با عنوان بازی، یک نوار آماری با سه بخش امتیاز، زمان و رکورد، محیط اصلی بازی و یک لایه‌ی Overlay برای شروع و پایان بازی است.

استفاده از شناسه‌های معنادار مانند gameArea، score، time و best باعث شده JavaScript بتواند به‌سادگی به تمام عناصر کلیدی دسترسی داشته باشد. لایه‌ی Overlay نیز برای مدیریت وضعیت بازی در ابتدا و انتها استفاده می‌شود و با کلاس hidden مخفی یا نمایش داده می‌شود.

🎨 طراحی با CSS

فایل style.css مسئولیت طراحی کامل ظاهر پروژه را برعهده دارد. طراحی بر پایه‌ی ترکیب گرادیانت سه‌رنگ، افکت Glassmorphism و دایره‌های نئونی بنا شده است. تمام استایل‌ها با استفاده از متغیرهای CSS و بدون استفاده از فایل‌های خارجی نوشته شده‌اند.

🔵 طراحی دایره‌ها

دایره‌ها با کلاس .circle طراحی شده‌اند و از یک پس‌زمینه‌ی رادیال‌گرادیانت برای ایجاد حس عمق و درخشش استفاده می‌کنند. سایه‌های نئونی خارجی و داخلی باعث می‌شوند دایره‌ها به‌نظر برجسته و جذاب بیایند. انیمیشن pop-in برای لحظه‌ی ظاهر شدن دایره و انیمیشن hit-effect برای لحظه‌ی کلیک روی آن تعریف شده است.

🎬 انیمیشن‌ها و افکت‌ها

در این پروژه از چندین انیمیشن CSS استفاده شده تا تجربه‌ی کاربری روان‌تر و جذاب‌تر شود:

• Pop-In: دایره‌ها با بزرگ شدن از صفر ظاهر می‌شوند.
• Hit-Effect: دایره‌ها بعد از کلیک بزرگ شده و محو می‌شوند.
• Hover: با نزدیک شدن نشانگر ماوس به دایره، اندازه‌ی آن حدود ۱۰٪ بزرگ‌تر می‌شود.
• Overlay Fade: لایه‌ی شروع و پایان با یک محو شدن نرم ظاهر یا ناپدید می‌شود.

📱 طراحی ریسپانسیو

برای نمایشگرهای کوچک‌تر از ۴۸۰ پیکسل، اندازه‌ی عنوان، نوار آماری، دکمه‌ها و پدینگ‌ها به‌صورت خودکار کاهش می‌یابد. محیط بازی با استفاده از aspect-ratio نسبت ثابت خود را در همه‌ی اندازه‌ها حفظ می‌کند و از اسکرول افقی جلوگیری می‌شود.

⚙️ منطق JavaScript

منطق اصلی بازی در فایل script.js قرار دارد. در ابتدای فایل، یک بخش با نام CONFIG تعریف شده که تمام مقادیر قابل تنظیم بازی را در خود دارد. این ساختار باعث می‌شود تغییر سختی بازی بدون دست زدن به منطق اصلی، تنها با ویرایش چند عدد ساده انجام شود.

const CONFIG = {
    gameDuration: 30,        // مدت بازی (ثانیه)
    circleLife: 1200,        // عمر هر دایره (میلی‌ثانیه)
    spawnInterval: 700,      // فاصله‌ی ظهور دایره‌ها
    minSize: 40,             // حداقل اندازه‌ی دایره
    maxSize: 70,             // حداکثر اندازه‌ی دایره
};

سه تابع اصلی، منطق بازی را مدیریت می‌کنند:

• startGame(): مقادیر امتیاز و زمان را ریست می‌کند، تایمرها را فعال می‌کند و بازی را شروع می‌کند.
• spawnCircle(): یک دایره‌ی جدید در موقعیت و اندازه‌ی تصادفی می‌سازد و رویداد کلیک را به آن متصل می‌کند.
• endGame(): تایمرها را متوقف می‌کند، رکورد را ذخیره می‌کند و صفحه‌ی پایان را نمایش می‌دهد.

🖱️ مدیریت ورودی

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

🏆 ذخیره‌ی رکورد

رکورد کاربر با استفاده از localStorage در مرورگر ذخیره می‌شود. این بدان معناست که حتی بعد از بستن مرورگر و روشن کردن دوباره‌ی سیستم، رکورد کاربر حفظ می‌شود. هنگام پایان بازی، اگر امتیاز کاربر از رکورد قبلی بیشتر باشد، پیام «رکورد جدید» نمایش داده می‌شود و مقدار جدید ذخیره می‌شود.

📐 محاسبه‌ی دقیق موقعیت دایره‌ها

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

این روش از نظر فنی دقیق‌تر از روش‌های ساده است و باعث می‌شود حتی دایره‌های بزرگ همیشه به‌طور کامل داخل محدوده‌ی بازی باقی بمانند. 📏

🧩 امکانات قابل توسعه

این پروژه عمداً با ساختاری ساده و قابل توسعه نوشته شده تا بتوان در نسخه‌های بعدی امکانات بیشتری به آن اضافه کرد. برای مثال:

• 🎯 اضافه کردن هدف‌های ویژه با امتیاز بیشتر
• 💥 اضافه کردن هدف‌های منفی که امتیاز را کم می‌کنند
• ⚡ افزایش خودکار سرعت در طول بازی
• ❤️ اضافه کردن سیستم جان و خطا
• 🔊 اضافه کردن افکت صوتی هنگام کلیک
• 🎵 اضافه کردن موسیقی پس‌زمینه
• 📈 ساخت سیستم مرحله‌بندی و افزایش تدریجی سختی
• 🌙 حالت تاریک و روشن
• 🏅 نمایش صفحه‌ی رتبه‌بندی محلی
• 📊 ذخیره‌ی آمار عملکرد بازیکن در مرورگر

🚀 ایده برای تبدیل شدن به یک بازی کامل‌تر

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

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

📚 مفاهیم آموزشی استفاده‌شده

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

• ساختاردهی صفحه با HTML و طراحی ریسپانسیو
• استایل‌دهی مدرن با CSS، گرادیانت، Glassmorphism و سایه‌های نئونی
• استفاده از document.getElementById() برای دسترسی به عناصر
• ثبت رویداد با addEventListener()
• استفاده از رویداد pointerdown برای پشتیبانی از ماوس و لمس
• محاسبه‌ی موقعیت عناصر با clientWidth و offsetWidth
• تولید عدد تصادفی با Math.random() و Math.floor()
• کار با تایمرها با setInterval() و clearInterval()
• استفاده از localStorage برای ذخیره‌ی اطلاعات در مرورگر
• ایجاد و حذف المان‌ها به‌صورت داینامیک با createElement و remove
• مدیریت وضعیت بازی با متغیرها و توابع

📌 اجرای پروژه

1. فایل‌های پروژه را در یک پوشه‌ی واحد قرار دهید.
2. فایل index.html را با یک مرورگر مدرن باز کنید.
3. روی دکمه‌ی «شروع بازی» کلیک کنید.
4. دایره‌های ظاهر شده را سریع کلیک کنید و امتیاز جمع کنید.
5. پس از پایان زمان، امتیاز و رکورد شما نمایش داده می‌شود.

🛠️ فایل‌های قابل ویرایش

برای تغییر ظاهر: فایل style.css محل مناسب برای تغییر رنگ‌ها، اندازه‌ی کارت، افکت‌های نئونی، انیمیشن‌ها و طراحی ریسپانسیو است.

برای تغییر منطق بازی: فایل script.js محل اصلی تنظیمات (بخش CONFIG) و منطق کلی بازی است. با ویرایش همان چند عدد ابتدای فایل می‌توان مدت بازی، سرعت ظهور، عمر دایره‌ها و اندازه‌ی آن‌ها را تغییر داد.

برای تغییر ساختار صفحه: فایل index.html برای اضافه کردن عناصر جدید مانند دکمه‌ی توقف، منوی تنظیمات، صفحه‌ی رتبه‌بندی یا اطلاعات اضافی درباره‌ی بازی استفاده می‌شود.

🎯 تجربه‌ی بازی

هسته‌ی اصلی این بازی روی یک مکانیزم ساده و در عین حال اعتیادآور بنا شده است: پیدا کردن و کلیک کردن روی دایره‌هایی که لحظه‌ای ظاهر می‌شوند و سپس ناپدید می‌شوند. این ساختار باعث می‌شود بازیکن هر بار بخواهد یک بار دیگر بازی کند تا رکورد قبلی خود را بشکند.

ترکیب سه عنصر «امتیاز»، «زمان» و «رکورد» یک حلقه‌ی بازخوردی قوی ایجاد می‌کند: بازیکن امتیاز خود را می‌بیند، رکورد قبلی را در ذهن دارد و سعی می‌کند در زمان باقی‌مانده از آن عبور کند. این حلقه‌ی بازخوردی همان چیزی است که بازی‌های کوچک مرورگری را جذاب می‌کند. 🎯

🖱️ تعامل با کاربر

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

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

📊 امکان اضافه کردن سیستم مراحل

یکی از ساده‌ترین راه‌ها برای تبدیل این بازی به یک پروژه‌ی جذاب‌تر، اضافه کردن سیستم مرحله‌بندی است. هر مرحله می‌تواند قوانین مخصوص خود را داشته باشد:

• 🎯 مرحله‌ی اول با دایره‌های بزرگ و زمان بیشتر
• ⚡ مرحله‌ی دوم با سرعت ظهور بالاتر
• 🔵 مرحله‌ی سوم با دایره‌های کوچک‌تر
• 💥 مرحله‌ی چهارم با اضافه شدن هدف‌های منفی
• 🏆 مرحله‌ی پنجم با چند هدف همزمان

این مراحل نیازی به طراحی پیچیده ندارند و می‌توان بیشتر آن‌ها را تنها با تغییر چند مقدار در بخش CONFIG پیاده‌سازی کرد. 🚀

🔥 افزایش سختی بازی

در نسخه‌ی فعلی، مکانیزم بازی ثابت است اما می‌توان با اضافه کردن چند قانون، آن را چالش‌برانگیزتر کرد. برای نمونه، هر چند ثانیه یک بار سرعت ظهور دایره‌ها افزایش یابد یا اندازه‌ی آن‌ها به‌تدریج کوچک‌تر شود. روش دیگر اضافه کردن حالت «بقا» است که در آن بازیکن سه جان دارد و هر بار دایره‌ای از دست برود، یک جان کم می‌شود.

همچنین می‌توان محدودیت زمانی را کمتر کرد یا با پایان زمان، امتیاز را در رتبه‌بندی محلی ذخیره کرد تا بازیکن بتواند با خودش یا دیگران رقابت کند. 📈

📈 حالت‌های بازی پیشنهادی

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

1. حالت زمان‌دار (فعلی): بازیکن باید در ۳۰ ثانیه بیشترین امتیاز را بگیرد.
2. حالت بقا: بازی بدون زمان ادامه دارد اما هر اشتباه یک جان کم می‌کند.
3. حالت دقتی: فقط دایره‌های کوچک امتیاز دارند.
4. حالت رنگ: تنها دایره‌های با رنگ مشخص باید کلیک شوند.
5. حالت سرعت: هر ۵ ثانیه، سرعت ظهور دو برابر می‌شود.

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

🎨 شخصی‌سازی ظاهر

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

برای نمونه می‌توان پس‌زمینه‌ی گرادیانتی را به رنگ‌های دیگر تغییر داد، افکت Glassmorphism را حذف کرد، به دایره‌ها شکل‌های متفاوت داد یا انیمیشن جدیدی اضافه کرد. حتی می‌توان با استفاده از CSS Animation، حرکت مداوم برای دایره‌ها یا افکت‌های شبیه‌سازی فیزیک ایجاد کرد. ✨

عنوان، متن‌های راهنما، اندازه‌ی کارت اصلی و فاصله‌ی بین عناصر نیز قابل تغییر هستند و می‌توان ظاهر پروژه را با هویت بصری هر برند یا پروژه‌ای هماهنگ کرد.

📱 توسعه برای موبایل

یکی از نکات مهم این سورس، پشتیبانی کامل از موبایل است. از یک طرف طراحی ریسپانسیو با Media Query برای صفحه‌های کوچک بهینه شده و از طرف دیگر، رویداد pointerdown اجازه می‌دهد کاربر با لمس دایره‌ها را بگیرد بدون تأخیر.

محیط بازی با استفاده از aspect-ratio نسبت خود را حفظ می‌کند و در هر اندازه‌ای به‌درستی نمایش داده می‌شود. به همین دلیل بازی هم روی گوشی‌های کوچک و هم روی تبلت و دسکتاپ تجربه‌ی یکسانی دارد. 📱

💻 مناسب برای یادگیری JavaScript

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

به همین دلیل، این پروژه برای تمرین مفاهیمی مانند DOM، Event Listener، تایمرها، توابع، متغیرها، مختصات، اعداد تصادفی، ذخیره‌سازی محلی و مدیریت وضعیت بسیار مناسب است. ساختار تمیز پروژه اجازه می‌دهد هر قابلیت جدید به‌صورت مرحله‌ای اضافه شود و نتیجه‌ی آن مستقیماً در مرورگر قابل مشاهده باشد. 🧑‍💻

🧪 ایده‌های بیشتر برای توسعه

علاوه بر قابلیت‌های موجود، می‌توان امکانات دیگری نیز به این پروژه اضافه کرد:

• 🎮 منوی شروع با انتخاب سطح سختی
• 🔄 دکمه‌ی شروع مجدد در پایان بازی
• 🏅 نمایش جدول رتبه‌بندی محلی با ۵ امتیاز برتر
• 🔊 افکت صوتی برای کلیک موفق و پایان بازی
• 🎵 موسیقی پس‌زمینه قابل فعال و غیرفعال کردن
• 🌙 حالت تاریک و روشن با امکان جابه‌جایی
• ⚙️ بخش تنظیمات برای تغییر زمان و سختی
• 📊 نمودار عملکرد بازیکن در طول بازی
• 🌐 امکان اشتراک‌گذاری امتیاز در شبکه‌های اجتماعی

💡 جمع‌بندی

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

ساختار جداگانه‌ی فایل‌ها، تنظیمات متمرکز در بخش CONFIG، استفاده از pointerdown برای پشتیبانی از ماوس و لمس، ذخیره‌ی رکورد با localStorage و طراحی ریسپانسیو، از جمله نکات فنی این سورس هستند که آن را برای یادگیری و توسعه مناسب می‌کنند. 🚀

از همین پایه می‌توان یک بازی کامل‌تر با حالت‌های متنوع، سیستم مرحله‌بندی، هدف‌های ویژه و رتبه‌بندی محلی ساخت؛ بدون اینکه نیازی به بازنویسی ساختار اصلی پروژه باشد.