İlk önce projemizde kullanacağımız nesneleri tanımlayarak başlıyoruz. Benim kullandığım nesnelerin isimleri araba, yol, kursun, insan, nesne, h3(bunu skor yazdırmak için kullandık).
Araba için css kodlarımız
#araba {
position: absolute;
z-index: 3;
width: 50px;
height: 100px;
margin-top: 600px;
left: 50%;
}
Yol için css kodlarımız
#yol {
margin-left: 37%;
align-items: center;
z-index: 1;
border-style: solid;
height: 600px;
width: 400px;
background-image: url(images/102016067-asphalt-road.jpg);
// burda arkaplan resmi olarak images klasöründeki yol resmini seçtik
}
Kursun için css kodlarımız
.kursun {
top: auto;
overflow: hidden;
z-index: 9;
border-radius: 50%;
// yuvarlak olması için border-radius: 50%; yaptık
width: 15px;
height: 15px;
background-color: red;
position: absolute;
}
İnsan için css kodumuz
#insan {
width: 60px;
height: 60px;
position: absolute;
}
Nesne için css kodumuz
#nesne {
position: absolute;
top: auto;
z-index: 8;
height: 50px;
left: auto;
width: 50px;
}
Skor için css kodumuz
h3 {
float: right;
font-family: Gotham, Helvetica Neue, Helvetica, Arial, " sans-serif";
color: goldenrod;
//Skor için h3 kullandık
}
Gelelim html kodlarımıza css’te tanımladığımız nesnelerimizi burada çağırdık
<div id="yol"> <img src="images/spr-araba.png" id="araba"> //images klasöründeki araba resmini seçtik
<img src="images/adam.png" id="insan">//images klasöründeki adam resmini seçtik
<img src="images/ucak.png" id="nesne">//images klasöründeki uçak resmini seçtik
<div class="patlama"></div>
<h3 id="skr">Skor:</h3>
</div>
<div id="yaz"></div> // kurşunun ateş ettiğimizdeki konumu için kullandık
Html kodlarımız bu kadar şimdi Jquery kodlarımıza gelelim.Bu tuşa basıldığında hareket etmesini sağlayacak fonksiyonumuz
var keys = {}
$(document).keydown(function(e) {
keys[e.keyCode] = true;
});
$(document).keyup(function(e) {
delete keys[e.keyCode];
});
konum çekmek için global değişken oluşturduk. Aşağıda bu değişkenleri kullandık
var araba = $("#araba");
var insan = $("#insan");
insan hareketimizin İntervali bu interval sayesinde insanı hareket ettiriyoruz
setInterval(insanhareket, 30);
Uçağımızın sayfa açıldığında hareket etmesi için bu fonksiyonu kullanıyoruz. nesneHareket(); daha oluşturmadık.
$(document).ready(function(){
nesneHareket();
});
Uçağımızın sayfa açıldığında hareket etmesi için bu fonksiyonu kullanıyoruz. nesneHareket(); daha oluşturmadık.
ikisi tekbir fonksiyon bu üstte bahsettiğimiz nesnemizin hareketi için gerekli olan fonksiyon sağa doğru %25 eksilerek 9000 milisaniye boyunca devam ediyor dönüşte nesnemizi $("#nesne").hide(); gizlediğimiz için başlangıçta $("#nesne").show(); kodunu çalıştırdık
function nesneHareket() {$("#nesne").show();
$("#nesne").animate({right: "-=25%"}, 9000, 'linear',
function () {$("#nesne").hide();
$("#nesne").animate({right: "+=25%"}, 100, 'linear', nesneHareket);});}
// nesnemizin geri dönüşünde görünmesi yerine başlagınçta görünmesini istediğimiz için geri giderken $("#nesne").hide(); kodunu kullandık bu işlemin hızlı bir şekilde olması için zamanını 100 mili saniye verdik
yukarıdaki araba değişkenimizin pozisyonunu p değişkinenine attık
var p = araba.position();
insanımızın tuşlara basıldığında hareket etmesi için bu fonksiyonu kullandık
if (direction == 37) sol yön ok tuşumuza basıldığında sola gitmesi için yaptık aynı işlemleri diğer tuşlar için de yaptık
if (direction == 13) yani entere bastığımızda
$("#insan").hide(); koduyla insanı gizledik
setInterval(arabahareket, 50); koduyla insanı gizlediğimizde arabayı çalıştırmak için buarada çağırdık
return arabahareket();
Klavyedeki tuş kodlarını öğren için https://keycode.info/ sitesini ziyaret edebilirsiniz.
function insanhareket() {
for (var direction in keys) {
if (!keys.hasOwnProperty(direction)) continue;
if (direction == 37) {
$("#insan").animate({left: "-=5"}, 0);
}
if (direction == 38) {
$("#insan").animate({top: "-=5"}, 0);
}
if (direction == 39) {
$("#insan").animate({left: "+=5"}, 0);
}
if (direction == 40) {
$("#insan").animate({top: "+=5"}, 0);
}
if (direction == 13) {
$("#insan").hide();
setInterval(arabahareket, 50);
return arabahareket();
}
}}
yukarıda insan için yaptığımız şeylerin aynıları araba içinde yaptık
if (direction == 32) boşluk tuşuna basıldığında yukarıda divim olarak oluşturduğumuz değeri arttırıyoruz.
$("#yaz").html("left:"+p.left + " top:"+ p.top); Html kodunda bahsettiğim <div id="yaz"> burda kulladık p.left yani araba.left ve araba.top’u yazdırdık.
var divim =0;
function arabahareket() {
for (var direction in keys) {
if (!keys.hasOwnProperty(direction)) continue;
if (direction == 37) {
$("#araba").animate({left: "-=5"}, 0);
}
if (direction == 38) {
$("#araba").animate({top: "-=5"}, 0);
}
if (direction == 39) {
$("#araba").animate({left: "+=5"}, 0);
}
if (direction == 40) {
$("#araba").animate({top: "+=5"}, 0);
}
if (direction == 32) {
divim++;
p = araba.position();
$("#yaz").html("left:"+p.left + " top:"+ p.top);
fire(divim);
return false;
}
}}
Bu fonksiyonu ateş ettiğimizde arabanın ortasından çıkaması için kullandık
Araba pozisyonunu x,y diye iki tane değişkene atadık ardından //$("#yol").append($("<div>").addClass("kursun").css({'left':x, 'top':y})); koduyla yol divine kursun ekledik daha sonra ("kursun").css({'left':x, 'top':y}) yaparak arabada aldığımız değişkenleri css olarak kullandık
function fire(div) {
p = araba.position();
var x =p.left+15;
var y = screen.height+ p.top -300;
$("#yol").append($("<div>").addClass("kursun").css({'left':x, 'top':y}));
}
update fonksiyonumuzun intervalı değişkene atayıp çağırdık
var baslat= setInterval(update,30);
Burda kursun değişkenimizin ardından başka bir kurşun oluşturmak için yaptık
skor = 0;// skor değişkeni oluşturup 0 eşitledik
function update() {
$(".kursun").each(function() {
var oldLeft = $(this).offset().top;
console.log(oldLeft);
$(this).css("top", oldLeft - 10);
oldLeft<-100 olduğunda kurşunun o anki değerini kaldırarak oyunun aşırı kasmasını engelledik.
if(oldLeft<-100){
$(this).remove();
}
Değişkenimize kursunun koordinatını,Nesnenin koordinatını, Kursunun top’ın Nesnenin top’ını aktardık
var k = $(this).offset();
var n = $("#nesne").offset();
var q = k.top;
var o = n.top;
Burada kurşunumuzun koordinatıyla nesnemizin koordinatı eşleşirse(Vurulduğunda) aşağıdaki işlemler olucak
if(q>o && q-50<o && k.left>n.left && k.left - 50<n.left ){
skor += 100 // skorumuzu yüze eşitleyip 100 arttırıyoruz
$(this).remove();// kurşunumuzu kaldırıyoruz vurduğumuz için yok olması lazım
$("#skr").html("Skor: " + skor);//skorumuzu oluşturduğumuz #skr id’li h3’e yazdırdık
$("#nesne").attr("src","images/bomba.gif");//resmimizi bomba gif ile değiştirdik.
setTimeout(function(){$("#nesne").hide();},1000);//1000 milisaniye sonra nesnemizi gizledik.
setTimeout(
function(){
$("#nesne").css({'top':'15px','left':'520px'});
//nesnemizi vuruduğumuzda başlagıç konumundan tekrar başlaması için yaptık
$("#nesne").stop();//nesnemizi durdurduk
setTimeout(function(){$("#nesne").css({ 'left' : '','right':''});},400);
//nesnenin left ve right değerlerini sıfırladık
$("#nesne").css({'top': '15px','right':'58%'});
//nesnenin rightını 58% yaptık bunun nedeni az önce sıfırlamıştık ve başlagıç konumunun %58 olması
nesneHareket();
//nesnemizi hareket ettircek kodu çağırdık
$("#nesne").attr("src","images/ucak.png");//nesneyi uçak.png ile değiştirdik
$("#nesne").show();},1500);// nesnemizi gösterdik
}
});
}
Örnek uygulamayı görmek için tıklayınız:
Hazırlayan: Ulaş Can