jQuery ile Klavye Hareketi Sağlama

jQuery’nin bu kadar kapsamlı bir kütüphane olduğunu bilmiyordum. Baktıkça daha iyi bir kütüphane olduğunu anlamaya başladım. Yapı olarak çok kuvetli. Şuanda yaptığım uygulama kare hareketini sağlamak oldu. Bunu yaparken dökümana klavye ile sağ sol tuşuyla bastığında hareket etmesini sağlıyorum. Aşağıdaki yapıda yaptığım olay ise code adında bir değişken oluşturuyorum ve bununla x y koordinat bilgilerini ayarlıyorum.Sonuna string birleştirme ile birleştirip sağ sola hareket etmesini sağlıyorum.

offset() değeri

Bir elamanın konumunu yani ekranda sola ve yukarıya olan uzaklığını bulmak için kullanılır.

Not: Her tarayıcının kendine göre margin padding değerleri olduğu için ilk olarak css ‘de margin ve padding değerlerini sıfırlamak gerekiyor. Daha sonra bu kodları denerseniz offset() da daha iyi performans sağlarsınız.

$(function(){

	var xPos = $('#kare').offset().left;
	var yPos = $('#kare').offset().top;

$(document).keydown(function(event)
{
	var code = (event.which) ? event.which : event.keyCode;

	if(code == 37)
	{
		xPos-=5;
		$("#kare").css("left", xPos+"px");
	}
	if(code == 38)
	{
		yPos-=5;
		$("#kare").css("top", yPos+"px");
	}
	if(code == 39)
	{
		xPos+=5;
		$("#kare").css("left", xPos+"px");
	}
	if(code == 40)
	{
		yPos+=5;
		$("#kare").css("top", yPos+"px");
	}
	});
})

---