PROJE RAPORU

Proje Adı: Rocket Rush – 3D Eğitim Destekli Uzay Oyunu

Geliştirme Başlangıç Tarihi: 25.03.2026
Geliştirme Bitiş Tarihi: 12.04.2026
Toplam Süre: Yaklaşık 2,5 hafta

1. Proje Özeti

Bu projede, oyuncunun bir roketi kontrol ederek uzaydaki engel duvarlarının içindeki boşluklardan geçtiği, yakıt topladığı ve belirli noktalarda karşısına çıkan çoktan seçmeli soruları cevaplayarak ilerlediği bir 3 boyutlu eğitim destekli oyun geliştirdim. Projede temel amaç, oyunlaştırma yaklaşımıyla soru çözme sürecini daha etkileşimli ve eğlenceli hale getirmekti.

Oyunun teknik altyapısını React + TypeScript + Vite ile kurdum. 3 boyutlu sahne, kamera, nesne yönetimi ve oyun akışını Three.js kullanarak geliştirdim. Mobil ve masaüstü uyumlu kontroller, soru sistemi, skor tablosu, yakıt sistemi ve oyun akışı tarafını kendim tasarlayıp uyguladım.
Not: Oyun motorunun bazı görsel/teknik kısımlarında ve roket modelinin oluşturulmasında yapay zekâdan fikir ve teknik destek aldım; bunun dışındaki uygulama mantığı, ekran yapıları, soru sistemi, veri organizasyonu ve genel bütünleştirme işlemlerini kendim gerçekleştirdim.

2. Projenin Amacı

Bu projeyi geliştirirken temel hedeflerim şunlardı:

• Kullanıcının dikkat ve refleks gerektiren bir oyun oynarken aynı zamanda soru çözmesini sağlamak
• Eğitim içeriğini klasik test formatından çıkarıp daha motive edici hale getirmek
• Mobil cihazlarda da oynanabilecek sade ama etkileyici bir arayüz oluşturmak
• React ile kullanıcı arayüzünü, Three.js ile gerçek zamanlı 3D sahneyi birleştirmek
• Oyun sırasında performansı koruyacak optimize bir yapı kurmak

3. Proje Kapsamı

Projede aşağıdaki özellikler yer almaktadır:

• 3 boyutlu uzay sahnesi
• Roket kontrol sistemi
• Rastgele üretilen duvar ve delik sistemi
• Farklı renklerde yakıt bidonları
• Yakıt durumuna bağlı ilerleme mantığı
• Soru-cevap modal sistemi
• Doğru/yanlış cevaba göre yakıt ödülü/cezası
• Skor hesaplama
• Oyun sonu ekranı
• LocalStorage tabanlı ilk 20 skor tablosu
• Mobil joystick ve gaz butonu
• Klavye destekli masaüstü kontroller
• Performans optimizasyonları
• Tek dosya olarak build alınabilen dağıtım yapısı

4. Kullanılan Teknolojiler

Projede kullandığım teknolojiler şunlardır:

• React 19: Arayüz ve ekran yönetimi için
• TypeScript: Daha güvenli ve düzenli kod yapısı için
• Vite: Hızlı geliştirme ve build süreci için
• Three.js: 3D sahne, kamera, ışıklar, objeler ve animasyonlar için
• Tailwind CSS 4: Arayüz tasarımı ve hızlı stil geliştirme için
• LocalStorage: Skor kayıt sistemi için
• vite-plugin-singlefile: Projeyi tek dosya halinde build alabilmek için

5. Planlama Aşaması

Projeye başlamadan önce önce oyunun mantığını ve akışını planladım. İlk aşamada aşağıdaki sorulara cevap verdim:

• Oyuncu ne yapacak?
• Oyunun başarısız olma koşulları ne olacak?
• Soru sistemi oyuna nasıl entegre edilecek?
• Mobil kullanıcılar nasıl kontrol edecek?
• Yakıt sistemi nasıl dengelenecek?
• Arayüz ile oyun motoru birbiriyle nasıl haberleşecek?

Bu planlamaya göre şu yapıyı kurmaya karar verdim:

1. Ana menü ekranı
2. 3D oyun sahnesi
3. HUD (yakıt, skor, hız)
4. Soru modalı
5. Oyun sonu ekranı
6. Skor tablosu

Ayrıca soru zorluklarını kolay / normal / zor olarak ayırdım ve bunları yakıt ödülleriyle ilişkilendirdim:

• Yeşil bidon → Kolay soru → +10 yakıt
• Sarı bidon → Normal soru → +20 yakıt
• Kırmızı bidon → Zor soru → +30 yakıt

Bu yapı sayesinde oyun ile eğitim içeriği doğrudan birbirine bağlanmış oldu.

6. Dosya Yapısı ve Görevleri

Projede dosya yapısını modüler olacak şekilde düzenledim.

src/App.tsx

Uygulamanın ana bileşenidir.
Burada:

• ekran geçişlerini,
• skor/fuel/hız state'lerini,
• soru modalını,
• joystick ve gaz butonunu,
• oyun sonu ve skor tablosu ekranlarını yönettim.

src/game/GameEngine.ts

Oyunun 3D tarafını yöneten ana sınıftır.
Burada:

• Three.js sahnesi,
• kamera ve renderer,
• roket,
• duvarlar,
• yakıt nesneleri,
• çarpışma kontrolleri,
• fizik,
• oyun döngüsü,
• kamera takibi,
• efektler,
• performans optimizasyonları yönetilmektedir.

src/data/easy.ts, normal.ts, hard.ts

Soru havuzlarını zorluk seviyesine göre ayırdım.

src/data/questions.ts

Soru dosyalarını tek yerden yönetmek ve rastgele soru seçmek için kullandım.

src/index.css

Tam ekran kullanım, kullanıcı seçimi engelleme, touch davranışı ve bazı global animasyonları burada tanımladım.

vite.config.ts

Alias tanımı, Tailwind entegrasyonu, tek dosya build ve test/erişim ayarları burada yapıldı.

7. Geliştirme Süreci (Tarih Bazlı)

Aşağıda projeyi 25.03.2026–12.04.2026 tarihleri arasında adım adım nasıl geliştirdiğimi detaylı olarak açıklıyorum.

25.03.2026 – Fikir Oluşturma ve Ön Analiz

Bu gün projeye genel karar verme aşamasıyla başladım.

Yaptıklarım:

• Proje fikrini "3D uzay oyunu + soru çözme sistemi" olarak netleştirdim.
• Oyuncunun sürekli ilerleyeceği bir oyun yapısına karar verdim.
• Yakıt toplama ile soru çözmeyi ilişkilendirdim.
• Hedef kitleyi mobil ve masaüstü kullanıcılar olarak belirledim.
• Basit ama görsel olarak dikkat çekici bir oyun hedefledim.
• Kitaptan "Sıvı Çözeltiler ve Çözünürlük Konusunu seçtim"

Bu aşamada oyunun ana temelini planladım ve soruları hangi konuda yazacağımı belirledim.

26.03.2026 – Proje Kurulumu ve Teknoloji Altyapısı

Bu gün proje altyapısını kurdum.

Yaptıklarım:

• Vite ile React + TypeScript projesini oluşturdum.
• Tailwind CSS entegrasyonunu yaptım.
• Üçüncü parti paketleri yükledim:
  • three
  • @types/three
  • vite-plugin-singlefile
• Proje klasörlerini düzenledim.
• @ alias yapısını ayarladım.

Bu aşama sonrasında proje çalışır duruma geldi ve geliştirmeye hazır hale geldi.

27.03.2026 – Uygulama Ekran Planı ve Ana Bileşen Yapısı

Bu gün React tarafındaki genel ekran mimarisini kurdum.

Eklediklerim:

• menu
• playing
• gameOver
• leaderboard

Ayrıca:

• ekran geçişlerini state ile yönettim,
• container yapısını kurdum,
• Three.js sahnesinin React içine yerleşeceği alanı hazırladım.

Bu gün sonunda oyunun temel ekran akışı oluştu.

28.03.2026 – Three.js Sahnesi ve Temel Oyun Motoru

Bu gün 3D tarafın temelini attım.

Eklediklerim:

• scene
• perspective camera
• renderer
• sahne arka planı
• sis (fog)
• temel ışıklar
• resize yönetimi

Ayrıca:

• renderer'ı tam ekran çalışacak şekilde ayarladım,
• cihaz piksel oranını sınırlandırarak gereksiz GPU yükünü azaltmaya başladım.

Bu gün oyun motorunun temel iskeleti tamamlandı.

29.03.2026 – Roket Modeli ve Görsel Karakter Tasarımı

Bu aşamada oyuncunun kontrol edeceği roketi oluşturdum.
Not: Roketin 3D formu ve bazı görsel modelleme kararlarında yapay zekâdan teknik fikir desteği aldım.

Eklediklerim:

• ana gövde
• burun kısmı
• pencere
• iniş ayakları
• motor çıkışı
• dış alev
• iç alev
• motor ışığı

Yaptığım değişiklikler:

• Roketin boyutunu deliklerden geçmeye uygun olacak şekilde küçülttüm.
• Daha okunabilir olması için gövde rengini açık, burun kısmını kırmızı yaptım.
• Kullanıcının yön hissini artırmak için pencere ve iniş ayakları ekledim.

30.03.2026 – Hareket Sistemi ve Fizik

Bu gün oyunun oynanabilir olmasını sağlayan temel fizik sistemini yazdım.

Eklediklerim:

• yerçekimi
• yukarı itiş (thrust)
• yatay hareket
• hızlanma/yavaşlama
• yakıt tüketimi
• sınırlandırmalar

Yaptığım değişiklikler:

• Roketin sağ-sol hareketini daha kontrollü hale getirdim.
• Yakıt bittiğinde düşüşün hızlanmasını ekledim.
• Tavana çok fazla çıkmayı engellemek için üst sınır koydum.
• Aşağıya fazla düşüldüğünde oyunun bitmesini sağladım.

Bu gün sonunda oyun temel düzeyde oynanabilir hale geldi.

31.03.2026 – Duvar ve Delik Sistemi

Bu gün oyunun ana engel yapısını geliştirdim.

Eklediklerim:

• 3x3 grid mantığında duvar yapısı
• rastgele 1–4 arası delik üretimi
• duvarların oyuncuya doğru gelmesi
• yeni duvarların önde üretilmesi

Yaptığım değişiklikler:

• Duvar aralıklarını oynanışa uygun hale getirdim.
• Delik boyutlarını roketin geçebileceği ama dikkat gerektirecek seviyede tuttum.
• Delik kenarlarını belirginleştirmek için çerçeve parlamaları ekledim.

Bu sistem oyunun ana refleks mekaniğini oluşturdu.

01.04.2026 – Yakıt Bidonları ve Zorluk İlişkisi

Bu gün deliklerin içine yakıt ödülü sistemi ekledim.

Eklediklerim:

• delik içine bidon nesnesi
• renk tabanlı zorluk seviyesi
• kolay/normal/zor dağılımı
• dönen ve hafif salınan yakıt animasyonu

Yaptığım değişiklikler:

• Bidonların görünürlüğünü artırmak için emissive materyal kullandım.
• Çok sayıda ışık kullanmanın performansı düşürdüğünü fark ettiğim için gerçek ışık yerine daha çok parlak materyal tercih ettim.
• Bidon tiplerini:
  • yeşil
  • sarı
  • kırmızı
    olarak ayırdım.

Bu aşamada eğitim kısmı ile oyun mekaniği doğrudan birleşmiş oldu.

02.04.2026 – Çarpışma, Delik Kontrolü ve Skor Sistemi

Bu gün duvar geçişlerini ve başarısızlık durumlarını tamamladım.

Eklediklerim:

• oyuncunun delikten geçip geçmediğini kontrol eden sistem
• doğru boşluktan geçince skor artışı
• duvara çarpınca oyun sonu
• yakıtlı delikten geçince soru tetiklenmesi

Yaptığım değişiklikler:

• Çarpışma kontrolüne küçük bir güvenlik payı (margin) ekledim.
• Böylece oyuncu tam kenarda olduğunda adaletsiz çarpışmalar biraz azaltılmış oldu.

Bu gün sonunda oyun artık "hedefi olan" bir yapıya kavuştu.

03.04.2026 – Soru Veri Yapısı ve Soru Havuzu

Bu gün eğitim içeriğini ders kitabını baz alarak toplam 90 soru oluşturdum ve kod tarafında düzenledim.

Eklediklerim:

• easy.ts
• normal.ts
• hard.ts
• ortak Question tipi
• rastgele soru seçme fonksiyonu

Yaptığım değişiklikler:

• Soruları tek dosyada tutmak yerine zorluklara göre ayırdım.
• Böylece yönetimi ve güncellemeyi kolaylaştırdım.
• Soru havuzunu genişletilebilir şekilde tasarladım.

Bu kısım tamamen veri yönetimi ve içerik organizasyonu odaklı ilerledi.

04.04.2026 – Soru Modalı ve Ödül/Ceza Mekaniği

Bu gün soru ekranını oyuna bağladım.

Eklediklerim:

• modal pencere
• çoktan seçmeli cevap butonları
• doğru/yanlış geri bildirimi
• cevap sonrası kısa bekleme süresi
• ödül/ceza olarak yakıt ekleme/çıkarma

Yaptığım değişiklikler:

• Soru gösterildiğinde oyunu pause durumuna aldım.
• Cevap verildikten sonra oyunun kaldığı yerden devam etmesini sağladım.
• Zorluk seviyesine göre modal renklerini değiştirdim.

Böylece soru sistemi sadece ekranda gösterilen bir bölüm değil, oyunun doğal parçası haline geldi.

05.04.2026 – Mobil Joystick ve Gaz Butonu

Bu gün mobil oynanabilirlik üzerinde çalıştım.

Eklediklerim:

• sol tarafta yatay çalışan floating joystick
• sağ altta gaz butonu
• touch event desteği
• mouse ile test edilebilir kontrol yapısı

Yaptığım değişiklikler:

• İlk fikirde joystick'i tam serbest düşünmüştüm, ancak oyunda sadece sağ-sol hareket gerektiği için yatay eksene indirgedim.
• Böylece kontrol daha anlaşılır hale geldi.
• Butonlara istemsiz dokunma problemini azaltmak için belirli bölgelerde filtreleme yaptım.

Bu gün proje mobil cihazlar için çok daha kullanılabilir hale geldi.

06.04.2026 – Oyun HUD'ı

Bu gün oyuncuya anlık bilgi veren arayüzleri ekledim.

Eklediklerim:

• dikey yakıt göstergesi
• skor alanı
• hız bilgisi

Yaptığım değişiklikler:

• Yakıt barını renk geçişli hale getirdim:
  • yüksek yakıt → yeşil
  • orta yakıt → sarı
  • düşük yakıt → kırmızı
• HUD öğelerini oyun görüntüsünü kapatmayacak köşelere yerleştirdim.

Bu sayede oyuncu tüm kritik bilgileri anlık takip edebilir hale geldi.

07.04.2026 – Oyun Sonu Ekranı ve Menü Düzenlemeleri

Bu gün kullanıcı akışını tamamladım.

Eklediklerim:

• ana menü ekranı
• tekrar oynama butonu
• skor tablosuna geçiş
• ana menüye dönüş seçeneği
• oyun sonu skor gösterimi

Yaptığım değişiklikler:

• Menü metinlerini sadeleştirdim.
• Kullanıcıya kontrolleri menüde açıklayan kısa bilgi alanı ekledim.
• Oyun bittiğinde kullanıcıyı boş ekranda bırakmayacak net bir yönlendirme yaptım.

08.04.2026 – Skor Tablosu ve Kayıt Sistemi

Bu gün oyuncu skorlarının saklanmasını sağladım.

Eklediklerim:

• LocalStorage tabanlı skor kaydı
• ilk 20 skor mantığı
• isim girme alanı
• skor sıralama ekranı

Yaptığım değişiklikler:

• Yalnızca ilk 20 skoru saklayacak yapı kurdum.
• Skorlar büyükten küçüğe sıralanacak şekilde düzenledim.
• Eğer oyuncunun skoru ilk 20'ye giriyorsa isim girmesini sağladım.

Bu özellik projeye tekrar oynanabilirlik kattı.

09.04.2026 – Görsel Efektler ve Atmosfer

Bu gün oyunun görsel hissini güçlendirdim.

Eklediklerim:

• yıldız alanı
• motor alev animasyonları
• yan itici parçacıklar
• kamera takip hissi
• geçilen duvarların solması

Yaptığım değişiklikler:

• Alevin aktif/pasif durumlarını daha yumuşak hale getirdim.
• Sağ-sol manevrada yan parçacık efektleri ekleyerek hareket hissini güçlendirdim.
• Kamerayı doğrudan sabitlemek yerine yumuşak takip yaptım.

Bu gün oyun daha canlı ve profesyonel göründü.

10.04.2026 – Performans Optimizasyonları

Bu gün performans odaklı düzenlemeler yaptım.
Not: Oyun motoru optimizasyonu tarafında burada yapay zekâdan teknik öneri düzeyinde destek aldım.

Yaptığım iyileştirmeler:

• ortak geometriler ve materyaller oluşturdum
• gereksiz gölge hesaplamalarını kapattım
• kamera far plane değerini düşürdüm
• uzak nesnelerin bazı animasyonlarını atladım
• sürekli React state güncellemesi yerine throttle kullandım
• duvar temizliğini daha verimli hale getirdim
• parçacık havuzunu sınırladım
• gereksiz sahne taramalarını kaldırdım
• tekrar kullanılabilir vektörler kullandım

Karşılaştığım sorun:

• İlk sürümlerde çok sayıda nesne sahnede kaldığında performans düşüyordu.

Çözüm:

• nesne paylaşımı,
• manuel cleanup,
• dispose() yönetimi,
• güncelleme sıklığını azaltma
  ile bu sorunu büyük ölçüde çözdüm.

11.04.2026 – Test, Hata Ayıklama ve Dengeleme

Bu gün farklı oynanış senaryolarını test ettim.

Test ettiğim başlıklar:

• klavye ile kontrol
• mouse/touch ile kontrol
• ekran boyutu değiştiğinde kamera ve renderer davranışı
• soru açıldığında oyunun durması
• yanlış cevapta yakıt eksilmesi
• doğru cevapta yakıt artması
• skor kaydının doğru sıralanması
• oyun reset sonrası state temizliği
• hızlı art arda duvar geçişlerinde hata olup olmaması

Yaptığım değişiklikler:

• yakıt tüketim oranlarını oynanışa göre dengeledim
• hız artışını kontrollü hale getirdim
• duvar sıklığını biraz optimize ettim
• çarpışma hissini adil olacak şekilde ayarladım

12.04.2026 – Son Düzenlemeler ve Teslim Hazırlığı

Bu gün projeyi teslim aşamasına getirdim.

Yaptıklarım:

• kod temizliği yaptım
• dosya yapısını son kez kontrol ettim
• yorum satırlarını ve bazı açıklamaları düzenledim
• build çıktısını test ettim
• tek dosya build yaklaşımını doğruladım
• genel kullanıcı deneyimini son kez gözden geçirdim

Bu aşamada proje raporlamaya ve sunuma hazır hale geldi.

8. Uyguladığım Temel Oyun Mekanikleri

Projede geliştirdiğim başlıca mekanikler şunlardır:

8.1 Yakıt Sistemi

• Yakıt zamanla sürekli azalır.
• Gaz verildiğinde ekstra yakıt tüketilir.
• Doğru soru cevabında yakıt artar.
• Yanlış cevapta yakıt azalır.
• Yakıt sıfıra düştüğünde roket daha zor kontrol edilir ve düşüş hızlanır.

8.2 Skor Sistemi

• Her başarılı duvar geçişinde skor artar.
• Oyuncunun amacı mümkün olduğunca çok duvardan geçmektir.

8.3 Soru Tetikleme Sistemi

• Eğer oyuncu içinde bidon olan doğru bir delikten geçerse soru açılır.
• Zorluk, bidonun rengine göre belirlenir.

8.4 Oyun Sonu Koşulları

• Duvara çarpma
• Fazla aşağı düşme

9. Arayüz Tasarımı

Arayüzü geliştirirken sade ama okunabilir bir yapı kurmaya dikkat ettim.

Kullandığım ekranlar:

• Ana Menü
• Oyun Ekranı
• Soru Modalı
• Oyun Sonu
• Skor Tablosu

Tasarım kararlarım:

• Oyun sırasında dikkat dağıtmamak için HUD'ı köşelere yerleştirdim.
• Soru modalında zorluk seviyesini renk ile belirttim.
• Mobilde butonların büyük ve erişilebilir olmasına dikkat ettim.
• Oyun sonu ekranında kullanıcıya net seçenekler sundum.

10. Karşılaştığım Problemler ve Çözümler

Problem 1: React ile oyun motoru senkronizasyonu

Oyun motoru sürekli güncellenirken React tarafında her kare state güncellemesi yapmak performans açısından uygun değildi.

Çözüm:
State değişimlerini belirli aralıklarla yayınlayan bir yapı kullandım.

Problem 2: Çok nesneli sahnede performans düşüşü

Duvarlar, bidonlar, parçacıklar ve efektler arttıkça sahne maliyeti yükseldi.

Çözüm:
Paylaşımlı geometri/material yapıları, görünmeyen nesnelerin temizlenmesi ve gereksiz hesaplamaların azaltılması ile bunu optimize ettim.

Problem 3: Mobil kontrolde istenmeyen dokunmalar

Touch olaylarında bazen oyuncu hem butona hem sahneye etki edebiliyordu.

Çözüm:
Joystick ve buton alanlarını ayrıştırdım, preventDefault() kullandım ve dokunma mantığını dikkatli yönettim.

Problem 4: Oyun duraklatıldığında akış kontrolü

Soru açıldığında fizik, input ve görsel akışın karışmaması gerekiyordu.

Çözüm:
Motor içinde _isPaused yapısı kurarak render'ı koruyup fizik güncellemelerini durdurdum.

11. Yapay Zekâ Kullanım Beyanı

Bu projede yapay zekâyı tamamen kodu yazdırmak amacıyla değil, belirli teknik/görsel alanlarda destekleyici araç olarak kullandım.

Yapay zekâdan destek aldığım kısımlar:

• 3D roket modelinin bazı form ve parça fikirleri
• oyun motorundaki bazı performans optimizasyonu yaklaşımları
• görsel efektler ve bazı modelleme kararları için teknik öneriler

Kendi geliştirdiğim başlıca kısımlar:

• React ekran yapısı
• oyun akışı
• soru sistemi ve veri organizasyonu
• skor tablosu
• LocalStorage kayıt sistemi
• mobil joystick ve gaz butonu entegrasyonu
• HUD tasarımı
• menü ve modal ekranları
• soru-cevap ödül/ceza ilişkisi
• uygulamanın genel bütünleştirme ve test süreçleri

Bu nedenle projede yapay zekâ, yardımcı bir araç olarak kullanılmış; ürünün genel mantığı, yapısı ve kullanıcı deneyimi tarafı tarafımdan geliştirilmiştir.

12. Proje Sonucu ve Değerlendirme

Bu proje sonunda:

• React ile gerçek zamanlı bir oyun arayüzü yönetmeyi,
• Three.js ile 3D sahne kurmayı,
• kullanıcı girdilerini hem masaüstü hem mobil için işlemeyi,
• soru sistemi ile oyun mekaniğini birleştirmeyi,
• performans optimizasyonlarının önemini
  uygulamalı olarak öğrenmiş oldum.

Proje, hem teknik hem de tasarım açısından benim için öğretici oldu. Özellikle oyun döngüsü, çarpışma kontrolü, 3D sahne yönetimi ve kullanıcı deneyimi tasarımı konusunda önemli deneyim kazandım.

Gelecekte bu projeye şu geliştirmeleri eklemeyi planlayabilirim:

• ses efektleri ve arka plan müziği
• farklı bölüm sistemleri
• daha fazla engel tipi
• online skor tablosu
• soru tekrarını engelleyen gelişmiş havuz sistemi
• farklı roket görünümleri
• oyun içi seviye sistemi

Sonuç olarak, Rocket Rush, oyunlaştırılmış öğrenme fikrini temel alan, teknik olarak çalışan, geliştirilebilir ve kullanıcıya etkileşimli deneyim sunan başarılı bir proje olmuştur.

Kısa Geliştirme Özeti Tablosu

Umut Toprak

12.04.2026