JavaScript ile Fareyi (Mouse) Takip Eden Nesne Örneği

Şüphesiz ki JavaScript'in gücü gittikçe artmaktadır. Çeşitli yerlerde kullanım alanı göstermekte olduğunu görüyoruz. Gün geçtikçe artan bu öneme kayıtsız kalmamak adına arada sıra küçük uygulamalar ile makale yayınlıyorum.
Bu makalemizde etkileşimli JavaScript örneği işleyeceğiz. Eskiden Flash ile yapılan ilk örneklerin vazgeçilmezi olan "Mouse Takip Eden Nesne" örneğinin benzerini JavaScript dilinde yapacağız.
Küçük bir arayüz hazırlayalım.
HTML Betikleri

<div class="kapsul">
    <div class="gezgin"></div>
</div>

Arayüzü hazırladık, şimdi ise bunu CSS ile renklendirelim.
CSS Betikleri

.kapsul{width:400px;height:300px;position:relative;background:#ddd;margin:20px auto;}
.gezgin{width:20px;height:20px;background:red;position:absolute;left:0;top:0;border-radius:50%;}

Oluşan Arayüz

Yaptığımız arayüzü CSS ile renklendirdikten sonra mouse ile her hareketi yakalayıp kapsul içindeki nesneyi (gezgin) mouse'ın koordinatlarına göre hareket etmesini sağlayalım.
JavaScript Betikleri

let gezgin = document.querySelector('.gezgin'); //class="gezgin" olan div'i seçiyoruz.
let kapsul = document.querySelector(".kapsul");  //class="kapsul" olan div'i seçiyoruz.
kapsul.addEventListener("mousemove", function(event) //kapsul olan div'e olay dinleyici ataması yapıyoruz. Böylece bunun üzerindeki "hareket, tıklama, çift tıklama vs.." gibi olayları yakalayabileceğiz. Bu olayda "mousemove" ile mouse hareket ettikçe dinleme yapıyoruz.
  { 
    let alan = kapsul.getBoundingClientRect(); //kapsul nesnesini tüm nesneler içinde sınırlanmış alan olarak belirtiyoruz. Diğer bir değişle ekranın tümüyle değil de sadece bu alanıyla işlem yapacağımızı belirtiyoruz.
    let dblMouseX = event.clientX - alan.left; //Mouse'ın bu alan içindeki x-eksenindeki değerini alıyoruz.
    let dblMouseY = event.clientY - alan.top;  //Mouse'ın bu alan içindeki y-eksenindeki değerini alıyoruz.
    let dblGezginX = gezgin.offsetLeft; //Gezgin adlı nesnenin x-eksenindeki değerini alıyoruz.
    let dblGezginY = gezgin.offsetTop; //Gezgin adlı nesnenin y-eksenindeki değerini alıyoruz.
    let dblFarkX = dblMouseX - dblGezginX; //Mouse ilerledi, gezgin geride kaldı. İki nesnenin x-ekseni koordinat farkını alıyoruz.
    let dblFarkY = dblMouseY - dblGezginY; //Mouse ilerledi, gezgin geride kaldı. İki nesnenin y-ekseni koordinat farkını alıyoruz.
    let dblKatsayi = 0.08; // Gezgin ile Mouse arasındaki fark hemen kapanmasın diye yani yavaşça ilerlesin diye hızını bu katsayı ile çarpacağız.
    gezgin.style.left = (dblGezginX + (dblFarkX * dblKatsayi)) + "px"; // Gezgin x-ekseni üzerinde 7'de olsun. Mouse ise 25'de olsun. Gezgin Mouse'ın yanına gitmek için (7 + ((25-7) * 0.08)) = 8.44 birim kadar ilerlemeli.
    gezgin.style.top = (dblGezginY + (dblFarkY * dblKatsayi)) + "px"; // Gezgin y-ekseni üzerinde 3'de olsun. Mouse ise 19'da olsun. Gezgin Mouse'ın yanına gitmek için (3 + ((19-3) * 0.08)) = 4.28 birim kadar ilerlemeli.
  }
);