Kurtul Oyunu (Html5)

  Bu yazımda pekiştirmek ve pratik yapmak için yazdığım ikinci oyunumu tanıtacağım.Bu oyunun yapımında da html5-JavaScript-JQuery kodlarını kullandım. Kısaca karakterimiz olan bir top nesnesi ile üzerimize gelen basamaklar dediğim çubuklardan kurtularak oyun alanının üzerine çıkmaya çalışıyoruz.

  Oyunumuzun görüntüsü şu şekildedir.

  Bu oyunları yazmamım en büyük nedenleri analitik düşünme ve algoritma kurma becerilerimi geliştirmektir. Topun duvarlar ile çarpışması veya basamaklar ile çarpışmaları olsun , basamakların uzunlukları ve çıktıkları konumları olsun bunların ayarlanması gerçekten ufkunuzu açıyor.

Örneğin basamakların ilk oluşturulduğu kod parçası şu şekildedir.

function basamaklariOlustur() {
    var indis;
    var x, en;
    var y = 0;
    for (indis = 0; indis <= basamakSayisi; indis++) {

        do {
            x = 10 + Math.random() * 300;
            en = 75 + Math.random() * 200;
        } while (x + en > alanG - 10);// konumu + eni sağdan fazla olmamasını sağlıyoruz

        //2 ve 3 katlarında köşelerden çıkmayı garanti ediyoruz
        if ((indis % 2) == 0 && !(x > 10 && x < karakterBoyutu - 2)) {
            do {
                x = 10 + Math.random() * 300;
            } while (!(10 < x && x < karakterBoyutu - 2));// 

        } else if ((indis % 3) == 0 && !(x + en > alanG - karakterBoyutu - 8 && x + en < alanG - 10)) {
            do {
                x = 10 + Math.random() * 300;
                en = 75 + Math.random() * 200;
            } while (!(x + en > alanG - karakterBoyutu - 8 && x + en < alanG - 10));// 

        }

        y -= 70;//her basamak arasına uzaklık koyuyoruz
        basamaklar[indis] = new BasamakNesnesi(x, y, en, basamakBoyu);
    }
}

Karakterimizin hareket kodları şu şekildedir.

function karakterHareket() {
    if (btnSol) {
        karakter.x += -karakterHareketpx;
    } else if (btnSag) {
        karakter.x += +karakterHareketpx;
    }
    // soldan çıkmaz
    if (karakter.x < 10 && btnSol) {
        karakter.x = 10;
    }// sağdan çıkmaz
    else if (karakter.x > alanG - 10 - karakterBoyutu && btnSag) {
        karakter.x = alanG - 10 - karakterBoyutu;
    }
    carpismaKontrol();

}

Kodlara ulaşmak için github adresine gidin.

Masa Hokey Oyunu (Html5)

  Devamı gelirmi bilmiyorum ama bu yazımda Html5 Css3 JavaScript JQuery öğrendikten sonra pratik yapmak için yazdığım masa hokeyi oyununu tanıtacağım.
  Oyunum görüntüsü şu şekildedir.

  Bu oyunu geliştirirken html5'in canvas elemanını kullandım. JQuery metodlarını kullandım.Oyunun içindeki bileşenler top nesnesi hariç canvasın kendi grafik elamanlarıdır. Top nesnesi ise 50x50 png formatında resimdir.

Örneğin sol taraftaki kale nesnesinin kodları şu şekildedir.

  BobContext.beginPath();
  BobContext.fillStyle = 'red';  
  BobContext.rect(0, 100,5,200);   
  BobContext.fill();
  BobContext.lineWidth = 1;
  BobContext.stroke();
  BobContext.closePath();

Örneğin ortadaki yeşil yuvarlağın kodları şu şekildedir.

  BobContext.beginPath();
  BobContext.arc(BobContext.canvas.width/2, BobContext.canvas.height/2, BobContext.canvas.width/20, 0, 2 * Math.PI, false);
  BobContext.fillStyle = 'green';
  BobContext.fill();
  BobContext.lineWidth = 2;
  BobContext.stroke();
  BobContext.closePath();

Örneğin kalelerin kenarları ile çarpışma kodları şu şekildedir.

 //kale 1 üst çarpişma
 if(objBob.x == 0 && (objBob.y<100)){
 objBob.dx = -objBob.dx ;
 }//kale1 alt çarpişma
 if(objBob.x == 0 && (objBob.y > 300)){
 objBob.dx = -objBob.dx ;
 }//kale 2 üst çarpişma
 if(objBob.x == areaW-5 &&  (objBob.y<100)){
 objBob.dx = -objBob.dx ;
 }//kale 2 alt çarpişma
 if(objBob.x == areaW-5 && (objBob.y > 300 )){
 objBob.dx = -objBob.dx ;
 }

Kodlara ulaşmak için github adresine gidin.