Javascript İle Oyun Yapımı: Skor Tablosu

Kubilay Kahil
2 min readDec 27, 2019

--

Şuana kadar oyun alanını, çubukların hareketini düzenledik. Topun oyun alanı içerisinde sürekli hareketi etmesini sağladık.

Bu yazımızla birlikte oyuncular puan kazanacak ve aldıkları puan 5'e eşit olduğunda taraflardan biri oyunu kazanacak. Ardından oyun tekrar 0–0 skorundan devam edecek.

Yazı sonunda kodların toplu halini bulabilirsiniz.

Puan Alma

Tarafların skor bilgilerini tutmak için değişken tanımlayalım.

var scoreLeft = 0;
var scoreRight = 0;

#ball elementinin left değerini takip ederek hangi tarafın topu kaçırdığını bulabiliriz. Mesela #ball elementi left değeri 100 ise tam olarak konumu bu noktadadır.

#ball konumu

#ball elementinin hareketi sırasında left konumu 0 veya 0'dan küçük değere ulaşırsa, sağdaki oyuncu puan kazanır.

#ball elementinin left değeri oyun alanının genişliğine eşit veya daha büyük ise, soldaki oyuncu puanı kapar.

#ball konumuna göre oyunculara puan ekledik. Ancak #ball elementi girdiğimiz değerler doğrultusunda hareketine devam ediyor. Bu durumun önüne geçerek, oyunu yeniden başlatmamız gerekiyor.

function gameChain(){
ball.style.top = window.innerHeight/2 + 'px';
ball.style.left = (window.innerWidth/2) - (16/2) + 'px';
}

Karar yapımız true değerinde dönünce, puan ekleyerek fonksiyonumuz çağıracağız.

Küçük bir görev yapalım. #ball elementi merkezdeki konumundan itibaren sağa veya sola doğru olan hareketini random gerçekleştirsin.

ballLeft, ballTop değişkenlerimin değerlerine 0 ataması yapıyorum. Ardından gameChain fonksiyonunu gameLoop fonskiyonundan önce çağıyorum.

...
gameChain();
// oyunun sürekli devam etmesi için gerekli yapı
function gameLoop(){

Şimdi tekrar gameLoop fonksiyonumuza dönelim.

rnd değişkeninde random bir sayı ürettik. Daha sonra karar yapımız içerisinde farklı bir random üreterek 0.5'den büyük olması durumunda, rnd değişkeninin değerini negatif olarak değiştirdik.

Oyunumuzu bitirmek üzereyiz. Şimdi 5 puana ulaşan oyuncunun oyunu kazanmasını sağlayalım.

If yapısı içerisinde puan kazanan oyuncunun puanını arttırarak 5 değerine eşit olup/olmadığını sorguluyoruz. Eğer eşitse, oyuncu kazanır.

--

--