Bu yazımızda javascript ile web sayfalarımızın stil özelliklerine nasıl müdahale edebileceğimize kısaca değineceğiz. Bu yapıları, web tasarım uygulamalarınızda küçük animasyonlar yapmak veya herhangi bir nesnenin stil özelliklerini değiştirmek için kullanabilirsiniz.
Tabii ki bu konu, değineceğimiz kadar az özellikler içermiyor. Amacım, sadece konu hakkında küçük de olsa fikir sahibi olmanızı sağlamak...
Aşağıdaki animasyonda butonlarla oku aşağı-yukarı hareket ettirip, karşıdaki kızın başındaki elmayı vurmaya çalışıyoruz, Oku fırlat butonuyla oku fırlatıyoruz, Oyuna Başlat butonuyla da oyunu başlatıyoruz ve oku başa alıyoruz, bu butona basılmadıkça bu arada hedefimizin pozisyonu da her 5 saniyede bir değişiyor, okun hedef üzerindeki konumuna görede bir uyarı mesajı alıyoruz.
Dikkat edilmesi gereken önemli bir konu da, alanın ve okun css olarak pozisyon değerleridir (position), herhangi bir nesneye animasyon uygulayabilmek için pozisyon değerinin "relative" veya "absolute" olması gerekir, ben alanın ve hedefin değerini relative, okun değerini ise "absolute" olarak belirledim.
Form, katman ve buton gösterimi:
<div id="area" style="position:relative; width:600px; height:200px; border-bottom:1px solid green;border-top:1px solid green;margin-bottom:5px;">
<div id="arrow" style="position:absolute;top:90px;left:10px;" ><img src="demo/images/arrow.png" width="79" height="22" alt="" title="" /></div>
<div id="target" style="position:relative;top:20px;float:right;width:20px;margin-right:30px;"><img src="demo/images/girl.png" width="31" height="100" alt="" title="" /></div>
</div>
<form>
<input type="button" value="Oyunu Başlat" onclick="startGame();" />
<input type="button" value="Oku Fırlat" onclick="throwArrow();" /><br />
<input type="button" value="Yukarı" onclick="move('up');" /><br />
<input type="button" value="Aşağı" onclick="move('down');" />
</form>
Okun "id" değeri: "arrow", hedefin "id" değeri: "target", bu değerleri kullanarak HTML Dom yöntemiyle değerleri alacak ve yeni değerler vereceğiz.
Şimdi sırayla fonsiyonlarımızı inceleyelim
Aşağı ve yukarı butonları "onclick" olayıyla, "move()" fonksiyonunu çağırıyor parametre olarak da 'up' ve 'down' değerlerini gönderiyor Ör:onclick="move('up')"
move() fonksiyonu:
<script type="text/javascript">
function move(dir) {
if(startOk==1){
var arrowLayer = document.getElementById("arrow");
currentTop=parseInt(arrowLayer.style.top);
switch(dir) {
case "up":
if(currentTop > 5){
arrowLayer.style.top =(currentTop-5)+"px";
}
break;
case "down":
if(currentTop < 195){
arrowLayer.style.top = (currentTop+5)+"px";
}
break;
}
}
}
</ script>
Açıklamalar:
- 3. If kontrolüyle, startGame() ve stopGame() fonksiyonunda belirlediğimiz "startOk" değişkeninin değerini kontrol edip oyunun başlayıp başlamadığını kontrol ediyoruz, oyun başlamadıysa butonlar çalışmaz.
- 4. Sonraki kullanımlarımızda uzun uzun yazmayalım diye, "ID" değeri "arrow" olan nesneyi seçip bir değişkene aktarıyoruz.
- 5. Geçerli top (style) değerini alıyoruz
- 7. Move() fonksiyonundaki parametreye göre işlemlerimizi yapıyoruz
- 9., 14. Buralardaki "if" kontrol mekanizması, okun sınırlarımız dışına çıkmasını engellemek için
- 10.,15. Buralarda "arrow" id nesnesinin yeni top değerini belirliyoruz
Oku Fırlat butonu "throwArrow()" fonksiyonunu çağırıyor, parametre olarak mesafe değeri girilip daha da çeşitlendirilebilir.
throwArrow() fonksiyonu:
<script type="text/javascript">
function throwArrow() {
if(startOk==1){
var arrowLayer = document.getElementById("arrow");
arrowLayer.style.left = 510+"px";
deadAlive();
}
}
</script>
Açıklamalar:
- 3. If kontrolüyle, startGame() ve stopGame() fonksiyonunda belirlediğimiz "startOk" değişkeninin değerini kontrol edip oyunun başlayıp başlamadığını kontrol ediyoruz, oyun başlamadıysa butonlar çalışmaz.
- 5. Çok basit anlamda "arrow" ID'li nesnenin değerini 510 olarak belirliyor, bu değer hedefe olan uzaklığımız
- 6. Sonunda da deadAlive() fonsiyonunu çağırıyor, nbu fonksiyonla oun ve hedefin top değerlerine göre hedefi vurup vurmadığını kontrol ediyoruz:
Çok basit anlamda "arrow" ID'li nesnenin değerini 510 olarak belirliyor, bu değer hedefe olan uzaklığımız
deadAlive() fonksiyonu:
function deadAlive(){
var arrow = parseInt(document.getElementById("arrow").style.top);
var girl = parseInt(document.getElementById("target").style.top);
var difference = arrow-girl;
if(difference < 3 && difference > -8 ){
alert("Tam isabet");
stopGame();
}else if(difference < -9 || difference > 90 ){
alert("Iskaladınız");
stopGame();
}else{
alert("Geçmişler olsun!!! ");
stopGame();
}
}
</script>
Açıklamalar:
- 4. Ok ve hedef nesnelerinin "top" değerleri alınıyor, ve farkı hesaplanıyor
- 6. Fark değerinin durumuna göre sorgulama yapılıp uygun mesaj gösteriliyor
- 8.,11.,14. stopGame() fonksiyonu ile oyunu durduruyoruz.
Oyunu Başlat butonu "startGame()" fonksiyonunu çağırıyor
startGame() fonksiyonu:
function startGame(){
startOk=1;
document.getElementById("target").style.top=randomValue(5,100)+"px";
changeLoc=setInterval("setReset()",5000);
}
</script>
Açıklamalar:
- 2. Oyunun başladığını belirtmek için "startOk" değişkenine 1 değerini atıyoruz
- 3. Hedefin konumunu değiştiriyoruz
- 4. "changeLoc" değişkenine, "setInterval" fonksiyonuna atayıp, "setReset()"fonksiyonunu "5" saniyede bir çağırmasını istiyoruz
setReset() fonksiyonu:
<script type="text/javascript">
function setReset(){
document.getElementById("arrow").style.left=10+"px";
document.getElementById("target").style.top=randomFromInterval(5,100)+"px";
}
</script>
Açıklamalar:
- 3. "arrow" ID değerli okumuzu eski konumuna getiriyor.
- 4. "target" ID değerli hedefimizin top değeri olarak, rastgele (random) sayı üreten fonskiyonumuzdan (randomValue(5,100)) gelen değeri atıyor.
stopGame() fonksiyonu:
<script type="text/javascript">
function stopGame(){
changeLoc=window.clearInterval(changeLoc);
document.getElementById("arrow").style.left=10+"px";
startOk=0;
}
</script>
Açıklamalar:
- 3. "setInterval" metodunu atadığımız "changeLoc"değişkenini "clearInterval" ile sonlandırıp,
- 4. Oku eski pozisyonuna getiriyoruz
- 5. "startOk" değişkenine sıfır atayıp oyunun sonlandırıldığını belirtiyoruz ki artık düğmeler çalışmaz duruma gelsin...
randomValue() fonksiyonu:
<script type="text/javascript">
function randomValue(start,finish)
{
return Math.floor(Math.random()*(finish-start+1)+start);
}
</script>
5-100 arası bir değer üretiyor.
Tüm fonksiyonlar bir arada:
<script type="text/javascript">
function startGame(){
startOk=1;
document.getElementById("target").style.top=randomValue(5,100)+"px";
changeLoc=setInterval("setReset()",5000);
}
function move(dir) {
if(startOk==1){
var arrowLayer = document.getElementById("arrow");
currentTop=parseInt(arrowLayer.style.top);
switch(dir) {
case "up":
if(currentTop > 5){
arrowLayer.style.top =(currentTop-5)+"px";
}
break;
case "down":
if(currentTop < 195){
arrowLayer.style.top = (currentTop+5)+"px";
}
break;
}
}
}
function throwArrow() {
if(startOk==1){
var arrowLayer = document.getElementById("arrow");
arrowLayer.style.left = 510+"px";
deadAlive();
}
}
function deadAlive(){
var arrow = parseInt(document.getElementById("arrow").style.top);
var girl = parseInt(document.getElementById("target").style.top);
var difference = arrow-girl;
if(difference < 3 && difference > -8 ){
alert("Tam isabet");
stopGame();
}else if(difference < -9 || difference > 90 ){
alert("Iskaladınız");
stopGame();
}else{
alert("Geçmişler olsun!!! ");
stopGame();
}
}
function stopGame(){
changeLoc=window.clearInterval(changeLoc);
document.getElementById("arrow").style.left=10+"px";
startOk=0;
}
function setReset(){
document.getElementById("arrow").style.left=10+"px";
document.getElementById("target").style.top=randomValue(5,100)+"px";
}
function randomValue(start,finish)
{
return Math.floor(Math.random()*(finish-start+1)+start);
}
</script>
Bu örneğimizde web tasarım uygulamalarımızda javascript'in stil özelliklerine müdahale gücüne değindik, javascript ile stil özelliklerinin hemen hemen hepsine müdahale edebilirsiniz.
Kolay gelsin, görüşmek üzere...
