HTML5 Oyun Kaynak Kodu: Gerçek Bir Paketi Açıp İçine Baktık

HTML5 oyun kaynak kodu üç farklı şey anlamına gelebilir: yüklemeye hazır bir derleme, düzenlediğiniz geliştirici dosyaları ya da yalnızca belirli bir düzenleyicide açılan bir proje. Marketplace'imizdeki kaynak kodlu bir HTML5 oyun şablonu, düz web dosyaları olarak ilk ikisinin birlikte gelmesidir ve bu rehber bunun neye benzediğini göstermek için gerçek paketleri açıyor.

Bu şablonları biz satıyoruz; bu yüzden bunu piyasanın tarafsız bir araştırması olarak değil, kendi paketlerimizin bir turu olarak okuyun. Başta Velvet Pool, Puttide ve Sunset Rally olmak üzere birkaç edisyonu inceledik, herkese açık kılavuzlarını ve mağaza koşullarını okuduk; kutuda neler olduğunu, çalıştırmak için neye ihtiyaç duyduğunuzu ve nelerin olmadığını not ettik. Her kılavuz ürün sayfasından bağlantılıdır; böylece ödemeden önce her satırı kontrol edebilirsiniz.

“HTML5 oyun kaynak kodu” ne anlama gelebilir?

Satıcılar kaynak kodu sözcüğünü gevşek kullanır. Üç soru, gerçekte neyin satıldığını ayıklar.

Bir derleme, bir geliştirici kaynağı, yoksa ikisi birden mi?

Derleme, oyunun tarayıcının yüklediği bitmiş hâlidir: bir index.html, betikler, görseller ve ses dosyaları. Olduğu gibi barındırabilirsiniz. Geliştirici kaynağı, insanların düzenlemesi için hazırlanmış, dosyaları işe göre bölünmüş sürümdür. Yalnızca derleme içeren bir paketi yükleyebilirsiniz ama rahatça değiştiremezsiniz. Yalnızca kaynak içeren bir paket ise çalışmadan önce bile araç gerektirebilir. Bu rehberdeki edisyonlar ikisini tek bir ZIP'te sunar: genellikle yayımlayacağınız bir game/ klasörü ve düzenleyeceğiniz bir source/ klasörü (Ricopop'ta game/ klasörünün kendisi kaynaktır).

Okunabilir mi, küçültülmüş mü?

Küçültme, betikleri kısa adlarla birkaç yoğun satıra sıkıştırır; bu daha hızlı iner ve çok kötü okunur. Gizleme (obfuscation) daha da ileri gider ve adları bilerek karıştırır. İkisi de canlı bir siteye zarar vermez. Kodu değiştirmek için aldıysanız ikisi de zarar verir. Ödemeden önce canlı demonun bir betiğini tarayıcınızın geliştirici araçlarında açın ve takip edip edemeyeceğinize bakın.

Düz dosyalar mı, düzenleyici projesi mi?

Bazı şablonlar belirli bir oyun düzenleyicisi için proje olarak gelir ve yalnızca o düzenleyicide açılır. Diğerleri herhangi bir kod düzenleyicinin açtığı düz web dosyalarıdır. Bu rehberdeki edisyonlar ikinci türdendir: HTML, CSS, JavaScript ve JSON; bazılarında TypeScript.

Şablonlara göz atın

Bir Polar Games paketinin içinde neler var?

8 top bilardo edisyonumuz Velvet Pool'u ele alalım. Kılavuzu ZIP içinde dört klasörü anlatır:

• game/ yüklemeye hazır edisyondur ve yayımladığınız tek klasördür.
• source/ aynı oyunun düzenlenebilir geliştirici edisyonudur; bir README, bir package.json ve testler içerir.
• documentation/ resimli rehberi ve görsellerini tutar.
• THIRD-PARTY-LICENSES/ yazı tipi lisans metinlerini ve bir README.txt özetini tutar.

Kitaplığınızda aynı paket iki indirme olarak sunulur: eksiksiz paket (kaynak ve kılavuz) ya da yalnızca oyun, barındırmaya hazır.

game/ ve source/ aynı düzene sahiptir. Velvet Pool için kılavuz, dosyaları source/ içinde düzenlemenizi ve değişenleri game/ içindeki aynı yola kopyalamanızı söyler. Arada hiçbir şey derlenmez.

Velvet Pool edisyonuna bakın

Velvet Pool'un içi: dosya haritası

Dosya haritası, satın almadan önce bir kod tabanını değerlendirmenin en ucuz yoludur. Velvet Pool kılavuzundaki harita şu, yollar source/ veya game/ klasörüne göredir:

• src/core/physics.js: top simülasyonu, efekt ve bant tepkisi.
• src/core/rules.js: 8 top kuralları ve faul kararları.
• src/core/ai.js: bilgisayarın bir vuruşu nasıl seçtiği.
• src/game/controls.js: nişan alma, güç ve efekt girdisi.
• src/game/progress.js: başarımlar, çuhalar, istakalar ve maç puanlaması.
• src/game/i18n.js: 14 dildeki metin.
• src/game/localRecords.js: yerel skor geçmişi.
• src/game/audio.js: ses efektleri ve müzik çalma.
• css/style.css ve css/fonts.css: tema, duyarlı yerleşim ve yazı tipi bildirimleri.
• assets/: görseller, sesler ve yazı tipleri; bir logo/ alt klasörüyle.

Bölünmeye dikkat edin. Kurallar, fizik ve bilgisayar src/core içinde yaşar. Girdi, kayıtlar, metinler ve ses src/game içinde yaşar. Kılavuz, bir seferde tek bir özelliği değiştirmenizi ister ve bu düzen bunu gerçekçi kılar: bir bant ayarı ile bir çeviri düzeltmesi farklı dosyalara dokunur.

Kılavuz ayrıca source/src ve game/src içindeki kodun düz, biçimlendirilmiş JavaScript olduğunu, küçültülmüş ya da paketlenmiş dosya bulunmadığını belirtir. Velvet Pool, WebGL2 üzerinde Vanilla JavaScript'tir ve Three.js dahil hiçbir kod kitaplığı kullanmaz. Değişiklik günlüğü bu iddiayı destekler: 1.0.1 sürümü ses, çeviriler ve gölgelendiricilerdeki uzun tek satırlık dizeleri, davranış değişmeden, okunabilir satırlara böldü.

Puttide: aynı düzen, artı kitaplıklar

3B mini golf edisyonumuz Puttide aynı dört klasörü kullanır ve bir şey ekler: oyunun ihtiyaç duyduğu iki üçüncü taraf kitaplığı. Three.js r186 (MIT) ve Rapier 3D 0.21.0 (Apache-2.0) lib/three/ ve lib/rapier/ içinde durur ve index.html içindeki import haritası tarayıcıya onları nerede bulacağını söyler. Puttide SSS'si hiçbir şeyin bir CDN'den yüklenmediğini belirtir; yani oyun yalnızca kendi barındırmanıza ihtiyaç duyar. Kılavuz, kitaplık dosyalarının okunabilmeleri için biçimlendirildiğini, davranışlarının değiştirilmediğini ekler.

Dosya haritası, yine source/ veya game/ klasörüne göre:

• src/course/courses.js: parkur sırası ve kilit açma gereksinimleri.
• src/course/holes.js: Ruins parkurunun geometrisi, par değeri ve engelleri. pier.js, ice.js, lava.js ve sky.js diğer dördünü tutar.
• src/sim/constants.js: fizik ayarı.
• src/game/economy.js: top, iz ve kıyafet tanımları ile fiyatları.
• src/ui/i18n.js ve üç sözlük dosyası daha: dil metni.
• css/style.css: arayüz renkleri, yazı tipleri ve duyarlı stiller.
• fonts/ ve music/: lisanslarıyla birlikte web yazı tipleri ve iki müzik parçası.

Kılavuzun yeni bir delik için tarifi: doğru parkur dosyasındaki bir tanımı çoğaltın, ona benzersiz bir kimlik verin, par, başlangıç ve cup konumlarını ayarlayın, parkura ekleyin, sonra adını ve ipucunu dil sözlüklerine ekleyin. Böyle bir tarifi satın almadan önce okuyun. Yapabileceğiniz bir iş gibi görünüyorsa paket size uyar.

Puttide edisyonuna bakın

Kaynak bir derleme adımı gerektirdiğinde

“Derleme adımı yok” bazı edisyonlar için doğru, bazıları için değil; bu yüzden mağazayı değil, edisyonu kontrol edin. İşte bizim beş edisyonumuz yan yana, liste fiyatlarıyla. Kendi mağazamız şu anda liste fiyatından %10 indirim gösteriyor; bu, her ürün sayfasındaki stüdyodan doğrudan tekliftir: örneğin Velvet Pool 39 $ yerine 35,10 $ gösterir.

• Velvet Pool, liste fiyatı 39 $: WebGL2 üzerinde düz JavaScript modülleri. source/ düzenleyin, game/ içine kopyalayın. Node.js 20+ yalnızca isteğe bağlı testler için.
• Puttide, 39 $: lib/ içinde Three.js ve Rapier ile düz JavaScript modülleri. Derleme adımı yok. Node.js isteğe bağlıdır ve yalnızca kitaplık sürümlerini yönetmek içindir.
• Ricopop, 39 $: düz HTML, CSS ve JavaScript modülleri; game/ klasörünün kendisi kaynaktır. İsteğe bağlı geliştirici araçları (Node.js 20+): bir yerel sunucu, bir seviye denetleyicisi ve testler.
• Pinloop, 24 $: Vite ile TypeScript. game/ klasörü okunabilir JavaScript ve CSS içerir. Node.js 22.12+ ve npm yalnızca kaynağı düzenlemek ve yeniden derlemek için.
• Sunset Rally, 39 $: Three.js r184 ve Vite ile TypeScript. game/ klasörü zaten derlenmiş ve küçültülmemiştir. Node.js yalnızca yeniden derlerseniz.

Sunset Rally için kılavuz Node.js 24 LTS önerir. source/ içinde npm ci, npm run typecheck ve npm run build komutlarını çalıştırır, sonra yalnızca dist/ içeriğini yayımlarsınız. Ayrıca yeniden derlerken minify ve cssMinify seçeneklerini kapalı tutmanızı ister, çünkü teslim edilen çalışma zamanı okunmak üzere biçimlendirilmiştir. Sonucu yükleyin, node_modules/ klasörünü asla.

Sunset Rally edisyonuna bakın

Barındırma: pratikte “statik” ne demek?

Statik barındırma, barındırmanızın yalnızca dosya sunduğu anlamına gelir. Velvet Pool ve Puttide kılavuzları tüm kurulumu üç adımda verir:

1. ZIP'i çıkarın.
2. game/ içindeki her şeyi, alt klasörleri koruyarak, FTP ya da barındırmanızın dosya yöneticisiyle sitenizdeki bir klasöre yükleyin, örneğin public_html/velvet-pool/.
3. O adresi bir tarayıcıda açın.

npm, terminal, derleme adımı, PHP, veritabanı ya da hesap söz konusu değildir. Aynı kılavuzlara göre insanları asıl takılan şeyler:

• index.html'ye çift tıklamayın. Tarayıcılar file:// üzerinde oyun modüllerini engeller. Yerel test için game/ içinde python -m http.server 8765 komutunu çalıştırın ve http://localhost:8765/ adresini açın.
• Sunucunuz .js dosyalarını bir JavaScript MIME türüyle, .wasm dosyalarını application/wasm olarak göndermelidir. Yanlış bir MIME türü, modülün reddedildiği bir hata olarak görünür.
• Herkese açık barındırma için HTTPS kullanın.
• Kayıtlar tarayıcı kaynağına (protokol, ana makine ve port) aittir. Oyunu başka bir alan adına taşırsanız oyuncular sıfırdan başlar.
• Sıfırdan bir sayfa yüklemesi yine barındırmanıza ihtiyaç duyar; yani bu, kurulabilir bir çevrimdışı uygulama değildir.

Logo, renkler, kurallar ve çeviriler nerede?

Her kılavuzun bir özelleştirme bölümü vardır ve neleri kapsadığı edisyondan edisyona değişir. Her birinin söylediği şu.

Velvet Pool

• Logo ve marka: assets/logo/ içindeki dosyaları değiştirin ve CSS'teki karşılık gelen boyutları ayarlayın.
• Çuha ve istaka stilleri: tanımları progress.js içindedir. Kayıtlı kozmetikler çalışmaya devam etsin diye öğe kimliklerini sabit tutun.
• Bilgisayar davranışı ai.js içinde, fizik physics.js içinde. Kuralları ya da fiziği değiştirdikten sonra 8 top testlerini çalıştırın.
• Çeviriler: src/game/i18n.js; dil listesi LANGS içinde.

Puttide

• Renkler ve yazı tipleri: css/style.css.
• Fizik: src/sim/constants.js. Kozmetik fiyatları: src/game/economy.js; mevcut kimlikleri koruyun.
• Müzik: lisanslı bir dosyayı music/ içine kopyalayın ve src/audio/audio.js içindeki parça eşlemesini güncelleyin.
• Delikler, par ve kilit açmalar: yukarıda anlatılan parkur dosyaları.

Gridspark ve Sunset Rally

Gridspark'ta, ürün SSS'sine göre arayüz metni src/locales.js içinde, kural sabitleri ve palet src/config.js içinde, bulmaca kuralları ise game.js, board.js, generator.js ve shapes.js içinde bulunur. Sunset Rally'de kampanya maçları ve yıldız koşulları Campaign.ts içinde, konumlar Places.ts içinde, fizik physics.ts içinde ve puanlama match.ts içindedir. İngilizce ve Portekizce metinleri src/i18n.ts içinde, diğer 12 dil src/locales/ içindedir.

Kılavuzların neleri dışarıda bıraktığına dikkat edin. Puttide kılavuzu renkleri, fiziği, delikleri, fiyatları ve müziği kapsar, ancak logoyu değiştirmek için bir adımı yoktur; Sunset Rally kılavuzunda ise özel bir markalama bölümü yoktur. Değiştireceğiniz ilk şey markalamaysa satın almadan önce sorun.

Gridspark edisyonuna bakın

Otomatik testler: neyi denetler, neyi denetlemez?

Velvet Pool'un source/ klasörü bir test takımı içerir. Node.js 20 veya üstüyle source/ içinde bir terminal açın ve node tests/run.js ile aynı olan npm test komutunu çalıştırın. Bağımlılık kurulumu gerekmez. Kılavuza göre takım fiziği, 8 top kurallarını, bilgisayar maçlarını ve çeviri anahtarı tutarlılığını denetler ve tarayıcılarda ve gerçek cihazlarda test etmenin yerini tutmaz.

Çeviri anahtarı denetimi, 14 dilli bir oyunun ihtiyaç duyduğu türden bir testtir: bir dilde bir anahtar ekler, bir başkasını unutursanız bir insan haftalarca fark etmeyebilir.

Her edisyonun testi yoktur. Puttide kılavuzu hiçbirini anlatmaz, yalnızca elle yapılan kontrolleri anlatır. Pinloop ve Beep Out, geliştirici komutları arasında npm test'i listeler; Ricopop'un geliştirici araçları arasında bir seviye denetleyicisi vardır.

Lisans, üçüncü taraf bildirimleri ve değişiklik günlüğü

Mağaza koşullarına göre her satın alma, edisyonu sizin ya da tek bir müşterinizin tek bir son ürününde kullanmanız için süresiz ve münhasır olmayan bir lisans verir. İçindeki kodu, görselleri ve sesleri değiştirebilirsiniz ve oyuncular ona ücretsiz ya da reklam geliri yoluyla erişebilir. Şablonu, kaynağını veya varlıklarını tek başlarına, şablon, set veya varlık paketi olarak ya da geliştiricilere yönelik başka bir ürünün içinde yeniden satamaz, paylaşamaz veya dağıtamazsınız. Lisans, destek bittiğinde sona ermez.

Üçüncü taraf parçalar kendi lisanslarını korur ve bildirimlerini ürününüzle birlikte tutarsınız. Velvet Pool'da bu, SIL Open Font License 1.1 altındaki iki yazı tipi, Manrope ve Fraunces anlamına gelir; metinleri THIRD-PARTY-LICENSES/ içinde ve yazı tiplerinin yanındadır. Puttide'da liste Three.js (MIT), Rapier (Apache-2.0) ve Rubik ile Fredoka yazı tiplerini (OFL 1.1) ekler.

Değişiklik günlüğü bir paketin nasıl bakıldığını gösterir. Velvet Pool 1.0.1 (18 Ekim 2026) uzun dizeleri okunabilir satırlara böldü ve lisans bildirimlerini tek bir düz klasörde topladı. 1.1.0 sürümü (22 Ekim 2026) arayüzü 14 dile getirdi. Bu kayıtlar ürün sayfasındadır. Koşullar, aynı edisyonun güncellemelerinin yayımlandığında kitaplığınızda göründüğünü, belirli bir süre için güncelleme sözü verilmediğini söyler.

Satın aldığınız bir oyunun kodu bir saatte nasıl okunur?

Bu önerilen bir plandır, söz verilmiş bir süre değil. Velvet Pool düzenini izler ve yalnızca paketin size verdiğini kullanır.

1. 0–10. dakika: ZIP'i çıkarın, source/ içindeki README'ye ve kılavuzun dosya haritasına göz atın. index.html'yi açın ve hangi betikleri ve stil sayfalarını yüklediğine bakın.
2. 10–20. dakika: yeşil bir başlangıç elde etmek için source/ içinde npm test çalıştırın (Node.js 20+).
3. 20–35. dakika: src/game'den önce src/core'u okuyun. rules.js ile başlayın, sonra ai.js, sonra physics.js. Oyunun kendisi budur. Kontroller, ilerleme, metinler ve ses onun çevresindeki tesisattır.
4. 35–40. dakika: öğe kimliklerinin ve kayıt anahtarlarının sabit kalması gerektiğini not edin, yoksa oyuncular kayıtlı kozmetiklerini kaybeder.
5. 40–55. dakika: progress.js içindeki bir çuha tanımı gibi küçük bir değişiklik yapın. Dosyayı game/ içindeki aynı yola kopyalayın, game/ klasörünü python -m http.server 8765 ile sunun ve sonuca bakın. Asla file:// ile açmayın.
6. 55–60. dakika: testleri yeniden çalıştırın.

ES modülleri ihtiyaç duyduklarını import satırlarında adlandırır; bu yüzden sayfanın yüklediği ilk betikten başlayarak zinciri takip edebilirsiniz. Düz dosyalı bir edisyonun bu hızda okunabilmesinin nedeni budur.

Kaynak kod satın almadan önce sorulacak sorular

• Ödemeden önce kılavuzu okuyabilir ve bir demo oynayabilir miyim? Edisyonlarımız için ikisi de ürün sayfasından bağlantılıdır.
• Barındırmaya hazır bir derleme ve ayrı bir geliştirici kaynağı var mı?
• Kod okunabilir mi, küçültülmüş mü? Bir betik açın ve bakın.
• Node.js, npm, PHP veya veritabanına ihtiyacım var mı ve hangi sürümler?
• Oyun bir CDN'den ya da başka bir siteden bir şey yüklüyor mu?
• İçinde hangi üçüncü taraf kitaplıklar var ve hangi lisanslarla?
• Kaç projede kullanabilirim ve yeniden dağıtabilir miyim?
• Destek ne kadar sürüyor ve neleri kapsıyor? Bizimki 6 ay, ödeme sırasında seçilen uzatmayla 12 ay; dosyaların kurulumu ve kullanımı hakkındaki soruları ve yeniden üretilebilir kusurları kapsar.
• Nelerin dışarıda bırakıldığı?
• Bir değişiklik günlüğü ve yakın tarihli bir sürüm var mı?
• İade kuralı nedir? Bizimki: şablonlar dijital ürünlerdir; bu yüzden yalnızca şablonu henüz indirmediyseniz ya da düzeltemeyeceğimiz bir kusuru varsa iade ederiz. Lisans numaranızla stüdyoya yazarak talep edersiniz.

Bu edisyonların içermedikleri

Bazı edisyonlar isteğe bağlı ekstralar ekler. Ricopop ve Zabum, varsayılan olarak kapalı, tek dosyalık bir PHP skor tablosu içerir. Skorları bir dosyada saklayan, gündelik, paylaşımlı bir puan tablosudur; hile korumalı bir sıralama değildir ve canlı çok oyunculu mod da değildir.

Destek, sağlanan dosyaların kurulumu ve kullanımı hakkındaki soruları ve sağlanan oyundaki yeniden üretilebilir kusurların düzeltilmesini kapsar. Bu bir sınırdır ve onu ilk günden bilmek daha iyidir.

SSS

Oyun klasörü ile kaynak klasörü arasındaki fark nedir?

game/, barındırmanıza yüklediğiniz derlemedir. source/, aynı oyunun düzenlenebilir geliştirici edisyonudur. Velvet Pool ve Puttide'da aynı düzene sahiptirler; bu yüzden source/ içinde düzenlediğiniz bir dosya game/ içindeki aynı yola kopyalanır. Sunset Rally gibi TypeScript edisyonlarında source/ yeniden derlediğiniz bir projedir ve yeni çıktıyı yayımlarsınız.

Oyunu kullanmak için npm ya da Node.js gerekli mi?

Barındırmak için hayır. Node.js yalnızca Velvet Pool'daki isteğe bağlı testler için (20 veya üstü) ya da Sunset Rally (24 LTS önerilir) ve Pinloop (22.12 veya üstü) gibi TypeScript edisyonlarını yeniden derlemek için gerekir.

Kaynak kod küçültülmüş mü?

Burada ele alınan edisyonlarda değil. Velvet Pool ve Puttide düz, biçimlendirilmiş JavaScript'tir ve ikisinin de 1.0.1 sürümü uzun tek satırlık dizeleri okunabilir satırlara böldü. Sunset Rally çalışma zamanı, küçültme kapalı olarak biçimlendirilmiş teslim edilir.

Tek bir satın almayı birkaç proje veya müşteri için kullanabilir miyim?

Lisans, sizin ya da tek bir müşterinizin tek bir son ürününü kapsar. İkinci bir ürün kapsamın dışındadır.

Kaynak kodu yeniden satabilir veya paylaşabilir miyim?

Hayır: tek başına değil, şablon, set ya da varlık paketi olarak değil ve geliştiricilere yönelik başka bir ürünün içinde değil. Kendi son ürününüzün içindeki kodu, görselleri ve sesleri değiştirebilirsiniz.

Satın almadan önce kılavuzu okuyabilir miyim?

Evet. Her ürün sayfası kılavuzuna ve aynı edisyonun oynanabilir bir demosuna bağlantı verir.

Satın almadan önce bir paketi açın

Bir edisyon seçin, kılavuzunu ürün sayfasından açın, demoyu oynayın ve dosya haritasını yukarıdaki sorulara karşı okuyun. Kılavuz bunları yanıtlıyorsa paket de yanıtlamalıdır. Yanıtlamıyorsa ödemeden önce stüdyoya yazın.

Tüm şablonlara göz atın