پرش به محتوا
حدس بزن!

حدس بزن!

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

سال: ۱۴۰۰نقش: طراح و توسعه‌دهنده
ترجمه از نسخه‌ی اصلی با هوش مصنوعی انجام شده
ReactTypeScriptViteTailwind CSSFramer MotionLucidePWA

معرفی

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

شروع یک دست

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

روند بازی

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

برد و باخت

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

راهنما و ریزه‌کاری‌ها

یک راهنمای کوتاه «چطوری بازی کنیم» و یک صفحه‌ی «درباره» هم هست تا تازه‌واردها سریع راه بیفتند. اشتراک‌گذاری امتیاز از Web Share API مرورگر استفاده می‌کند و روی دستگاه‌هایی که این قابلیت را ندارند، بی‌سروصدا به کپی در کلیپ‌بورد برمی‌گردد. بازی به‌صورت PWA نصب‌شدنی هم هست.

زیرساخت فنی

  • رابط کاربری با React و TypeScript، باندل‌شده با Vite
  • منطق بازی روی یک ماشین حالت با useReducer (چهار حالت: چیدن کلمه، بازی، برد، باخت)
  • استایل‌دهی با Tailwind CSS و پشتیبانی کامل راست‌به‌چپ
  • انیمیشن‌ها و جابه‌جایی صفحه‌ها با Framer Motion و آیکن‌ها از Lucide
  • افکت‌های صوتی ساخته‌شده با Web Audio API بدون هیچ فایل صوتی
  • اشتراک‌گذاری با Web Share API و نصب‌پذیری به‌شکل یک PWA