HTML SATRANÇ OYUNU 2D SPRİTE MODERN TASARIM VİDEOSUNU İZLE
1. İlk İzlenim: Sadelik ve Şıklığın Dengesi
- Göz alıcı ana renk geçişleri: Arkaplanda üç tonlu gradyan (mavi–mor–pembe) geçişi, hem modern hem de eğlenceli bir his yaratıyor.
- Flü efekti ve gölgeler: Menü kutuları, paneller ve düğmeler üzerinde uygulanan bulanıklaştırma (backdrop-filter) ve gölge kullanımı, katmanlar arası derinlik duygusunu güçlendiriyor.
- Minimalist tipografi: Başlıkta kullanılan büyük, kalın font ve renkli metin klipleme (background-clip) tekniği, kullanıcıyı ana odak noktasına yönlendiriyor.
2. Kullanıcı Ayarları ve Başlatma Süreci
Oyun Modu Seçimi
- İki ana seçenek: “Oyuncu vs Oyuncu (PVP)” ve “Oyuncu vs Bilgisayar (PVC)”.
- PVC seçildiğinde dinamik olarak “Bilgisayar hangi renkle oynasın?” paneli açılıyor.
- Seçenek kartları üzerindeki hover efektleri, seçili durumda hafif vurgulama ve büyütme ile kullanıcıya anlık geri bildirim veriyor.
Başlatma Düğmesi
Yuvarlak köşeli, hafif dalgalı arkaplan rengi ve içinden yayılan animasyonlu dalga efekti, “🚀 Oyunu Başlat” düğmesini cazip kılıyor.
Tıklandığında menü kaybolup satranç tahtası düzeni ekrana geliyor.
3. Oyun Düzeni ve Paneller
- Flex-grid kombinasyonu: Sağ ve solda “Yenilen Beyaz/Siyah Taşlar” panelleri, ortada 512×512 piksel büyüklüğünde tuval (canvas) ve altında kontrol düğmeleri ile dengeli bir yapı kurulmuş.
- Yakalanan taşlar: Kenar panellerinde, animasyonlu küçük tuvallere çizilen taş simgeleri, oyuncunun eksilen materyalini net biçimde gösteriyor.
- Hamle kontrol butonları: Mod, hamle geçmişi, istatistik, bilgi, ayar ve yenile düğmeleri; tek tip, renkli ve ikonlu tasarımlarıyla hem göze hoş geliyor hem de kolay erişim sağlıyor.
4. Hamle Geçmişi ve İstatistik Modalları
- Modal pencereler: Tüm hamleleri, istatistikleri veya bilgi metinlerini kullanıcıya düzgün bir diyalog kutusu içinde sunuyor.
- Hamle listesi: Liste içindeki her hamle satırı, hareket sırasıyla numaralandırılmış, taş ikonu, korte ve zamanla birlikte okunaklı bir biçimde sıralanıyor.
- Kopyala/Dışa Aktar/Temizle kontrolleriyle hamle geçmişi kolayca yönetilebiliyor.
- İstatistikler: Toplam oyun, beyaz/siyah galibiyetler, beraberlikler ve taş yakalama sayıları gibi temel veriler, renkli minik kartlarda sergileniyor. Tek tuşla sıfırlama seçeneği de mevcut.
5. Bilgilendirme ve Ayarlar
- Piyon Terfisi: Oyuncu piyonun son sıraya geldiğinde açılan şık bir diyalogla kale, at, fil veya vezir seçim hakkını kullanıyor. Seçilen parça, kısa bir animasyonla tahtaya yerleştiriliyor.
- Rok Kuralları: Kısa ve uzun rok manuel animasyonlarla gösteriliyor, hem metin hem de grafiksel kutucuklarla anlatım kolaylaştırılıyor.
- Genel Bilgilendirme: Oyun mekaniği, dosya yapısı gereksinimleri ve temel satranç kuralları; anlaşılır başlıklar ve ikonlarla desteklenmiş uzun metinler içinde yer alıyor.
- Görsel Ayarlar: Ses efektleri, hamle ipuçları, koordinat gösterimi gibi öğeler tek bir panelde açılıp kapatılabiliyor.
- AI Ayarları: Yapay zekânın zorluk düzeyi ve düşünme süresi sürgülü kontrol elemanlarıyla (slider) ayarlanabiliyor.
6. Responsive ve İnteraktif Tasarım
- Cihaz uyumu: 1024 px’den dar ekranlarda mod seçimleri dikeyde, 768 px’den dar daha küçük ekranlarda başlık ve modal boyutları optimal ölçeğe indirgeniyor.
- Hover ve tıklama etkileşimleri: Renk değişimleri, gölgelendirme ve ölçek animasyonları; kullanıcıyı eyleme teşvik eden ince ama etkili dokunuşlar.
- Klavye kısayolları: Escape tuşuyla modal kapatma, Ctrl+N ile yeni oyun başlatma gibi üretkenlik artıcı kısa yollar.
7. Oyun Akışı ve Zaman Yönetimi
- Süre takibi: Oyun başladığında, her saniye güncellenen bir kronometre devreye giriyor. Ekranın altında “Süre: MM:SS” bölümü anlık zamanı gösteriyor.
- Hamle sayısı: Kaçıncı hamlede olduğunuz ve oynanan toplam hamle sayısı, küçük sayaçlarla oyuncuya bildiriliyor.
- Yapay zekânın düşünmesi: Bilgisayarın hareketleri arasında ekranda beliren “🤖 Bilgisayar düşünüyor...” mesajı, bekleme hissini azaltıyor.
8. Genel Değerlendirme ve Kullanıcıya Katkıları
Erişilebilirlik
- Renk kontrastları, okunur font boyutları ve açıklayıcı ikonlar, hem deneyimli satranççılara hem de yeni başlayanlara hitap ediyor.
Öğrenme Desteği
Yenilikçi Görsellik
Esneklik
Sürükleyici Deneyim
Sonuç
“Satranç – Modern Tam Teşekküllü” projesi, teknik karmaşıklıktan uzak durup kullanıcı odaklı, görsel açıdan zengin ve işlevsel bir satranç deneyimi sunuyor. Oyun modu seçimi, piyon terfisi, rok kuralları, hamle geçmişi, istatistikler ve ayarlar gibi pek çok öğe; anlaşılır modallar, sezgisel kontroller ve modern tasarım dokunuşlarıyla bir araya getiriliyor. Arkasında güçlü bir JavaScript altyapısı bulunmasına rağmen, son kullanıcıya sadece akıcı ve keyifli bir satranç deneyimi vaat ediyor. Bu başyapıt, web tabanlı oyunların nasıl hem göze hem de mantığa hitap edebileceğinin güzel bir örneği olarak öne çıkıyor.
