JavaScriptte koordinat kullanarak buton yakalama oyunu oluşturacağız. Fare ile üzerine gelindiğinde yerini değiştirmesini sağlayan ve yakalandığında ekrana uyarı verecek şekilde iki ayrı fonksiyon oluşturacağız. Daha sonrasında sayaç koyup kaç seferde yakalandığını hesaplayacağız.
|
1 2 3 |
<button id="nesne"></button> |
HTML: Öncelikle yakalamaya çalışacağımız butonu oluşturuyoruz ve id veriyoruz.
|
1 2 3 |
var nesne=document.getElementById("nesne"); |
JavaScript: Oluşturduğumuz butonun “id” si ile butonu bir nesne haline getirip değişken içerisine atıyoruz.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
nesne.onmouseover=function(e) { var xpos=parseInt(Math.random()*1000); var ypos=parseInt(Math.random()*800); nesne.style.left=xpos +"px"; nesne.style.top =ypos+"px"; nesne.style.width=this.clientWidth+10+"px"; nesne.style.height=this.clientHeight+10+"px"; } |
Nesneye “.onmouseover” (yani fare üzerine geldiğinde) olayını atıyoruz ve fonksiyon oluşturuyoruz. Fonksiyon içerisinde “xpos” ve “ypos” olarak iki ayrı değişken tanımladık. “xpos” x eksenini, “ypos” ise y eksenini karşılıyor. Kutuyu yakalarken bir yerlerde rastgele belireceği için “Math.random” kullanıyoruz ve ekran genişliğine/yüksekliğine göre aralık belirliyoruz. Burada genişliği 0-1000, yüksekliği 0-800 olarak ayarladık. “parseInt” ile de ondalık kısımlar kurtulduk.
Daha sonra nesneye x ve y eksenlerini atıyoruz. Soldan ve yukarıdan ayarladık ama sağdan ve aşağıdan da ayarlanabilir. Lakin sağdan ve soldan ayarlarsak bu sefer garip bir görüntüyle karşılaşırız.
Bu fonksiyonun içerisindeki son işlemler ise buton yakalanamadığında genişlik ve yükseklik değerlerinin her seferinde 10px artması. Bunları “this” ile yapıyoruz. “this” aktif olan nesneye müdahale etmek için kullanılıyor. “clientWidth” ve “clientHeight” ifadeleri ise neye müdahale ettiğimizi gösteriyor.
|
1 2 3 4 5 6 7 8 |
nesne.onclick=function() { window.alert(sayac+" Seferde Yakalandı"); nesne.style.width="100px"; nesne.style.height="100px"; } |
İkinci fonksiyonda ise buton yakalandığında işlenecek kodları yazıyoruz. Ekrana “window.alert” ile uyarı verdiriyoruz ve genişlik/yükseklik değerlerinin eski haline gelmesini sağlıyoruz.
|
1 2 3 4 5 6 7 8 9 |
#nesne { width: 100px; height: 100px; position:absolute; background:#36A4FF; } |
CSS: Nesnenin sayfa üzerinde bağımsız hareket edebilmesi için “position:absolute” olması zorunludur. Yoksa buton hareket edemez. Yükseklik/genişlik değerlerini ayarlıyoruz ve arka plan rengi ekliyoruz.
Son olarak kaç seferde yakaladığımızı hesaplamak için ilk fonksiyondan önce bir sayaç tanımlıyoruz. İçinde tanımlamamızın nedeni kutu her kaçırdığımızda sayaç tekrar tanımlanacak ve her seferinde değer sıfır olacak.
Kodları toparlayacak ve sayacı ekleyecek olursak son hali şöyle olacaktır;
|
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 |
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Buton Yakalama Oyunu</title> <style> #nesne{ width: 100px; height: 100px; position:absolute; background:#36A4FF; } </style> </head> <body> <button id="nesne"></button> <script> var sayac=0; var nesne=document.getElementById("nesne"); nesne.onmouseover=function(e) { sayac++; var xpos=parseInt(Math.random()*1000); var ypos=parseInt(Math.random()*800); nesne.style.left=xpos +"px"; nesne.style.top =ypos+"px"; nesne.style.width=this.clientWidth+10+"px"; nesne.style.height=this.clientHeight+10+"px"; } nesne.onclick=function() { window.alert(sayac+" Seferde Yakalandı"); nesne.style.width="100px"; nesne.style.height="100px"; sayac=0; } </script> </body> </html> |
Teşekkür ederim. Aradığım örnekti. Açıklayıcı ve güzel olmuş.