Oyunun temel fikri

Oyunun amacı iki kişinin birbirini ne kadar iyi tanıdığını kısa sorularla görmek. Oyunculardan biri oda oluşturuyor ve oluşan bağlantıyı diğer kişiye gönderiyor. İkinci oyuncu katılınca tur başlıyor. Herkes kendi cevabını verdikten sonra sonuçlar aynı anda açılıyor; böylece ilk cevap veren kişi diğerinin cevabından etkilenmiyor.

Ne Kadar İyi Tanıyorsun oda oluşturma ve oyuna katılma ekranı
Açılış ekranında oda kurma, davet gönderme ve oyuna katılma adımlarını tek görünümde tuttum. Oyuncu teknik ayrıntıları görmeden doğrudan teste başlayabiliyor.

İstemci ve sunucu ayrımı

Arayüzü React 18 ve Vite ile, sunucuyu Express ve Socket.IO ile geliştirdim. Tarayıcı yalnızca mevcut oda durumunu gösteriyor ve oyuncu eylemlerini iletiyor. Hangi sorunun aktif olduğu, kimin cevap verdiği, turun açılıp açılmayacağı ve skor sunucuda belirleniyor.

Sunucuda odaları kodla erişilen bir Map içinde tutuyorum. Dışarı gönderilen oda nesnesi özel bir fonksiyondan geçiyor; böylece henüz açıklanmaması gereken cevaplar istemciye yanlışlıkla sızmıyor.

Oda oluşturma ve davet

room:create olayı benzersiz bir oda kodu oluşturuyor. İstemci bu kodu URL'deki ?room= parametresine ekliyor ve paylaşılabilir bağlantıyı panoya kopyalıyor. İkinci oyuncu bağlantıyı açtığında kod otomatik okunuyor; room:join ile odaya katılıyor.

  • Oda kodları büyük harfe çevrilerek giriş farkları azaltılıyor.
  • Bir oda en fazla iki oyuncu kabul ediyor.
  • Her değişiklikten sonra iki istemciye de aynı room:update olayı gönderiliyor.
  • Bağlantı hatası kullanıcıya açık bir durum mesajı olarak gösteriliyor.

Cevapları aynı anda açmak

Oyuncu answer:submit gönderdiğinde cevap sunucuda kilitleniyor ve o oyuncu cevap verenler listesine ekleniyor. Liste iki kişiye ulaştığında oda revealing durumuna geçiyor. Sunucu cevapları karşılaştırıp sonucu ve skoru hesapladıktan sonra her iki tarayıcıya aynı güncellemeyi yayıyor.

İki oyuncunun çevrim içi olduğu canlı soru ekranı
Canlı tur ekranında iki oyuncunun bağlantı durumu, sıra bilgisi ve cevap seçenekleri birlikte görünüyor. Cevap sonrası bekleme durumu da aynı panelde yönetiliyor.
En kritik kural

Sonuç gösterme kararı istemcide değil sunucuda veriliyor. Böylece iki ekranın farklı zamanlarda veya farklı sonuçlarla ilerlemesi engelleniyor.

Soru havuzu ve oyun ritmi

Soruları koddan ayırıp JSON dosyasında tuttum. Havuzda 290 soru var; 70 tanesi daha saçma ve komik oyun sorularından oluşuyor. Arkadaş, partner ve aile modlarına göre filtreleme yapılabiliyor. Metin ve seçenekli cevap türleri aynı tur sistemi içinde çalışıyor.

Ne öğrendim?

Gerçek zamanlı uygulamada asıl zorluk bağlantıyı açmak değil, herkesin aynı durumu görmesini sağlamak. Durum makinesini waiting, playing, revealing ve finished olarak açık kurmak, arayüzdeki koşulları ve sunucu olaylarını ciddi biçimde sadeleştirdi.