سورس ماشین بازی تحت وب با HTML، CSS و JavaScript

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

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

در کنار بخش اصلی بازی، یک Bottom Sheet نیز برای تنظیمات طراحی شده که امکان تغییر سرعت بازی را در اختیار بازیکن قرار می‌دهد. بنابراین این سورس فقط یک نمونه ساده از Canvas نیست و در آن بخش‌هایی از رابط کاربری و تعامل با کاربر نیز پیاده‌سازی شده است.

🎯 هدف بازی چیست؟

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

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

اگر ماشین با یکی از موانع برخورد کند، بازی متوقف شده و صفحه Game Over نمایش داده می‌شود. در این صفحه امتیاز نهایی نیز نمایش داده می‌شود و بازیکن می‌تواند با استفاده از گزینه شروع مجدد، یک بازی جدید را آغاز کند.

🕹️ کنترل ماشین

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

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

💻 محدودیت در دسکتاپ

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

🖼️ محیط بازی با Canvas

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

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

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

🚘 ساخت ماشین

ماشین بازی با استفاده از دستورات رسم Canvas ساخته شده است. برای ساخت ظاهر آن از شکل‌های ساده استفاده شده و لازم نیست یک فایل تصویری جداگانه برای ماشین در پروژه قرار دهید.

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

این روش یکی از روش‌های ساده برای شروع کار با بازی‌سازی دوبعدی در JavaScript است؛ زیرا به جای کار با سیستم پیچیده‌ای از عناصر HTML، همه چیز داخل یک محیط Canvas مدیریت می‌شود.

🛣️ جاده و خطوط متحرک

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

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

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

🧱 ایجاد موانع به صورت تصادفی

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

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

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

⬇️ حرکت موانع

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

سرعت حرکت موانع با متغیری به نام gameSpeed کنترل می‌شود. بنابراین می‌توان با تغییر این مقدار، میزان سختی بازی را نیز تغییر داد.

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

💥 سیستم تشخیص برخورد

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

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

این روش که به آن Rectangle Collision Detection گفته می‌شود، یکی از روش‌های رایج و ساده برای تشخیص برخورد در بازی‌های دوبعدی است و می‌تواند در پروژه‌های دیگری مانند بازی‌های پلتفرمر، بازی‌های تیراندازی و بسیاری از بازی‌های Canvas نیز استفاده شود.

🏆 سیستم امتیازدهی

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

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

پس از پایان بازی، امتیاز نهایی نیز در صفحه Game Over نمایش داده می‌شود تا بازیکن بتواند نتیجه خود را مشاهده کند.

💀 صفحه Game Over

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

سپس صفحه مخصوص Game Over نمایش داده می‌شود. در این بخش پیام پایان بازی و امتیاز نهایی بازیکن قرار دارد.

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

🔄 شروع مجدد بازی

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

همچنین تنظیمات سرعت بازی دوباره بررسی می‌شوند و Canvas برای اجرای یک دور جدید آماده می‌شود. استفاده از یک تابع برای آماده‌سازی بازی باعث شده کد مرتب‌تر باشد و از تکرار بخش‌های مشابه جلوگیری شود.

⚡ حلقه اصلی بازی

برای ایجاد حرکت و انیمیشن روان، این پروژه از requestAnimationFrame() استفاده می‌کند. این قابلیت مرورگر برای ساخت انیمیشن‌ها طراحی شده و برای بازی‌های Canvas گزینه بسیار مناسبی است.

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

🎚️ تنظیم سرعت بازی

یکی از امکانات جذاب این سورس، امکان تغییر سرعت بازی توسط خود کاربر است. برای این کار داخل بخش تنظیمات یک Range Slider قرار داده شده است.

مقدار این اسلایدر از ۱ تا ۱۰ قابل تغییر است و مقدار اولیه روی ۵ قرار دارد. مقدار انتخاب‌شده مستقیماً روی سرعت حرکت موانع تأثیر می‌گذارد.

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

📱 Bottom Sheet تنظیمات

برای نمایش تنظیمات بازی از یک Bottom Sheet استفاده شده است. این پنل از پایین صفحه ظاهر می‌شود و ظاهر آن شبیه پنل‌های تنظیمات مدرن در اپلیکیشن‌های موبایل طراحی شده است.

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

پنل با استفاده از CSS و Transition طراحی شده تا هنگام باز و بسته شدن حرکت نرم و مناسبی داشته باشد. همچنین در قسمت بالایی آن یک Drag Handle قرار گرفته تا ظاهر پنل طبیعی‌تر شود.

❌ بستن تنظیمات

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

این بخش علاوه بر کاربرد اصلی خود، نمونه خوبی برای تمرین کار با رویدادهای JavaScript و تغییر کلاس‌های CSS به صورت پویا است.

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

• index.html — ساختار اصلی صفحه، Canvas، نمایش امتیاز، Game Over و Bottom Sheet
• style.css — استایل‌های مربوط به محیط بازی، ماشین، صفحه پایان، دکمه‌ها و Bottom Sheet
• script.js — منطق اصلی بازی، کنترل ماشین، ایجاد و حرکت موانع، تشخیص برخورد، امتیازدهی و تنظیمات

🛠️ پیش‌نیازهای اجرای سورس

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

سپس می‌توانید فایل index.html را مستقیماً با مرورگر باز کنید و بازی را اجرا کنید. در صورت استفاده از VS Code نیز می‌توانید از افزونه‌هایی مانند Live Server برای اجرای پروژه در محیط توسعه استفاده کنید.

🚀 نصب و راه‌اندازی

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

این پروژه برای اجرا به سرور یا نصب پکیج‌های خارجی نیاز ندارد و می‌توانید آن را حتی به صورت مستقیم روی سیستم خود اجرا کنید.

📋 مشخصات فنی

• زبان‌های برنامه‌نویسی: HTML، CSS و JavaScript
• رابط گرافیکی: HTML Canvas
• موتور بازی‌سازی: ندارد
• کتابخانه خارجی: ندارد
• سیستم انیمیشن: requestAnimationFrame
• سیستم تشخیص برخورد: Rectangle Collision
• سیستم تولید موانع: تصادفی
• سیستم امتیازدهی: دارد
• صفحه Game Over: دارد
• تنظیم سرعت بازی: دارد
• رابط تنظیمات: Bottom Sheet
• نوع اجرا: مرورگر
• تعداد فایل: 3

🎁 این سورس مناسب چه کسانی است؟

• 👨‍💻 برنامه‌نویسانی که می‌خواهند JavaScript را با یک پروژه واقعی تمرین کنند
• 🎮 علاقه‌مندان به ساخت بازی‌های دوبعدی تحت وب
• 📚 افرادی که قصد یادگیری HTML Canvas را دارند
• 💻 افراد مبتدی که به دنبال یک پروژه ساده اما قابل توسعه هستند
• 🌐 کسانی که می‌خواهند بدون استفاده از موتور بازی‌سازی یک بازی مرورگری بسازند
• 🧩 توسعه‌دهندگانی که به دنبال یک پایه آماده برای ساخت بازی ماشین هستند
• 💻 صاحبان وبسایت و افرادی که دنبال یک بازی جذاب برای بخشی از وبسایت خود هستند

🧠 چه چیزهایی از این پروژه یاد می‌گیریم؟

این سورس می‌تواند تمرین خوبی برای یادگیری چند مفهوم مهم برنامه‌نویسی وب باشد. با بررسی کد پروژه می‌توانید با Canvas، مختصات X و Y، آرایه‌ها، تولید اعداد تصادفی، Event Listener، حلقه بازی، requestAnimationFrame، تشخیص برخورد و تغییر وضعیت عناصر آشنا شوید.

همچنین بخش رابط کاربری پروژه مفاهیمی مانند کلاس‌های CSS، Transition، رویدادهای کلیک و ساخت Bottom Sheet را در قالب یک پروژه واقعی نشان می‌دهد.

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

🚀 ایده‌هایی برای توسعه بازی

ساختار این پروژه به شکلی است که می‌توانید امکانات زیادی به آن اضافه کنید و آن را از یک بازی ساده به یک پروژه کامل‌تر تبدیل کنید.

• ❤️ اضافه کردن سیستم جان برای بازیکن
• 🏆 ذخیره بهترین امتیاز با LocalStorage
• 🎵 اضافه کردن موسیقی و افکت‌های صوتی
• 🚘 اضافه کردن چند مدل ماشین
• 🎨 امکان انتخاب رنگ ماشین
• 🌈 اضافه کردن پوسته‌ها و ظاهرهای مختلف
• 🌙 اضافه کردن حالت شب و روز
• 🔥 افزایش خودکار سختی با افزایش امتیاز
• 💎 اضافه کردن سکه و آیتم‌های قابل جمع‌آوری
• 📱 اضافه کردن کنترل لمسی برای گوشی
• 🎮 اضافه کردن دکمه‌های چپ و راست مخصوص موبایل
• 🥇 ساخت جدول بهترین رکوردها
• ⏸️ اضافه کردن قابلیت توقف و ادامه بازی
• 💻 اضافه کردن قابلیت پشتیبانی از دکمه های کیبورد برای تجربه بهتر در کامپیوتر
• ⚙️ اضافه کردن تنظیمات بیشتر به Bottom Sheet

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

💡 چرا این سورس؟

• 🚗 یک بازی کامل و آماده اجرا
• 🎮 مناسب برای تمرین ساخت بازی با JavaScript
• 🖼️ استفاده از Canvas بدون نیاز به موتور بازی‌سازی
• 📦 بدون کتابخانه و وابستگی خارجی
• 💥 دارای سیستم تشخیص برخورد
• 🧱 دارای موانع تصادفی
• 🏆 دارای سیستم امتیازدهی
• 💀 دارای صفحه Game Over
• 🔄 دارای سیستم شروع مجدد
• 🎚️ دارای تنظیم سرعت بازی
• 📱 دارای Bottom Sheet برای تنظیمات
• 🧩 ساختار ساده و قابل توسعه
• 🎓 مناسب برای یادگیری مفاهیم کاربردی JavaScript
• 🚀 قابل توسعه برای ساخت یک بازی بزرگ‌تر

🔥 جمع‌بندی

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

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

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

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