Ücretsiz HTML to Bir yapay zekâ sohbet botundan oyun istediniz, size bir sayfa kod verdi ve şimdi tarayıcınızda küçük bir yılan, platform ya da uzay nişancı oyunu çalışıyor. Güzel. Sonraki soru hep aynıdır: Bunu simgesiyle birlikte, arkadaşlarımın yükleyebileceği gerçek bir uygulama olarak telefonuma koyabilir miyim?
Evet. Bu rehber, yapay zekâya telefonda iyi çalışan bir oyun yazdırmayı, sık görülen sorunları düzeltmeyi ve oyunu Free HTML to APK ile bir APK'ya dönüştürmeyi gösteriyor.
Adım 1: Tek ve kendi kendine yeten bir dosya isteyin
Dönüştürmesi en kolay oyun, CSS ve JavaScript'i içinde barındıran tek bir index.html dosyasıdır. Kaybolacak ayrı dosyalar yoktur, çevrimdışıyken çalışmayan internetteki bir oyun kütüphanesine bağlantılar yoktur. Yapay zekâ kodu üç dosyaya bölerse birleştirmesini isteyin.
ChatGPT, Gemini veya Claude'a yapıştırabileceğiniz bir istem. Son kısmı kendi fikrinizle değiştirin:
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.
Adım 2: Dokunmatik kontrolleri düzeltin
Yapay zekâ ile yapılan birçok oyun önce klavye için yazılır. Telefonda ok tuşları yoktur. Oyununuz yalnızca keydown olayına tepki veriyorsa yapay zekâya şunu söyleyin: "Dokunmatik kontroller ekle: yön değiştirmek için kaydır" veya "Alt köşelere ekranda sol, sağ ve zıpla düğmeleri ekle."
Sık karşılaşılan iki dokunma sorunu daha var:
- Sürüklediğinizde sayfa kayıyor veya yakınlaşıyor. Yapay zekâdan tuvale
touch-action: noneeklemesini ve dokunma işleyicilerindepreventDefaultçağırmasını isteyin. - Düğmeler çok küçük. En az 48 piksellik dokunma alanları ve aralarında boşluk isteyin. Başparmaklar büyüktür.
Adım 3: Ekrana sığdırın
Dizüstü bilgisayarda 800'e 600 piksel olan bir oyun, telefonda kesilir ya da çok küçük görünür. Dosyada şunun gibi bir viewport etiketi olduğundan emin olun:
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
Ardından yapay zekâdan tuvali pencereye göre boyutlandırmasını ve yeniden boyutlandırmada tekrar çizmesini isteyin. İyi bir yöntem, sabit bir "oyun dünyası" boyutu tutup bunu ekrana sığacak şekilde ölçeklemektir; böylece oyun her telefonda aynı şekilde oynanır.
Oyununuzun dikey mi yatay mı olacağına baştan karar verin. Koşu ve nişancı oyunları genelde yatayda daha iyi hissettirir; bulmaca ve dokunma oyunları çoğu zaman dikeye uyar. Bunu daha sonra uygulamada sabitleyeceksiniz, bu yüzden yapay zekânın her ikisini de kusursuz yönetmesi gerekmez.
Adım 4: Ses için önce bir dokunuş gerekir
Oyununuz telefonda sessizse bir şey bozuk değildir. Tarayıcılar ve bir uygulamanın içindeki tarayıcı motoru, oyuncu ekrana bir kez dokunana kadar sesi engeller. Yukarıdaki istemin Oynat düğmesi olan bir başlık ekranı istemesinin nedeni budur: Oynat'a dokunmak sesin kilidini açar. Yapay zekâ Web Audio API kullandıysa, ses bağlamını bu ilk dokunuşun içinde oluşturmasını veya devam ettirmesini isteyin.
Adım 5: Yüksek skorları localStorage ile kaydedin
Kimse uygulamayı kapatınca en iyi skorunun kaybolmasını istemez. localStorage, uygulama açılışları arasında küçük verileri telefonda saklar ve uygulamanın içinde de tıpkı tarayıcıdaki gibi çalışır. Kodu kısadır:
var best = Number(localStorage.getItem("best") || 0);
if (score > best) {
best = score;
localStorage.setItem("best", best);
}
"Ses açık veya kapalı" gibi ayarları da aynı şekilde kaydedebilirsiniz. Küçük tutun: skorlar, açılan seviyeler, birkaç seçenek.
Adım 6: Önce telefon tarayıcısında test edin
Herhangi bir şey derlemeden önce dosyayı kaydedin ve telefonunuzun tarayıcısında açın. Tam bir tur oynayın. Başlatabildiğinizi, kontrol edebildiğinizi, kaybedebildiğinizi, yeniden başlatabildiğinizi ve yüksek skoru görebildiğinizi kontrol edin. Sorunları burada düzeltmek, uygulamayı tekrar tekrar derlemekten daha hızlıdır.
Adım 7: APK'yı derleyin
Derlemenin iki ücretsiz yolu var.
Web sitesinde
Çevrimiçi dönüştürücüyü açın, index.html dosyanızı (oyununuzda görsel ve ses dosyaları varsa bir ZIP) yükleyin ve adımları izleyin. Hesap da filigran da yoktur; imzalı bir APK ve Google Play için bir AAB alırsınız. HTML5 oyundan APK'ya sayfasında Phaser veya Construct gibi motorlarla yapılmış oyunlar için daha fazla ipucu var.
Telefonunuzda
"HTML to APK: Website to App" adlı Android uygulaması derlemeyi doğrudan telefonda yapar. Kodunuzu yapıştırın, bir ad ve simge seçin ve Derle'ye dokunun. Derleyici her derlemeden önce kısa bir reklam gösterir; tek seferlik Reklamları Kaldır yükseltmesi bunları kapatır. Oyununuza asla bizim reklamlarımız eklenmez.
Boş bir sayfa yerine hızlı bir başlangıç mı istiyorsunuz? Şablonlar arasında çevrimiçi düzenleyicide açabileceğiniz, değiştirebileceğiniz veya başlangıç noktası olarak yapay zekâya verebileceğiniz küçük oyunlar var.
Adım 8: Tam ekran ve yön
Bir oyun için en büyük farkı şu iki ayar yaratır:
- Tam ekran durum çubuğunu ve gezinme çubuğunu gizler, böylece oyun tüm ekranı kullanır.
- Yön oyunu dikey veya yatay modda sabitler, böylece oyuncu bölümün ortasında telefonu eğdiğinde ekran dönmez.
İkisini de renkler ve görünüm adımında bulacaksınız. Oradayken oyununuza uyan bir arka plan rengi seçin, böylece açılışta beyaz bir parlama olmaz.
Adım 9: Yükleyin ve oynayarak test edin
APK'yı telefonunuza gönderin, üzerine dokunun ve Android sorduğunda dosyayı açmak için kullandığınız uygulamaya Bilinmeyen uygulamaları yükle izni verin. Sonra düzgünce oynayın:
- Üç dört tur oynayın ve uygulamayı kapatıp yeniden açtıktan sonra yüksek skorun kaybolmadığını kontrol edin.
- Oyunun ortasında ana ekran düğmesine basıp geri dönün. Oyun duraklıyor mu?
- Farklı ekran boyutuna sahip bir arkadaşınızın telefonunda deneyin.
- Sesin ilk dokunuştan sonra başladığını kontrol edin.
Bir hata mı buldunuz? Hatayı yapay zekâya bir iki basit cümleyle anlatın, örneğin "yatay modda gemi ekranın sağ kenarından çıkıyor", yeni kodu yapıştırın ve tekrar derleyin.
Paylaşma ve yayınlama
APK, arkadaşlarınıza göndermek için idealdir. Oyununuzun Google Play'de olmasını istiyorsanız AAB'yi yükleyin ve Google Play yayınlama rehberini izleyin. İyi dokunmatik kontrollere sahip küçük ve özenli bir oyun harika bir ilk uygulamadır ve bunu kodu kendiniz yazmadan yaptınız.