Ş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.

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 elementinin hareketi sırasında left konumu 0 veya 0'dan küçük değere ulaşırsa, sağdaki oyuncu puan kazanır.

if(parseInt(ball.style.left) <= 0){

  scoreRight++;

  document.getElementById('scoreRight').innerHTML = scoreRight;

 }

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

 if(parseInt(ball.style.left) + 16 >= window.innerWidth){

  scoreLeft++;

  document.getElementById('scoreLeft').innerHTML = scoreLeft;

 }

#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.

//gameLoop function....

 if(parseInt(ball.style.left) <= 0){

  scoreRight++;

  document.getElementById('scoreRight').innerHTML = scoreRight;

  gameChain();

 }

 if(parseInt(ball.style.left) + 16 >= window.innerWidth){

  scoreLeft++;

  document.getElementById('scoreLeft').innerHTML = scoreLeft;

  gameChain();

 }

}

function gameChain(){

 ball.style.top = window.innerHeight/2 + 'px';

 ball.style.left = (window.innerWidth/2) - (16/2) + 'px'; 

}

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.

function gameChain(){

 ball.style.top = window.innerHeight/2 + 'px';

 ball.style.left = (window.innerWidth/2) - (16/2) + 'px';

 var rnd = Math.random()*4+2;

 if(Math.random()*1 > 0.5){

  rnd *= -1;  

 }

 ballLeft = rnd;

 ballTop = rnd;

}

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.

// function gameLoop...

 if(parseInt(ball.style.left) <= 0){

  if(++scoreRight === 5){

   alert('2. oyuncu kazandı.');

   scoreRight = 0;

   scoreLeft = 0;

   document.getElementById('scoreLeft').innerHTML = scoreLeft;

  }

  document.getElementById('scoreRight').innerHTML = scoreRight;

  gameChain();

 }

 if(parseInt(ball.style.left) + 16 >= window.innerWidth){

  if(++scoreLeft === 5){

   alert('1. oyuncu kazandı.');

   scoreRight = 0;

   scoreLeft = 0;

   document.getElementById('scoreRight').innerHTML = scoreRight;

  }

  document.getElementById('scoreLeft').innerHTML = scoreLeft;

  gameChain();

 }

}

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.