HTML, CSS ve Java Script ile Hareket Ettirilebilen Nesne Yapımı

Herkese merhaba. Bugün size, fare imleciyle nesneleri hareket ettirme konusunda bildiklerimi aktaracağım. Tabii anlattıklarımı anlayabilmeniz için temel seviye HTML, CSS ve JS özelliklerine hakim olmanız gerekiyor. Başlayalım.

1. Adım:

Öncelikle 'moving object' adında yeni bir klasör açıp içerisine 'main.html', 'style.css' ve 'script.js' isminde dosyalar oluşturalım. Sonrasında kodlamaya HTML dosyamızdan başlayabiliriz.

2. Adım:

HTML dosyamızın içine, ana iskeleti yerleştirdikten hemen sonra 'body' etiketleri arasında, id'si 'container' ve 'object' olan iç içe iki 'div' tanımladım. Bunlardan biri bizim belirlediğimiz, nesnenin hareket edebileceği alanları kapsayacakken; bir diğeri nesnemizin ta kendisi olacak.

3. Adım:

Henüz sayfamızda hiçbir şey görünmüyor. Şimdiyse, tanımladığımız 'div'lerin görünmesini sağlayacak stil özelliklerini kodlayacağız. Tabi bunu yapabilmek için ilk önce, html dosyamızı 'style.css' dosyamızın varlığından haberdar etmeliyiz. Bunu yaptıktan sonra tanımlamalarımıza geçebiliriz.

'style.css' dosyasında, id'ye sahip nesnelerin her biri için (container ve object) yükseklik ve en, arka plan rengi ve pozisyon özelliklerini tanımladım.

4. Adım:

Şimdi sıra, etkileşim kodlarımızı yazmadan hemen önce 'script.js'i 'main.html'e tanıtmaya geldi.

Ayrıca buraya, hareket özelliğini tanımlayabilmek için ihtiyaç duyduğumuz birkaç niteliği de eklemeliyiz. Birincisi; fare, oluşturduğumuz kutu içerisinde her hareket ettiğinde, script.js'deki 'getMoving' fonsiyonuna, imlecin konumunu döndürmesi. Diğeriyse; hareket eylemini objeyi tuttuğumuzda aktifleştirip, bıraktığımızda deaktive edebilmesi için, yine script.js' içindeki 'canValue' fonsiyonuna durum değerlerini göndermesi.

Son olarak 'script.js'de, bahsettiğimiz bu fonksiyonları oluşturup içeriklerini kodlamalıyız. 'canValue'a gelen değer, eğen fare objeye basılıyla 'true', değilse 'false' olacaktır. Bu sebeple tek yapmamız gereken, gelen değeri 'movable' değişkenine atamak.

getMoving fonsiyonuna gelen konum değeriyse, imlecin objenin üzerine geldiği ve hareketliliği aktif ettiği zamanda devreye girecek. Eğer fare objeyi bırakırsa, işlev çalışmayacaktır.

İmlecin elde edilen konumu, kutu içeriğinin sol ve üst kısmına uzaklığıyla tanımlanabilir. 'object' nesnesini, kendisinin left ve top değerlerini bu verilerle (pixel cinsinde) güncelleyerek imlecin bulunduğu konuma getirebiliriz.

Bu da sonuç;