Yeniden merhaba. Önceki yazılarda oyun alanını, çubukların hareketini inceledik. Bu yazıda oyun alanındaki #ball elementi üzerinde işlemler yapacak, oyun içerisinde belirli aralıklarla çalışan bir fonksiyon oluşturacağız.

Top Kontrolü

Top oyun alanı içerisinde kaldıkça sürekli bir hareket halinde olması gerekiyor. Bu sürekliliği sağlamak için setInterval(), setTimeout() gibi fonksiyonlardan faydalanabiliriz. Bu fonksiyonların öncesinde DOM üzerinde #ball konumunu merkeze alalım.

// ball elementi üzerinde işlemler
var ball = document.getElementById('ball');

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

Tarayıcı üzerinde çalıştırdığımda #ball elementinin merkezde bulunduğunu görüyorum. “ball.style.top”, “ball.style.left” üzerinde eklenen/çıkarılan her değer konumu değişitirecektir.

// #ball alacağı değerler

ball.style.top = pxAdd(parseInt(ball.style.top) + 2);

ball.style.left = pxAdd(parseInt(ball.style.left) + 2);

pxAdd() fonksiyonu kullanmamızın amacını önceki yazıda belirtmiştik. #ball elementi soldan ve yukarıdan 2px ekleyerek konumunu değiştirdik. Peki bunu sürekli tekrar edersek ne gerçekleşir ? Tam olarak bu:

Top hareketini sol ve yukarıdan +2px alarak sağlıyor. Topun sürekli değer alarak hareketini sürdürmesini nasıl sağlayabiliriz? İpucu yukarıda…

Belirli Aralıklarla Çalışan Fonksiyonlar

Burada zaman aralıklarında çalışan fonksiyonlar devreye giriyor. setTimeout ve setInterval fonksiyonlarını kullanarak belirli aralıklarla sürekli aynı kod bloğunun çalışmasını sağlayabiliriz.

// oyunun sürekli devam etmesi için gerekli yapı

function gameLoop(){

  // topun alacağı değerler

  ball.style.top = pxAdd(parseInt(ball.style.top) + 2);

  ball.style.left = pxAdd(parseInt(ball.style.left) + 2);

}

setInterval(gameLoop, 20);

ball.style.left, ball.style.right üzerine farklı değerler ekleyerek topun izlediği doğrultuyu inceleyelim. Negatif değerler verildiğinde yukarı ve sola doğru bir yol izleyecektir. Yapımız içerisinde birkaç değişken daha oluşturarak, kodları biraz daha okunabilir bir hale getirelim.

var ballTop = 2; // veya -2

var ballLeft = 2; // veya -2

var gameSpeed = 20;

Değişkenleri kurulacak olan yapının en üstünde tanımlanmaları iyi bir alışkanlıktır.

#ball elementinin konumunu değiştirmek için ballTop ve ballLeft değişkenleri kullanacağız. gameSpeed değişkeni ile de oyunun hızını ayarlayacağız.

function gameLoop(){

  //topun alacağı değerler

  ball.style.top = pxAdd(parseInt(ball.style.top) + ballTop);

  ball.style.left = pxAdd(parseInt(ball.style.left) + ballLeft);

}

setInterval(gameLoop, gameSpeed);

Sürekli olarak değer eklediğimiz için #ball elementi oyun alanının boyutları dışında bir değere ulaştığında, oyun alanından dışarı çıkacaktır. Çubukları oyun alanı dışına çıkmasını önlediğimiz gibi, #ball elementinin oyun alanı dışarısına çıkmasını önlemeliyiz.

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

  console.log(top yukarıdan dışarı çıktı);

}

Yukarıdaki kod parçasını biraz inceleyelim. parseInt(ball.style.top), #ball elementinin top değerini sayısal olarak döndürüyor. Kurduğumuz yapı ile de bu sürekli olarak değişiyor. Eğer #ball elementi yukarı doğru olan hareketini devam ettirir ve bu değer 0'a eşit veya küçük olursa, konsol üzerinde bu yazı yazdırılacaktır. Şimdi konsola yazı yazdırmak yerine #ball elementinin top değerini negatif bir sayı ile değiştirerek yönünü farklı bir yöne doğru hareket ettirelim.

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

  ballTop *= -1;

}

#ball elementi yukarı çarptıktan sonra sekerek aşağı doğru hareketine devam edecektir. Bunu yukarısı için gerçekleştirebildiğimize göre aşağısı için de benzer bir yapıyı kurabiliriz.

// top üst ve alt bloklara çarparsa, X ekseninde geri seksin

if(parseInt(ball.style.top) <= 0 || parseInt(ball.style.top) + 16 >= window.height){

  ballTop *= -1;

}

Gözümüzü korkutacak hiçbirşey yok. ‘|| Veya’ parametresi ekleyerek, #ball elementinin top değeri oyun alanından küçük veya büyük olursa yönünü değiştirmiş olduk.

Buna benzer bir mantığı sol ve sağ çubuklara çarptığında oluşturmalıyız. Minik bir ipucu, yapacağımız değişiklik ball.style.left değeri üzerinde olmalı. Çözemezseniz aşağıdaki kodu inceleyebilirsiniz.

// top sağ ve sol çubuklara çarparsa, Y ekseninde geri seksin

if(parseInt(ball.style.left) <= 0 + 16 && parseInt(ball.style.top) >= parseInt(stickLeft.style.top) && parseInt(ball.style.top) <= parseInt(stickLeft.style.top) + 85){

  ballLeft *= -1;

}else if(parseInt(ball.style.left) + 16 >= window.innerWidth - 12 && parseInt(ball.style.top) >= parseInt(stickRight.style.top) && parseInt(ball.style.top) <= parseInt(stickRight.style.top) + 85){

  ballLeft *= -1;  

}