بازی HTML ساخته‌شده با ChatGPT، Gemini یا Claude را به اپلیکیشن Android تبدیل کنید

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

بله. این راهنما نشان می‌دهد چطور از هوش مصنوعی بخواهید بازی‌ای بنویسد که روی گوشی خوب کار کند، مشکلات رایج را چطور رفع کنید، و چطور آن را با Free HTML to APK به APK تبدیل کنید.

مرحله 1: یک فایل مستقل بخواهید

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

این یک پرامپت است که می‌توانید در ChatGPT، Gemini یا Claude جای‌گذاری کنید. بخش آخر را به ایده خودتان تغییر دهید:

Make a mobile HTML5 game as ONE index.html file with all CSS and
JavaScript inline. No external scripts, fonts or images; draw
everything with canvas or use emoji.

Rules for phones:
- Add a viewport meta tag with width=device-width, initial-scale=1,
  user-scalable=no.
- The canvas fills the whole screen and resizes when the screen
  size or rotation changes.
- Touch controls only: tap, swipe or on-screen buttons at least
  48 pixels big. No keyboard needed.
- Stop page scrolling and zooming while playing.
- Start on a title screen with a big Play button. Start sounds
  only after that first tap.
- Save the high score in localStorage and show it on the title
  screen.
- Pause when the app goes to the background.

My game: a landscape space shooter. Drag a finger to move the
ship, it fires on its own, enemies come in waves, and it gets
faster every wave.

مرحله 2: درست کردن کنترل‌های لمسی

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

دو مشکل لمسی دیگر هم زیاد پیش می‌آید:

• صفحه هنگام کشیدن اسکرول یا بزرگ‌نمایی می‌شود. از هوش مصنوعی بخواهید touch-action: none را به canvas اضافه کند و در کنترل‌کننده‌های لمسی preventDefault را فراخوانی کند.
• دکمه‌ها خیلی کوچک هستند. ناحیه لمس دست‌کم 48 پیکسلی و فاصله بین آن‌ها بخواهید. انگشت شست بزرگ است.

مرحله 3: متناسب کردن با صفحه

بازی‌ای که روی لپ‌تاپ 800 در 600 پیکسل است، روی گوشی بریده یا خیلی کوچک می‌شود. مطمئن شوید فایل یک تگ viewport مانند این دارد:

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

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

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

مرحله 4: صدا به اولین لمس نیاز دارد

اگر بازی شما روی گوشی صدا ندارد، چیزی خراب نیست. مرورگرها، و موتور مرورگر درون اپلیکیشن، تا زمانی که بازیکن یک بار صفحه را لمس نکرده صدا را مسدود می‌کنند. به همین دلیل پرامپت بالا یک صفحه عنوان با دکمه Play می‌خواهد: لمس Play صدا را فعال می‌کند. اگر هوش مصنوعی از Web Audio API استفاده کرده، از آن بخواهید audio context را درون همان اولین لمس بسازد یا ادامه دهد.

مرحله 5: ذخیره بالاترین امتیازها با localStorage

هیچ‌کس نمی‌خواهد بهترین امتیازش با بستن اپلیکیشن از بین برود. localStorage مقدار کمی داده را بین اجراها روی گوشی نگه می‌دارد و درون اپلیکیشن دقیقاً مثل مرورگر کار می‌کند. کد آن کوتاه است:

var best = Number(localStorage.getItem("best") || 0);
if (score > best) {
  best = score;
  localStorage.setItem("best", best);
}

تنظیماتی مثل «صدا روشن یا خاموش» را هم می‌توانید به همین روش ذخیره کنید. آن را کوچک نگه دارید: امتیازها، مرحله‌های بازشده، چند گزینه.

مرحله 6: اول در مرورگر گوشی آزمایش کنید

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

مرحله 7: ساخت APK

دو راه رایگان برای ساخت دارید.

در وب‌سایت

مبدل آنلاین را باز کنید، فایل index.html خود را بارگذاری کنید (یا اگر بازی فایل‌های تصویر و صدا دارد، یک ZIP) و مراحل را طی کنید. نه حساب کاربری لازم است و نه واترمارکی هست، و یک APK امضاشده به‌همراه یک AAB برای Google Play دریافت می‌کنید. صفحه بازی HTML5 به APK نکات بیشتری برای بازی‌های ساخته‌شده با موتورهایی مثل Phaser یا Construct دارد.

روی گوشی شما

اپلیکیشن اندروید «HTML to APK: Website to App» مستقیماً روی گوشی می‌سازد. کدتان را بچسبانید، یک نام و آیکون انتخاب کنید و «ساخت» را بزنید. سازنده پیش از هر ساخت یک تبلیغ کوتاه نشان می‌دهد و ارتقای یک‌بارهٔ «حذف تبلیغات» آن‌ها را خاموش می‌کند. بازی شما هرگز تبلیغات ما را نمی‌گیرد.

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

مرحله 8: تمام‌صفحه و جهت صفحه

این دو تنظیم بیشترین تأثیر را روی یک بازی دارند:

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

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

مرحله 9: نصب و آزمایش بازی

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

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

باگی پیدا کردید؟ آن را در یکی دو جمله ساده برای هوش مصنوعی توضیح دهید، مثلاً «سفینه در حالت افقی از لبه راست صفحه بیرون می‌رود»، کد جدید را جای‌گذاری کنید و دوباره بسازید.

اشتراک‌گذاری و انتشار

APK برای فرستادن به دوستان عالی است. اگر می‌خواهید بازی شما در Google Play باشد، AAB را بارگذاری کنید و راهنمای انتشار در Google Play را دنبال کنید. یک بازی کوچک و تمیز با کنترل لمسی خوب، اولین اپلیکیشن فوق‌العاده‌ای است، و شما آن را بدون نوشتن کد ساختید.