Kod, kamera ve mikrofon bulunan modern çalışma masası
Kod yazarken dikkat edilecekler Güvenli statik yayın Aksoy Tankım yapım günlüğü Bedava asset defteri İlk konu yayında Haftalık vlog akışı GitHub ve demo linkleri Proje sonrası öğrendiklerim

Yeni konu

Aksoy Tankım: küçük fikirden oynanabilir prototipe

Aksoy Tankım benim için “bir tank çizelim” diye başlayıp, yavaş yavaş küçük bir oyun günlüğüne dönen bir denemeydi. En sevdiğim tarafı da şu: proje büyümeden önce bile hareket, ses, mermi, harita ve his gibi konuların hepsi kendini göstermeye başladı.

HTML CSS JavaScript Game loop Asset notu
Fikir Kontrol Çarpışma Efekt

İlk fikir neydi?

Başta hedef çok basitti: ekranda kendi tankım dursun, yönünü değiştirsin ve ateş edince gerçekten bir şey olmuş gibi hissettirsin. Bu yüzden önce büyük sistemler kurmak yerine sahneyi küçük tuttum. Bir gövde, bir namlu, birkaç hedef noktası ve hareket hissi veren ufak efektler yeterliydi.

Bu tarz projelerde en iyi başlangıç bence “oyun motoru yazıyorum” havasına girmeden oynanabilir çekirdeği çıkarmak. Tankın dönmesi, merminin gitmesi, hedefe yaklaşınca tepki vermesi ve ekranda biraz toz/ışık görmemiz bile projeyi hemen canlı hissettiriyor.

Nerede ne kullandım?

Arayüz ve sunum kısmında HTML sahneyi taşıdı, CSS görsel dili ve animasyonları verdi, JavaScript ise oyun mantığı için ayrılan taraf oldu: klavye kontrolü, game loop, mermi takibi, basit çarpışma kontrolü ve skor gibi şeyler burada düşünülüyor. Asset tarafında da acele etmemek lazım; ücretsiz kaynak güzel ama lisansını okumadan oyuna koymuyorum.

Bir de şunu fark ettim: tank oyunu yaparken en önemli şey sadece model değil, ağırlık hissi. Dönüş biraz gecikmeli olunca, namlu gövdeden ayrı nefes alınca, mermi çizgisi kısa bir iz bırakınca oyun “çalışıyor” demekten çıkıp “hissediliyor” tarafına geçiyor.

Oyun içi görseller

Play Store paketinden gelen sahneler

Bu kareler oyunun daha yayınlık görünmeye başladığı yer. Harita düzeni, bölüm teması, kalan dalga bilgisi ve ekranın okunabilirliği burada birlikte test ediliyor. Yani sadece "güzel dursun" değil, oyuncu ne yaptığını hızlı anlasın diye de bakıyorum.

Aksoy Mücadelesi özellik görseli
Özellik görseli Oyunun vaadini tek bakışta anlatan kapak alanı.
01

Sahneyi kurdum

Önce küçük bir alan, hedef noktaları ve tankın duracağı temiz bir zemin hazırladım.

02

Kontrol hissini aradım

Tank hızlı değil, ağırlıklı hareket etmeli. Bu yüzden dönüş ve ilerleme hissi önemliydi.

03

Mermi ve çarpışma ekledim

Ateş edince çizgi, iz, hedef tepkisi ve küçük efektler oyunun ritmini belirlemeye başladı.

04

Sonra cilaya baktım

Mobilde taşma, performans, animasyon dozu ve asset lisansı gibi detayları kontrol listesine aldım.

İlk konu

Bu siteyi yaparken neler kullandım?

Kısa cevap: sade HTML, güçlü CSS, az ama işe yarayan JavaScript ve bolca düzen. Benim için hedef sadece güzel görünen bir sayfa yapmak değildi; güvenli, anlaşılır ve zamanla içerik eklenebilecek bir kişisel alan kurmaktı.

HTML CSS JavaScript Caddy CSP

Kullandığım temel yapı

Bu site statik bir yapı üzerine kurulu. Yani ziyaretçi geldiğinde çalışan bir veritabanı, giriş sistemi veya karmaşık panel yok. Bu bilinçli bir tercih: kişisel blog/vlog sayfası için hızlı açılan, kolay taşınan ve bakımı rahat bir yapı yeterli oluyor.

Tasarım tarafında büyük bir arka plan görseli, editorial içerik kartları, sekmeli stüdyo alanı ve küçük animasyonlar kullandım. JavaScript sadece sekme geçişleri, kart tıklamaları, scroll göstergesi ve ufak etkileşimler için var. Gereksiz kütüphane eklemeyince hem performans hem güvenlik tarafı daha temiz kalıyor.

Nelere dikkat ettim?

İlk dikkat ettiğim şey okunabilirlik oldu. Birisi siteye girdiğinde “Atalay ne yapıyor, ne öğreniyor, nerede üretiyor?” sorularının cevabını hızlıca görmeli. İkinci konu ise güvenlik: dış linkler kontrollü açılıyor, sayfaya dışarıdan script çekilmiyor ve yayın ortamı için güvenlik header'ları hazırlandı.

Asset kullanırken de lisans meselesini hafife almıyorum. Ücretsiz kaynak güzel, ama her görselin, ikonun veya müziğin kullanım şartı aynı değil. O yüzden kaynak seçerken lisans sayfasını kontrol etmek ve kullandığım materyalleri not almak benim için işin bir parçası.

Sitenin ruhu

Bir portfolio değil, yaşayan bir çalışma masası.

01

Vlog gibi anlat

Her içerik kısa bir hikaye taşısın: problem, deneme, sonuç ve bir sonraki adım.

02

CV etkisini büyüt

Recruiter sadece teknoloji listesi değil, üretim alışkanlığı ve iletişim becerisi görsün.

03

Kaynak defteri tut

Ücretsiz görsel, ikon, font ve video kaynaklarını lisans notlarıyla birlikte sakla.

Hazır sayfa modülleri

Sekmeler arasında canlı geçiş.

Builder log

Vlog başlıkları hazır.

Bu alanı haftalık video, kısa not veya proje günlüğü gibi kullanabilirsin.

Build log

Kişisel siteyi ayağa kaldırmak

Domain, yapı, ana sayfa ve ilk içerik planı.

Kod notu

Kod yazarken neye dikkat ediyorum?

Okunabilirlik, test, responsive düzen ve performans.

Kaynak

Bedava assetleri nasıl seçiyorum?

Lisans, kalite, dosya boyutu ve kullanım senaryosu.

İçerik akışı

Yayına hazır vlog/blog kartları.

02 Mayıs
Yayında

Aksoy Tankım nasıl ortaya çıktı?

Fikir, kontrol hissi, mermi mantığı, animasyonlar, asset seçimi ve küçük oyun prototipi notları.

Oku
01 Mayıs
Yayında

Bu siteyi yaparken neler kullandım?

HTML, CSS, küçük JavaScript dokunuşları, asset seçimi ve güvenli yayın notları.

Oku
03 Haziran
Kod

İyi görünen siteyi iyi çalışan siteye çevirmek

Asset optimizasyonu, erişilebilirlik, hover/scroll animasyonları ve mobil düzen notları.

04 Temmuz
Kaynak

Bedava asset bulurken lisansı nasıl okuyorum?

Kaynak seçimi, ticari kullanım, attribution, marka/yüz hakları ve arşiv düzeni.

Hazır kapanış alanı

Vlog, kod ve proje linkleri aynı kimlikte birleşiyor.

Bu alanı CV, LinkedIn ve GitHub profilinden bağladığında kişisel markan daha düzenli görünür.