Javascript İle Oyun Yapımı: Nesnelerin Kontrolü - Top

main.js

// stick değişkenleri
var stickLeft = document.getElementById('stickLeft');
var stickRight = document.getElementById('stickRight');
// ball değişkenleri
var ball = document.getElementById('ball');

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

var ballTop = -2; // -2
var ballLeft = 2; // -2
var gameSpeed = 20;

function pxAdd(numb){
	return numb + 'px';
}

// oyuncuların yönlendireceği çubuklar
document.onkeydown = function(e){
	switch(e.keyCode){
		// sol çubuk
		case 87:
			if(parseInt(stickLeft.style.top) <= 0){
				stickLeft.style.top = stickLeft.style.top;
			}else{
				stickLeft.style.top = pxAdd(parseInt(stickLeft.style.top) - 30);
			}
			break;
		case 83:
			if(parseInt(stickLeft.style.top) + 85 >= window.innerHeight){
				stickLeft.style.top = stickLeft.style.top;
			}else{
				stickLeft.style.top = pxAdd(parseInt(stickLeft.style.top) + 30);
			}
			break;
		case 38:
			if(parseInt(stickRight.style.top) <= 0){
				stickRight.style.top = stickRight.style.top;
			}else{
				stickRight.style.top = pxAdd(parseInt(stickRight.style.top) - 30);
			}
			break;
		case 40:
			if(parseInt(stickRight.style.top) + 85 >= window.innerHeight){
				stickRight.style.top = stickRight.style.top;
			}else{
				stickRight.style.top = pxAdd(parseInt(stickRight.style.top) + 30);
			}
			break;
		default: 
	}
}


// oyunun sürekli devam etmesi için gerekli yapı
function gameLoop(){
	// topun alacağı değerler
	ball.style.top = pxAdd(parseInt(ball.style.top) + ballTop);
 	ball.style.left = pxAdd(parseInt(ball.style.left) + ballLeft);
 	
 	// top üst ve alt bloklara çarparsa, X ekseninde geri seksin
	if(parseInt(ball.style.top) <= 0 || parseInt(ball.style.top) + 16 >= window.innerHeight){
		ballTop *= -1;
	}

	// 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;		
	}
}

setInterval(gameLoop, 10);