Javascript ile keypress olay kontrolü ile ekranki div etiketini yön tuşları ile istediğimiz yöne hareket ettiren program kodu;
Klavye kontrollerinin çalışmasını anlatmadan önce css ile nesnenin hareket edebilmesi için position özelliğinin absolute yapıldığına dikkat edin.
Örnek üç temel parçadan oluşmaktadır.
1.kısım nesnenin css kodu
2.kısım nesnemizin tanımlanması.(javascript kodunu sayfanın sonuna eklediğinizden emin olun)
3. javascript kodumuz.
Klavyedeki yön tuşlarının kod değeri
Sol Top Kodu:37
Ust Top Kodu:38
Sağ Top Kodu:39
Alt Top Kodu:40
window nesnesi üzerinde her hangi bir tuşa basıldığında çalışacak kodu window.onkeypress olayına anonim bir fonksiyon ile bağlayıp. Tuş kontrollerini bu fonksiyon içinde şartlar ile kontrol ediyoruz.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 |
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Klavye Olayları</title> <style> #kutu{ position:absolute; left:200px; top:200px; width:200px; height:200px; background:black; } </style> </head> <body> <div id="kutu"></div> <script> /* kutu nesnesinin x ve y değerlerini okutuyoruz.*/ var kutu=document.getElementById("kutu"); /*window.onkeydown tarayıcı açıkken her hangi bir tuşa basıldığında olaya iliştirilen anonim metod tetiklenecek.*/ window.onkeydown=function(olay){ /* offsetLeft nesnenin sol kenardan ne kadar uzak olduğunu offsetTop nesnenin üstten kenardan ne kadar uzak olduğunu gösterir*/ var y=kutu.offsetTop, x=kutu.offsetLeft; //Sol Top Kodu:37 Ust Top Kodu:38 Sağ Top Kodu:39 Alt Top Kodu:40*/ /*hangi tuşa basıldığını kontrol edip, nesnenin yerini css ile kaydırıyoruz. yukarıdaki x ve y değerleri ile*/ if(olay.keyCode==37) { kutu.style.left=(x-5)+"px"; } else if(olay.keyCode==38) { kutu.style.top=(y-5)+"px"; } else if(olay.keyCode==39) { kutu.style.left=(x+5)+"px"; } else if(olay.keyCode==40) { kutu.style.top=(y+5)+"px"; } } </script> </body> </html> |
