حوّل لعبة HTML التي صنعتها بـ ChatGPT أو Gemini أو Claude إلى تطبيق Android

طلبت من روبوت دردشة ذكي لعبة، فأعطاك صفحة من الكود، والآن هناك ثعبان صغير أو لعبة منصات أو لعبة إطلاق فضائية تعمل في متصفحك. رائع. السؤال التالي هو دائمًا نفسه: هل يمكنني وضعها على هاتفي كتطبيق حقيقي بأيقونة، يستطيع أصدقائي تثبيته؟

نعم. يشرح هذا الدليل كيف تجعل الذكاء الاصطناعي يكتب لعبة تعمل جيدًا على الهاتف، وكيف تصلح المشكلات المعتادة، وكيف تحوّلها إلى ملف APK باستخدام Free HTML to 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: الصوت يحتاج إلى لمسة أولى

إذا كانت لعبتك صامتة على الهاتف، فلا شيء معطّل. المتصفحات، ومحرّك المتصفح داخل التطبيق، تمنع الصوت حتى يلمس اللاعب الشاشة مرة واحدة. لهذا يطلب النص أعلاه شاشة عنوان فيها زر «لعب»: الضغط على «لعب» يفتح الصوت. إذا استخدم الذكاء الاصطناعي Web Audio API، فاطلب منه إنشاء سياق الصوت أو استئنافه داخل تلك اللمسة الأولى.

الخطوة 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.

على هاتفك

تطبيق Android "HTML to APK: Website to App" يُنشئ التطبيق مباشرة على الهاتف. الصق الكود، واختر اسمًا وأيقونة، ثم اضغط على Build. يعرض المنشئ إعلانًا قصيرًا قبل كل عملية إنشاء، وترقية إزالة الإعلانات لمرة واحدة توقفها. لعبتك لا تحصل أبدًا على إعلاناتنا.

تريد بداية جاهزة بدل صفحة فارغة؟ تتضمن القوالب ألعابًا صغيرة يمكنك فتحها في المحرر عبر الإنترنت، أو تعديلها، أو إعطاؤها للذكاء الاصطناعي كنقطة بداية.

الخطوة 8: الشاشة الكاملة واتجاه الشاشة

هذان الإعدادان يصنعان الفرق الأكبر في اللعبة:

• الشاشة الكاملة تُخفي شريط الحالة وشريط التنقل، فتستخدم اللعبة الشاشة كلها.
• اتجاه الشاشة يثبّت اللعبة على الوضع العمودي أو الأفقي، فلا تنقلب عندما يميل اللاعب الهاتف في منتصف المرحلة.

ستجد الإعدادين في خطوة الألوان والعرض. وأثناء وجودك هناك، اختر لون خلفية يناسب لعبتك، حتى لا يظهر وميض أبيض عند التشغيل.

الخطوة 9: ثبّت التطبيق وجرّب اللعب

أرسل ملف APK إلى هاتفك، واضغط عليه، واسمح بـ تثبيت التطبيقات غير المعروفة للتطبيق الذي استخدمته لفتحه عندما يسألك Android. ثم العب بشكل جدي:

• العب ثلاث أو أربع جولات وتأكد أن أعلى نتيجة تبقى محفوظة بعد إغلاق التطبيق وفتحه من جديد.
• اضغط زر الشاشة الرئيسية أثناء اللعب ثم عُد. هل تتوقف اللعبة مؤقتًا؟
• جرّبها على هاتف صديق بحجم شاشة مختلف.
• تأكد أن الصوت يبدأ بعد اللمسة الأولى.

وجدت خطأً؟ صِفه للذكاء الاصطناعي في جملة أو جملتين بسيطتين، مثلًا «السفينة تخرج من الحافة اليمنى للشاشة في الوضع الأفقي»، ثم الصق الكود الجديد وأنشئ التطبيق مرة أخرى.

المشاركة والنشر

ملف APK مثالي لإرساله إلى الأصدقاء. إذا أردت لعبتك على Google Play، فارفع ملف AAB واتبع دليل النشر على Google Play. لعبة صغيرة ومتقنة بأزرار لمس جيدة هي أول تطبيق رائع، وقد صنعتها دون أن تكتب الكود بنفسك.