JavaScript İle Bir Nesneyi(Kutuyu) Hareket Ettirme

« Shakira ft. Maluma – Chantaje Piyano Notaları

Herkese merhabalar arkadaşlar bu yazımızda sizlere javascript ile bir nesneyi(kutuyu) hareket ettirmeyi anlatacağız.Umarız faydalı olur.

Son zamanların yükselen yazılım dili olan javascript web site geliştirmede kullanılan en önemli dildir diyebiliriz.Çünkü javascript ile web sitelere bir çok yenilik geldi.Örneğin bir sitede haber geçişi yaparken mouse ile tutup sağa veya sola kaydırmayı javascript sayesinde yapıyoruz.Bu ve bunun gibi bir çok yenilik javascript sayesinde mümkün olmaktadır.

Şimdi sizlere javascript ile bir nesneyi hareket ettirmeyi anlatacağız.Biz burada nesne olarak kutu kullandık.Sizler istediğiniz nesne yapabilirsiniz.

Öncelikle kutuyu css ile yapıyoruz.Kutunun css kodlarına aşağıdan ulaşabilirsiniz.

Kutumuzun CSS Kodları

#kutu {
position: absolute;
width: 200px; //Kutunun boyutları
height: 200px;
background-color: red; //Biz kutuyu kırmızı renk yaptık siz rengini buradan değiştirebilirsiniz.
margin-top: 150px; //Kutunun sayfa üzerindeki konumu
margin-left:600px;
margin-bottom:150px;
border-radius:15px; }

#kutu {

position: absolute;

width: 200px; //Kutunun boyutları

height: 200px;

background-color: red; //Biz kutuyu kırmızı renk yaptık siz rengini buradan değiştirebilirsiniz.

margin-top: 150px; //Kutunun sayfa üzerindeki konumu

margin-left:600px;

margin-bottom:150px;

border-radius:15px; }

Şimdi kutumuzu yaptıktan sonra javascript kodlarına geçelim.Javascript ile kutumuzu klavyemizden yön tuşlarını kullanarak hareket ettireceğiz.Yön tuşlarının ve diğer klavye tuşlarının key kodlarını buradaki yazımızda paylaşmıştık.Şimdi java script kodlarımızı paylaşalım ve detaylı anlatımlarını kodların yanında yapalım.

JavaScript Kodları

<script type="text/javascript">
var x=1; //Öncelikle javascript için var kodu ile değerlerimizi tanımladık
var myLeft;
var myTop;
var myRight;
var $element=$('#kutu'); //Burada css kutu ifadesini çağırdık
var basma;
var cekme;
var count =0;
var saniye =0;
function sol2 () { //Öncelikle klavyemizden sol yön tuşuna bastığımızda olan işlemler için fonksiyon oluşturduk ve adına sol2 verdik.
var myLeft= $('#kutu').css('margin-left'); //Burada kutumuzun css konumunu js'ye çağırdık.
myLeft = myLeft.substring(0, myLeft.length -2); //Burada sola gelince kutunun css konumu da değişiyor.
console.log(myLeft);
myLeft--;
$('#kutu').css('margin-left',myLeft); //Ardından kutu css değerini elementimize atadık.
bekleme(); //Burada ise bekleme fonksiyonunu çağırdık çünkü eğer 2 saniye boyunca kutumuzu hareket ettirmezsek sayfa bize uyarı verecek.
}
function sag2 () { //Diğer fonksiyonlar da aynı mantıkla çalıştığından açıklama yazmaya gerek olmadığını düşündük.
myLeft= $('#kutu').css('margin-left');
myLeft = myLeft.substring(0, myLeft.length -2);
console.log(myLeft);
myLeft++;
$('#kutu').css('margin-left',myLeft);
bekleme();
}
function yukari2 () { //Burası yukarı yön tuşu için yapılmış fonksiyon.
var myTop= $('#kutu').css('margin-top');
myTop = myTop.substring( 0, myTop.length - 2);
console.log(myTop);
myTop--;
$('#kutu').css('margin-top',myTop);
bekleme();
}
function asagi2 () { //Burası da aşağı yön tuşu için yapılmış fonksiyon.
myTop= $('#kutu').css('margin-top');
myTop = myTop.substring( 0, myTop.length - 2);
console.log(myTop);
myTop++;
$('#kutu').css('margin-top',myTop);
bekleme();
}
var timer = 0; //Zamanı sıfırlıyoruz.
window.onkeydown=function(klavye){ //Şimdi klavyemizden bastığımız yön tuşlarını javascript key kodları olarak tanımlıyoruz.
if(klavye.keyCode==37) //37 javascriptte sol yön tuşuna denktir.
{
 bekleme(); //Bekleme fonksiyonunu çağırıyoruz.
sol();
 return true;
}
else if(klavye.keyCode==38) //38 javascriptte yukarı yön tuşuna denktir.
{
 bekleme();
yukari();
 return true; //Fonksiyonu sonlandırıyoruz.
}
else if(klavye.keyCode==39) //39 javascriptte sağ yön tuşuna denktir.
{
 bekleme();
sag();
 timer = 0;
 return true;
}
else if(klavye.keyCode==40){ //40 javascriptte aşağı yön tuşuna denktir.
 bekleme();
asagi();
timer = 0;
return true;
}
else{
return false;
}}
window.onkeyup=function(klavye){
 cekme=true;
 count =0; //Saymayı sıfırlıyor.
}
pasif = window.setTimeout(function(){document.getElementById("kutu").style.opacity = "0.5";}, 2000); //Burada ise kutumuzun ovallik değerini değiştiriyoruz.Burada eğer kutumuzu 2 saniye boyunca hareket ettirmezsek yani klavyemizden 2 saniye bir tuşa basmazsak kutumuz saydamlaşıyor.
alarm=window.setTimeout(function(){alert("Oradamisiniz???");}, 2000); //Ve ekrana oradamısınız diye bir uyarı veriyor.
function bekleme()
{ document.getElementById("kutu").style.opacity = "1";
clearTimeout(pasif);
clearTimeout(alarm);
pasif = window.setTimeout(function(){document.getElementById("kutu").style.opacity = "0.5";}, 2000);alarm=window.setTimeout(function(){alert("Oradamisiniz???");}, 2000);&nbsp;}&nbsp;bekleme();
</script>

var x=1; //Öncelikle javascript için var kodu ile değerlerimizi tanımladık

var myLeft;

var myTop;

var myRight;

var $element=$('#kutu'); //Burada css kutu ifadesini çağırdık

var basma;

var cekme;

var count =0;

var saniye =0;

function sol2 () { //Öncelikle klavyemizden sol yön tuşuna bastığımızda olan işlemler için fonksiyon oluşturduk ve adına sol2 verdik.

var myLeft= $('#kutu').css('margin-left'); //Burada kutumuzun css konumunu js'ye çağırdık.

myLeft = myLeft.substring(0, myLeft.length -2); //Burada sola gelince kutunun css konumu da değişiyor.

console.log(myLeft);

myLeft--;

$('#kutu').css('margin-left',myLeft); //Ardından kutu css değerini elementimize atadık.

bekleme(); //Burada ise bekleme fonksiyonunu çağırdık çünkü eğer 2 saniye boyunca kutumuzu hareket ettirmezsek sayfa bize uyarı verecek.

}

function sag2 () { //Diğer fonksiyonlar da aynı mantıkla çalıştığından açıklama yazmaya gerek olmadığını düşündük.

myLeft= $('#kutu').css('margin-left');

myLeft = myLeft.substring(0, myLeft.length -2);

console.log(myLeft);

myLeft++;

$('#kutu').css('margin-left',myLeft);

bekleme();

}

function yukari2 () { //Burası yukarı yön tuşu için yapılmış fonksiyon.

var myTop= $('#kutu').css('margin-top');

myTop = myTop.substring( 0, myTop.length - 2);

console.log(myTop);

myTop--;

$('#kutu').css('margin-top',myTop);

bekleme();

}

function asagi2 () { //Burası da aşağı yön tuşu için yapılmış fonksiyon.

myTop= $('#kutu').css('margin-top');

myTop = myTop.substring( 0, myTop.length - 2);

console.log(myTop);

myTop++;

$('#kutu').css('margin-top',myTop);

bekleme();

}

var timer = 0; //Zamanı sıfırlıyoruz.

window.onkeydown=function(klavye){ //Şimdi klavyemizden bastığımız yön tuşlarını javascript key kodları olarak tanımlıyoruz.

if(klavye.keyCode==37) //37 javascriptte sol yön tuşuna denktir.

{

bekleme(); //Bekleme fonksiyonunu çağırıyoruz.

sol();

return true;

}

else if(klavye.keyCode==38) //38 javascriptte yukarı yön tuşuna denktir.

{

bekleme();

yukari();

return true; //Fonksiyonu sonlandırıyoruz.

}

else if(klavye.keyCode==39) //39 javascriptte sağ yön tuşuna denktir.

{

bekleme();

sag();

timer = 0;

return true;

}

else if(klavye.keyCode==40){ //40 javascriptte aşağı yön tuşuna denktir.

bekleme();

asagi();

timer = 0;

return true;

}

else{

return false;

}}

window.onkeyup=function(klavye){

cekme=true;

count =0; //Saymayı sıfırlıyor.

}

pasif = window.setTimeout(function(){document.getElementById("kutu").style.opacity = "0.5";}, 2000); //Burada ise kutumuzun ovallik değerini değiştiriyoruz.Burada eğer kutumuzu 2 saniye boyunca hareket ettirmezsek yani klavyemizden 2 saniye bir tuşa basmazsak kutumuz saydamlaşıyor.

alarm=window.setTimeout(function(){alert("Oradamisiniz???");}, 2000); //Ve ekrana oradamısınız diye bir uyarı veriyor.

function bekleme()

{ document.getElementById("kutu").style.opacity = "1";

clearTimeout(pasif);

clearTimeout(alarm);

pasif = window.setTimeout(function(){document.getElementById("kutu").style.opacity = "0.5";}, 2000);alarm=window.setTimeout(function(){alert("Oradamisiniz???");}, 2000); } bekleme();

</script>

Javascript kodlarımız da bu şekildedir.Bu kodları html kodlarında <body> ve </body> kodlarının arasına koymanız gerekmektedir.Şimdi de html kodlarını paylaşalım.

HTML Kodları

<html>
<head>
<title>Javascript ile kutuyu hareket ettirme</title>
<link type="text/css" rel="stylesheet" href="css.css" />
<script src="jquery-3.1.1.min.js"></script>
</head>
<body>
<div id="kutu">
</div>
<div id="buton">
<a id="buton2" href="javascript:void(0);" onclick="sol2();" > <img width="50" height="50" src="solaok.jpg" /</a>
<a id="buton2" href="javascript:void(0);" onclick="yukari2();" > <img width="50" height="50" src="yukariok.jpg" /></a>
<a id="buton2" href="javascript:void(0);" onclick="asagi2();" > <img width="50" height="50" src="asagiok.jpg"/ </a>
<a id="buton2" href="javascript:void(0);" onclick="sag2();" > <img width="50" height="50" src="sagaok.jpg" /></a>
</div>
</body>
</html>

<html>

<head>

<title>Javascript ile kutuyu hareket ettirme</title>

</head>

<body>

</div>

</div>

</body>

</html>

Evet arkadaşlar html kısmı da bu şekildedir.Kutuyu 2 türlü hareket ettirebilirsiniz.İster klavyeden yön tuşlarına basarak isterseniz de ekranda gözüken yön tuşlarına basarak kutuyu hareket ettirebilirsiniz.

Kodlarımızın Ekran Görüntüsü

Buradaki linkten kodları canlı olarak çalıştırabilirsiniz.Ekranda gördüğünüz gibi yön tuşu resimlerine basarak da kutuyu hareket ettirebilirsiniz.Aynı zamanda klavyeden basarak da hareket ettirebilirsiniz.Ek olarak klavyeden yön tuşlarına basılı tuttuğunuzda hangi yöne basarsanız o yönde kutu hızlanarak hareket etmektedir.Bunu da kodlarda gördüğünüz gibi yaptık.

Linki göremeyenler buraya girebilir = http://mmsrn.com/wp-content/uploads/javascript-kutu-hareketi/js.html

Evet arkadaşlar javascript ile kutumuzu bu şekilde hareket ettirebiliyoruz.şimdi özetle neler yaptığımızı baştan anlatalım.

==>Öncelikle css ile kutumuzu oluşturduk.
==>Ardından javascript kodlarını yazdık.Kodları üstte paylaştık ve açıklamalarını yanlarına yazdık.
==>Sonrasında html kodlarını yazdık.
==>Ardından tüm kodları çalıştırdık ve buradaki sayfadan canlı olarak kutu hareketi yaptık.

Javascript ile ilgili diğer dersleri de zamanla sitemize ekleyeceğiz.Bizleri takip etmeyi unutmayın!

Kodları istediğiniz gibi değiştirip kullanabilirsiniz.Yazımızın sonuna gelmiş bulunmaktayız.Umarız faydalı olur.Bir sorunuz olursa yorum kısmından sorularınızı bize iletebilirsiniz.Bizlere destek olmak için yorum atmayı ve yazımızı sosyal medyada paylaşmayı unutmayınız.Herkese iyi çalışmalar dileriz…

Bu Yazıya Tepkin Ne Oldu ?

Said Mart 27, 2019 - 12:03 pm

Bunlar sadece size gelir sağlayan içerikler. Kimseye birşey öğretmiyor

Yanıtla

admin Mart 27, 2019 - 4:35 pm

Merhabalar efendim kodları html-css-js olarak 3 farklı şekilde paylaştık yapılışını anlattık ayrıca “http://mmsrn.com/wp-content/uploads/javascript-kutu-hareketi/js.html” buradaki sayfada ise uygulama olarak mevcut klavyeniz ile kutuyu hareket ettirebiliyorsunuz. Anlamadığınız yerler varsa da yardımcı olabilirim. Daha ne yapabilirim ki onu anlamadım? Elimden geldiğince öğrenmeye ve yeni başlayanlara öğretmeye çalışıyorum.

Yanıtla

Bahar Nisan 30, 2023 - 11:19 pm

Çalışmıyor yaa kutu hareket etmiyor ge ödevim var 🤧

admin Mayıs 1, 2023 - 12:54 am

Merhaba hocam kodlar çalışıyor “https://mmsrn.com/wp-content/uploads/javascript-kutu-hareketi/js.html” bu sayfayı açarak klavyeden hareket ettirebilirsiniz. Ayrıca yön tuşlarına basınca da çalışmaktadır. Derslerinizde başarılar dilerim.

Yanıtla