Sıfırdan Web Tabanlı – Mobil Sektörel Oyun Kodlama Eğitimi
Oyun motoru kullanmadan, yalnızca JavaScript ve HTML5 Canvas ile tarayıcıda çalışan ve bir markayı anlatan iki tam oyun geliştirin. Program, bir klinik yönetim yazılımı için yayına alınmış Klinik Kahramanı ve Paraşüt Atlayışı oyunlarının yapımını gerçek kod üzerinden, baştan sona ele alır.
Program boyunca, hiçbir oyun motoru kullanmadan, tarayıcıda çalışan ve markanızı anlatan iki tam oyun geliştirirsiniz. Bu oyunların her öğesi ürünün bir parçasını temsil eder; böylece yalnızca oyun programlamayı değil, bir ürünü oynanabilir bir tanıtıma dönüştürmeyi de öğrenirsiniz.
Bölüm
Bir ürün modülü (ör. Randevu)
Toplanan parça
O modülün bir özelliği (ör. Randevu Slotu)
Düşman
Modülün çözdüğü sorun (ör. Gelmeyen Hasta)
Bölüm sonu
Modül kartı ve kurulum yüzdesi
Program sonunda yapabilecekleriniz
HTML5 Canvas ile 60 fps çalışan bir oyun döngüsü kurmak
Zıplama, çift zıplama, eğilme ve çarpışma içeren platform fiziği yazmak
Sprite sayfalarından animasyonlu karakter çıkarmak
Bölümleri veri olarak tasarlamak; düşman, trambolin, kırılan blok gibi nesneler eklemek
Klavye ve dokunmatik kontrollü, yatay/dikey ekran uyumlu oyun yapmak
Yavaş cihazlarda kendini otomatik hafifleten performans kademeleri kurmak
Kendi kendine oynayan bir demo bot ile oyunu web sitenize gömmek ve yayına almak
Kimler için
Program kimlere hitap ediyor?
01
Yazılım geliştiriciler
Temel JavaScript bilen ve ilk gerçek oyununu geliştirmek isteyenler.
02
Girişimciler, ajanslar ve pazarlama ekipleri
Ürününü web sitesinde etkileşimli bir oyunla tanıtmak isteyenler.
03
Yapay zekâ destekli kodlama yapanlar
Kodlama asistanlarıyla somut ve yayında bir proje çıkarmak isteyenler.
Örnek çalışmalar
Program, yayına alınmış gerçek projelere dayanır
Aynı mimariyle farklı türlerde geliştirilmiş projeler: platform, paraşüt, yandan kayan koşu, 3 şeritli koşu ve vaka oyunu.
Programda geliştirilecek oyunlar
Klinik KahramanıPlatform oyunu · 7 bölüm · çift zıplama, trambolin, kırılan kartlar, modül kartı
Paraşüt AtlayışıDikey paraşüt oyunu · serbest düşüş ve sürükleyerek yönlendirme
Tüm oturumlar kaydedilirProgram sonrasında erişime açık kalır
Çıktı
Kendi markanız için yayında, çalışan bir tarayıcı oyunu
Ön koşullar ve araçlar
Gerekenler
Temel JavaScript (değişken, fonksiyon, dizi, nesne) ve biraz HTML/CSS yeterlidir. Oyun motoru veya framework bilgisi gerekmez; tüm araçlar ücretsizdir.
Kod editörü
VS Code (önerilen)
Tarayıcı
Chrome veya Edge
Yerel sunucu
python3 -m http.server veya XAMPP
Görsel hazırlık
Programda verilen Python betikleriİsteğe bağlı
Yapay zekâ asistanı
Bir kodlama asistanıİsteğe bağlı
Yayın
PHP destekli hosting ve SSH/FTP erişimi
Her katılımcıya ders başında hazır bir başlangıç projesi, karakter sprite'ları ve her haftanın bitiş kodu verilir. Geride kalan bir katılımcı sonraki derse hazır kodla katılabilir.
Müfredat
Haftalık program
İlk üç hafta Klinik Kahramanı platform oyunu geliştirilir; son hafta ikinci oyun Paraşüt Atlayışı ve yayına alma çalışmaları yapılır.
Hafta 01
Temeller: Canvas, oyun döngüsü ve karakter
Haftanın çıktısıEkranda kendi koşan, zıplayan, animasyonlu bir karakter
1.12 saat
Projenin anatomisi ve oyun döngüsü
Oyun projesinin anatomisi; Canvas 2D'ye giriş
requestAnimationFrame ile oyun döngüsü
Sabit zaman adımı (delta time)
Kodu parçalı dosyalara bölüp tek dosyada birleştirme (build.sh)
UygulamaBoş sahne, gökyüzü gradyanı ve FPS sayacı
1.22 saat
Fizik, girdi ve animasyon
Klavye girdisi; yerçekimi, hız ve ivme
Otomatik koşu ve tepe hız
Zıplama, basılı tutunca yükselen zıplama, çift zıplama
Sprite sayfası kesme ve kare animasyonu (koşu, zıplama, eğilme)
UygulamaMaskotun koşup zıpladığı ilk oynanabilir sahne
Örnek kod ve materyal
src/14-loop.js
function frame(ts) {
rafId = requestAnimationFrame(frame);
if (!lastT) lastT = ts;
// takılmada bile en fazla 45 ms ilerle
var dt = Math.min(0.045, (ts - lastT) / 1000);
lastT = ts;
if (document.hidden) return;
gaugeQuality(dt); // FPS → kalite kademesi
update(dt);
render(ts / 1000);
}
Koşu animasyonu için sprite sayfası
Hafta 02
Dünya: bölümler, çarpışma ve nesneler
Haftanın çıktısıBaşı ve sonu olan, düşmanlı ve toplanabilir parçalı tam bir bölüm
2.12 saat
Karo tabanlı dünya ve kamera
Karo (tile) tabanlı dünya; bölümleri veri olarak yazma (levels.js)
AABB çarpışma ve zemine oturma
Kamera takibi ve paralaks arka plan
Uçurum, can kaybı ve güvenli zemine geri dönme
Uygulamaİlk bölüm haritası ve kayan kamera
2.22 saat
Varlıklar ve bölüm tasarımı
Düşman (üstüne basınca çözülür), trambolin yaprağı, kırılan kart, diken
Toplanabilir modül parçaları ve bilgi baloncukları
Bölüm sonu terminali
Bölüm geçerliliğini kontrol eden araç (checklevels.py)
Haftanın çıktısı7 bölümlü, telefonda da akıcı oynanan, cilalı bir oyun
3.12 saat
Oyun akışı, arayüz ve ses
Oyun akışı ve durum makinesi
Üst şerit (HUD); bulanık sahne üzerinde 3-2-1 geri sayımı
Modül kartı ve kurulum yüzdesi
Web Audio ile kodla üretilen ses efektleri
Geri sayım → Oyun → Modül kartı → Sonraki bölüm → Final
UygulamaBitirilebilir, puanlı oyun akışı
3.22 saat
Mobil uyum ve performans
Dokunmatik kontrol (dokun = zıpla, aşağı kaydır = eğil)
Yatay/dikey ekran perdesi; masaüstünde telefon gövdesi çerçevesi
Kısa ekranlar için duyarlı paneller
FPS ölçümüne dayalı otomatik kalite kademeleri, gradyan önbelleği, parçacık tavanları
UygulamaGerçek telefonda test ve performans ölçümü
Örnek kod ve materyal
src/14-loop.js — gaugeQuality()
if (perf.n < 30) return; // ~yarım saniyelik pencere
var avg = perf.acc / perf.n;
if (avg > 1 / 42) { perf.slow++; perf.fast = 0; }
else if (avg < 1 / 57) { perf.fast++; perf.slow = 0; }
// 3 yavaş pencere → hafiflet, 8 hızlı → geri al
if (perf.slow >= 3 && QUAL > 0) QUAL--;
else if (perf.fast >= 8 && QUAL < 2) QUAL++;
Telefon çerçevesi ve geri sayım ekranı
Hafta 04
İkinci oyun, demo bot ve yayın
Haftanın çıktısıİkinci bir oyun ve web sitesinde yayında çalışan tanıtım bölümü
4.12 saat
Paraşüt Atlayışı
Aynı mimariyle farklı bir tür; dikey (portre) oyun
Serbest düşüş ve paraşüt fiziği, dalış/fren
Tohumlu rastgelelikle her seferinde aynı parkuru üretmek
Parmakla sürükleyerek yönlendirme
Kamera yakınlaştırmalı sinematik açılış ve kampanya cümlesini tamamlayan geri sayım
UygulamaKliniğin çatısına inilen tek parkurluk oyun
4.22 saat
Demo bot, siteye gömme ve yayın
Kendi kendine oynayan demo bot (?demo=1)
Oyunu PHP hero bölümü olarak gömme (iframe, CSS önekleri, sürüm numarasıyla önbellek kırma)
SSH ile canlıya alma
Yapay zekâ asistanıyla oyun geliştirme iş akışı ve iyi istem (prompt) yazma
Final projesi sunumları
UygulamaKendi markanızın oyununun canlı linki
Örnek kod ve materyal
hero.php — siteye gömme
<iframe src="/oyun/?demo=1&v=18"
loading="lazy" title="Klinik Kahramanı">
</iframe>
<!-- ?demo=1 → oyun kendi kendini oynar
v=18 → yeni sürümde önbelleği kırar -->
Dikey oyun: geri sayım ve kampanya şeridi
Final projesi ve sertifika
Değerlendirme
Her katılımcı program boyunca kendi markasını, ürününü ya da seçtiği bir konuyu anlatan bir tarayıcı oyunu geliştirir ve son oturumda 5 dakikalık bir sunumla canlı linkini paylaşır.
Final projesinde beklenenler
En az 3 bölüm (ya da tek parkurlu bir oyun türü)
Her bölümde markanın bir mesajını taşıyan toplanabilir parçalar ve düşmanlar
Masaüstü ve mobilde oynanabilirlik
Başlangıç, bölüm sonu ve final ekranları
Yayında çalışan bir link
Ağırlıklar
Bileşen
Ağırlık
Haftalık uygulama ödevleri (4 adet)
%40
Final projesi — çalışırlık ve oynanış
%40
Final sunumu — marka mesajının oyuna yansıması
%20
Oturumların en az %75'ine katılan ve final projesini teslim eden katılımcılar katılım sertifikası almaya hak kazanır.
Adobe Photoshop ile Görsel Tasarım₺329,00 · Tek seferlik ödeme
