لینک کوتاه : https://magicfile.ir/?p=4670
دانلود کد جاوا اسکریپت بازی با کلمات (بازی تعاملی با کلمات ) html -javascript -css
بازی "بازی با کلمات" یک نمونه بسیار جذاب از ترکیب HTML، CSS و JavaScript برای ایجاد یک تجربه تعاملی و آموزشی است. در این بازی کاربر باید با اتصال حروف موجود، کلمات معنادار بسازد. این کلمات از پیش در لیستی برای هر مرحله مشخص شده‌اند. ساختار کلی بازی شامل یک رابط گرافیکی ساده اما مؤثر است که هم برای کاربران دسکتاپ و هم موبایل قابل استفاده است. حروف در هر مرحله به شکل دایره‌ای نمایش داده می‌شوند و کاربر با کشیدن انگشت یا ماوس روی آن‌ها، کلمه مورد نظر را تشکیل می‌دهد.
منطق اصلی بازی در فایل JavaScript پیاده‌سازی شده است. ابتدا مراحل مختلف در یک آرایه تعریف شده‌اند که هر مرحله شامل حروف مجاز و کلمات هدف است. با شروع هر مرحله، حروف روی صفحه قرار می‌گیرند و کاربر با انتخاب آن‌ها، یک کلمه می‌سازد. پس از رها کردن انگشت یا ماوس، سیستم بررسی می‌کند که آیا کلمه ساخته‌شده در لیست کلمات معتبر آن مرحله وجود دارد یا خیر. در صورت درست بودن، به لیست کلمات پیدا شده اضافه می‌شود و امتیاز بر اساس طول کلمه به کاربر تعلق می‌گیرد.
یکی از ویژگی‌های جذاب این بازی، استفاده از بوم گرافیکی (Canvas) برای رسم خطوط بین حروف است. این موضوع علاوه بر زیبایی بصری، تعامل بازی را لذت‌بخش‌تر می‌کند. وقتی کاربر حروف را یکی پس از دیگری انتخاب می‌کند، یک خط منحنی رنگی بین آن‌ها رسم می‌شود که با افکت سایه و گرادیان طراحی شده است. همچنین ترتیب انتخاب حروف با عدد روی هر دکمه نمایش داده می‌شود که باعث درک بهتر ساختار کلمه برای بازیکن می‌گردد.
پس از اتمام هر مرحله (چه از طریق تمام شدن زمان و چه با یافتن همه کلمات)، یک پنجره مودال ظاهر می‌شود که خلاصه‌ای از عملکرد بازیکن را نشان می‌دهد. این شامل امتیاز کسب‌شده، تعداد کلمات پیدا شده و زمان باقی‌مانده است. اگر مراحل دیگری باقی مانده باشند، گزینه‌ای برای رفتن به مرحله بعدی نمایش داده می‌شود و در غیر این صورت، بازی به کاربر پایان موفقیت‌آمیز را اعلام کرده و امکان شروع مجدد را فراهم می‌کند.
در مجموع، این بازی نه تنها برای سرگرمی طراحی شده، بلکه می‌تواند ابزاری برای تقویت ذهن، گسترش دایره لغات فارسی و حتی یادگیری برنامه‌نویسی فرانت‌اند باشد. پیاده‌سازی آن نشان‌دهنده استفاده بهینه از امکانات DOM، رویدادهای کاربری، ترسیم در بوم (Canvas) و مدیریت تایمرها در جاوااسکریپت است. با کمی توسعه بیشتر، می‌توان آن را به یک اپلیکیشن آموزشی قدرتمند در زبان فارسی تبدیل کرد.
نمونه تصاویر در زمان اجرا
🎮 آموزش ساخت بازی "بازی با کلمات" با جاوااسکریپت (کامل و تعاملی)
در این مقاله، قصد داریم کدی را بررسی کنیم که یک بازی تعاملی و زیبا برای ساخت کلمات از حروف داده‌شده ایجاد می‌کند. این پروژه به زبان HTML، CSS و JavaScript نوشته شده و به‌صورت کاملاً راست‌چین و فارسی‌سازی‌شده پیاده‌سازی شده است. شما می‌توانید آن را در سایت خود قرار دهید یا توسعه دهید.
📌 معرفی کلی بازی
در این بازی، کاربر باید با کشیدن انگشت یا ماوس روی حروف چیده‌شده به‌صورت دایره‌ای، کلمات معنادار بسازد. بازی دارای مراحل مختلف است و در هر مرحله، مجموعه‌ای از حروف و لیستی از کلمات مخفی وجود دارد که بازیکن باید آن‌ها را پیدا کند. بازی دارای تایمر، امتیازدهی و نمایش پیشرفت بازیکن است.
🧠 امکانات بازی
-
نمایش مرحله فعلی و تعداد کل مراحل
-
شمارش کلمات باقی‌مانده
-
تایمر ۶۰ ثانیه‌ای برای هر مرحله
-
امتیازدهی براساس طول کلمه
-
طراحی زیبا با افکت کشیدن خط بین حروف
-
نمایش بازخورد ✓ یا ✗ برای کلمات درست یا اشتباه
-
نمایش پنجره موفقیت پس از تکمیل هر مرحله
-
قابلیت رفتن به مرحله بعد یا شروع مجدد بازی
🛠️ ساختار فایل‌ها
-
HTML: ساختار صفحه و عناصر بازی
-
CSS: استایل‌های مربوط به دکمه‌ها، دایره حروف، مودال، تایمر و ...
-
JavaScript: منطق بازی شامل مراحل، امتیازدهی، تایمر، کشیدن خط، بررسی کلمات و مدیریت مراحل
✍️ توضیح بخش‌های مهم کد
1. لیست مراحل بازی
const stages = [ { letters: ['ک', 'ا', 'ر', 'م', 'ن', 'د'], words: ['کار', 'مرد', 'مار', 'نرم', 'کارمند'] }, ... ];
در این آرایه، حروف هر مرحله و کلمات هدف مشخص می‌شوند.
2. آغاز هر مرحله
function startStage(stageIndex) { ... }
این تابع:
-
حروف جدید را رسم می‌کند.
-
اطلاعات مرحله و تایمر را بازنشانی می‌کند.
-
تایمر ۶۰ ثانیه‌ای را آغاز می‌کند.
3. رسم حروف به‌شکل دایره‌ای
function drawLetters(letters) { ... }
با استفاده از توابع مثلثاتی Math.cos و Math.sin حروف به‌صورت دایره‌ای نمایش داده می‌شوند.
4. پردازش لمس یا کلیک و کشیدن بین حروف
function startDrag(e) { ... } function dragOver(e) { ... } function endDrag(e) { ... }
با حرکت انگشت یا ماوس، حروف انتخاب شده ثبت می‌شوند و خطی بین آن‌ها رسم می‌شود.
5. بررسی کلمه ساخته‌شده
function submitWord() { ... }
اگر کلمه ساخته‌شده در لیست کلمات معتبر مرحله باشد و قبلاً انتخاب نشده باشد، به لیست کلمات پیدا شده افزوده می‌شود و امتیاز دریافت می‌کند.
6. نمایش بازخورد و افکت‌ها
function showWordFeedback(isCorrect) { ... }
علامت ✓ یا ✗ در کنار کلمه فعلی نمایش داده می‌شود تا به بازیکن بازخورد بدهد.
7. نمایش پایان مرحله
function showStageCompleteModal() { ... }
زمانی که بازیکن همه کلمات را پیدا کند یا زمان تمام شود، یک پنجره مودال باز می‌شود که اطلاعات مرحله و دکمه مرحله بعدی را نمایش می‌دهد.
8. شروع مرحله بعدی یا شروع مجدد بازی
function nextStage() { ... }
در صورت رسیدن به آخرین مرحله، بازی از ابتدا شروع می‌شود.
🧪 جمع‌بندی
این بازی یک نمونه عالی برای یادگیری:
-
کار با DOM
-
تعامل کاربر با ماوس یا لمس
-
رسم گرافیکی با Canvas
-
کار با تایمر و انیمیشن
است. شما می‌توانید این بازی را توسعه دهید و ویژگی‌هایی مانند:
-
دیکشنری فارسی
-
افزایش مراحل و ذخیره پیشرفت
-
طراحی موبایل‌پسند
را به آن اضافه کنید.
📁 فایل‌های موردنیاز
-
فایل
style.cssبرای طراحی ظاهری -
فایل
index.htmlکه شامل کد بالا است -
می‌توانید تمام اسکریپت را در یک فایل HTML ذخیره کرده و اجرا کنید.
✅ نتیجه‌گیری
این بازی نه تنها سرگرم‌کننده است، بلکه ابزاری بسیار آموزنده برای یادگیری مفاهیم مهم در توسعه فرانت‌اند (Front-End) می‌باشد. اگر شما هم علاقه‌مند به ساخت بازی‌های تحت وب هستید، این پروژه یک نقطه شروع عالی است.
برای شما کاربران عزیز پیشنهاد دانلود داده می شود.
