Javascript

Javascript Phaser 3 ile Adım Adım Yıldız Toplama Oyununu Yapalım


Phaser framework özellikle oyun geliştiriciler için oluşturulmuş ücretsiz bir javascript kütüphanesidir. İçeriğinde birçok hazır fonksiyon ve yapı içermekte ve javascript oyun programcılarının işini kolaylaştırmaktadır. Sadece oyun değil görsel içerikli, etkileşimli birçok html5 uygulaması Javascript-Phaser yardımıyla oluşturulabilir. 

Burada adım adım hazırlayacağımız yıldız toplama oyunuyla bu framework'ün kullanımında önemli kazanımlar ve ipuçları yakalayacaksınız. Buradaki örnekten yola çıkarak kendi özgün oyununuzu geliştirebilirsiniz. 

ÖNEMLİ: Kendi bilgisayarınızda bu uygulamayı geliştirmeden önce bilgisayarınıza Xampp gibi sunucu uygulamalarından birini yüklemelisiniz. Yoksa yapacağınız kodlamaların çıktısını göremezsiniz.

Bu oyunu yaparken neler öğreneceksiniz?

  • Phaser ile yatay ve dikey spritesheet kullanımı,
  • Phaser'da yazı ve şekillere istenen renk dokusunu vermeyi,
  • Phaser'da bir karakteri 4 yönde hareket ettirmeyi,
  • Phaser'da karakterler arasında etkileşim kurmayı,
  • Temek fonksiyon ve koşul(if-else) yapılarını kullanmayı

öğreneceksiniz.

Oyununu senaryosu:

Bu oyunda amaç klavyenin ok tuşlarıyla yönlendirdiğimiz karakterin en az 8 yıldız topladıktan sonra kapıya ulaşması ve oyunun başarılı bir şekilde bitmesidir. Bunu gerçekleştirirken de bombalardan uzak durulması gerekiyor. Bombalara 10 kez dokunulduğunda can bitecek ve oyun başarısızlıkla sonuçlanacaktır.

Şimdi adımı adım oyunun yapılışına geçelim.

Öncelikle oyunun ekran ölçüleri aşağıdaki gibidir:

Aşağıdaki kodlamalarda verilen koordinat ölçüleri yukarıdaki ölçeklendirmeye göredir.

1.Adım: Oyunu internet sayfasına gömme ve temel klasör ve kod yapısını oluşturma

Oyunun javascript temelli yapısı olduğıu için <script> </script> etiketlerinin içinde aşağıdaki gibi temel yapısını oluşturuyoruz. Temel yapının kodları ve ilgili açıklamalar aşağıdadır.

<script type="text/javascript">
//config kısmında oyununu tipi, ekran boyutları, kullanılacak fizik özellikleri gibi temel ayarları yapıyoruz
var config = {
    type: Phaser.AUTO,
    width: 1024,   //Oyun alanı genişliği
    height: 768,   //Oyun alanı yüksekliği
    physics: {
        default: 'arcade',
        arcade: {
            debug: false
        }
    },
    scene: {
        preload: preload,   //Ön yüklemeleri belirteceğimiz fonksiyon
        create: create,     //Oluşturacağımız nesne ve animasyonları oluşturacağımız fonksiyon
        update: update      //Oyunun akışındaki değişimleri tanımladığımız fonksiyon
    }
};
var game = new Phaser.Game(config);  //Yukarıda config içinde ayarlarını verdiğimiz phaser nesnesini oluşturuyoruz.

function preload ()
{

}
function create ()
{
}

function update ()
{
}
</script>

Sayfanın bir internet sayfasına gömülmüş haline ulaşmak için:

buraya tıklayınız.

Bu sayfada sağ tık menüsünden kaynağı görüntüleyerek internet sayfasına nasıl gömüldüğünü görebilirsiniz.

Burada önemli olan husus html etketlerinde <head> etiketlerinin arasına aşağıdaki gibi phaser kütüphanesini sayfaya dahil etmektir.

İnternet sayfasını oluştururken Atom, Brackets, Notepad++ gibi yazılımlardan faydalanabilirsiniz. Sayfayı kaydederken uzantısı html, htm, php, asp, aspx gibi internet sayfası uzantısı olacak şekilde değiştiriniz.

2.Adım: Oyuna arkaplan ve ana karakteri (bobi) ekleme


Yukarıdaki ekran görüntüsünde olduğu gibi oyuna arkaplan resmi ve ana karakteri eklemek için aşağıdaki gibi kod yapınızı düzenleyebilirsiniz:

<script type="text/javascript">

var config = {
    type: Phaser.AUTO,
    width: 1024,
    height: 768,
    physics: {
        default: 'arcade',
        arcade: {
            debug: false
        }
    },
    scene: {
        preload: preload,   //Ön yüklemeleri belirteceğimiz fonksiyon
        create: create,     //Oluşturacağımız nesne ve animasyonları oluşturacağımız fonksiyon
        update: update      //Oyunun akışındaki değişimleri tanımladığımız fonksiyon
    }
};
var game = new Phaser.Game(config);  //Yukarıda config içinde ayarlarını verdiğimiz phaser nesnesini oluşturuyoruz.

function preload ()
{
    this.load.image('arkaresim', 'resimler/bg.png'); // Arkaplan resmi önce önyüklemede bu ekilde yüklenmeli
    this.load.spritesheet('bobiyatay', 'resimler/bobiyatay.png', { frameWidth: 114, frameHeight: 300 });  //Karakterimizin yatay haket resimleri dizisini bu kodla yüklüyoruz
    this.load.spritesheet('bobiyukari', 'resimler/bobiyukari.png', { frameWidth: 111, frameHeight: 312 }); //Karakterimizin yukarı haket resimleri dizisini bu kodla yüklüyoruz
    this.load.spritesheet('bobiasagi', 'resimler/bobiasagi.png', { frameWidth: 111, frameHeight: 312 });  //Karakterimizin aşağı haket resimleri dizisini bu kodla yüklüyoruz

}
function create ()
{
    arkaplan = this.add.image(512, 384, 'arkaresim'); //Bu satırla arkaplan resmini ekleiyoruz
    bobi = this.physics.add.sprite(100, 450, 'bobiyatay').setScale(0.3); //Bu satırla ana karakteri ekliyoruz setScale fonksiyonuyla orijinal fotoğraf boyutuna göre ölçekliyoruz.
}

function update ()
{
}
</script>

Yukarıdaki kodun sayfa içine gömülmüş haline ulaşmak için:

buraya tıklayınız.

3.Adım: Ana karakterin hareketlerini kodlama

Ana karakterimiz Bobi'nin klavyenin ok tuşlarına göre sağa, sola, yukarı, aşağı, ve tuşlara basılmamış haliyle kodlanması aşağıdaki gibidir.

<script type="text/javascript">

var config = {
    type: Phaser.AUTO,
    width: 1024,
    height: 768,
    physics: {
        default: 'arcade',
        arcade: {
            debug: false
        }
    },
    scene: {
        preload: preload,   //Ön yüklemeleri belirteceğimiz fonksiyon
        create: create,     //Oluşturacağımız nesne ve animasyonları oluşturacağımız fonksiyon
        update: update      //Oyunun akışındaki değişimleri tanımladığımız fonksiyon
    }
};
var game = new Phaser.Game(config);  //Yukarıda config içinde ayarlarını verdiğimiz phaser nesnesini oluşturuyoruz.
var cursors;
function preload ()
{
    this.load.image('arkaresim', 'resimler/bg.png'); // Arkaplan resmi önce önyüklemede bu ekilde yüklenmeli
    this.load.spritesheet('bobiyatay', 'resimler/bobiyatay.png', { frameWidth: 114, frameHeight: 300 });  //Karakterimizin yatay haket resimleri dizisini bu kodla yüklüyoruz
    this.load.spritesheet('bobiyukari', 'resimler/bobiyukari.png', { frameWidth: 111, frameHeight: 312 }); //Karakterimizin yukarı haket resimleri dizisini bu kodla yüklüyoruz
    this.load.spritesheet('bobiasagi', 'resimler/bobiasagi.png', { frameWidth: 111, frameHeight: 312 });  //Karakterimizin aşağı haket resimleri dizisini bu kodla yüklüyoruz

}
function create ()
{
    arkaplan = this.add.image(512, 384, 'arkaresim'); //Bu satırla arkaplan resmini ekleiyoruz
    bobi = this.physics.add.sprite(100, 450, 'bobiyatay').setScale(0.3); //Bu satırla ana karakteri ekliyoruz setScale fonksiyonuyla orijinal fotoğraf boyutuna göre ölçekliyoruz.
    cursors = this.input.keyboard.createCursorKeys();

        this.anims.create({
        key: 'up',
        frames: this.anims.generateFrameNumbers('bobiyukari', { start: 0, end: 3 }),
        frameRate: 10,
        repeat: -1
    });

    this.anims.create({
        key: 'down',
        frames: this.anims.generateFrameNumbers('bobiasagi', { start: 0, end: 3 }),
        frameRate: 10,
        repeat: -1
    });
    this.anims.create({
        key: 'left',
        frames: this.anims.generateFrameNumbers('bobiyatay', { start: 0, end: 3 }),
        frameRate: 10,
        repeat: -1
    });
    this.anims.create({
        key: 'turn',
        frames: [ { key: 'bobiyatay', frame: 4 } ],
        frameRate: 20
    });
    this.anims.create({
        key: 'right',
        frames: this.anims.generateFrameNumbers('bobiyatay', { start: 5, end: 8 }),
        frameRate: 10,
        repeat: -1
    });
}

function update ()
{
       if (cursors.up.isDown)
    {
        bobi.setVelocityY(-160);
        bobi.anims.play('up', true);
    }
   else if (cursors.down.isDown)
    {
        bobi.setVelocityY(160);
        bobi.anims.play('down', true);
    }

        else
    {
        bobi.setVelocityY(0);

    }


    if (cursors.left.isDown)
    {
        bobi.setVelocityX(-160);

        bobi.anims.play('left', true);
    }
    else if (cursors.right.isDown)
    {
        bobi.setVelocityX(160);
        bobi.anims.play('right', true);
    }

    else
    {
        bobi.setVelocityX(0);
    }

    if (!(cursors.left.isDown||cursors.right.isDown||cursors.up.isDown||cursors.down.isDown))
        {
          bobi.anims.play('turn');
        }
}
</script>

Yukarıdaki kodun sayfa içine gömülmüş haline ulaşmak için:

buraya tıklayınız.

4.Adım: Yıldız ve bomba karakter gruplarının tanımlanması ve sahneye her seferinde rastgele yerlere dizilmesi


Ana karakterim yerleştireceğimiz yıldızlara değince puan kazanacak, bombalara değince canı azalacaktır. Bombaları ve yıldızları "staticGroup" olarak tanımlayıp sahneye yerleştireceğiz. Oyun her yüklendiğinde yıldızlar ve bombalar ekrana rastgele yerleştirilecek. Burada 50 bomba ve 15 yıldız tanımladık. Siz for düngüsünde yapacağınız değişiklikle bu sayıları değiştirebilirsiniz. Kodumuz şu şekilde:

<script type="text/javascript">

var config = {
    type: Phaser.AUTO,
    width: 1024,
    height: 768,
    physics: {
        default: 'arcade',
        arcade: {
            debug: false
        }
    },
    scene: {
        preload: preload,   //Ön yüklemeleri belirteceğimiz fonksiyon
        create: create,     //Oluşturacağımız nesne ve animasyonları oluşturacağımız fonksiyon
        update: update      //Oyunun akışındaki değişimleri tanımladığımız fonksiyon
    }
};
var game = new Phaser.Game(config);  //Yukarıda config içinde ayarlarını verdiğimiz phaser nesnesini oluşturuyoruz.
//Oyunun genelinde kullanacağımız değişkenleri tanımlıyoruz
var cursors;
var yildizlar;
var bombalar;
function preload ()
{
    this.load.image('arkaresim', 'resimler/bg.png'); // Arkaplan resmi önce önyüklemede bu ekilde yüklenmeli
    this.load.spritesheet('bobiyatay', 'resimler/bobiyatay.png', { frameWidth: 114, frameHeight: 300 });  //Karakterimizin yatay haket resimleri dizisini bu kodla yüklüyoruz
    this.load.spritesheet('bobiyukari', 'resimler/bobiyukari.png', { frameWidth: 111, frameHeight: 312 }); //Karakterimizin yukarı haket resimleri dizisini bu kodla yüklüyoruz
    this.load.spritesheet('bobiasagi', 'resimler/bobiasagi.png', { frameWidth: 111, frameHeight: 312 });  //Karakterimizin aşağı haket resimleri dizisini bu kodla yüklüyoruz
    this.load.image('yildiz', 'resimler/yildiz.png');
    this.load.image('bomba', 'resimler/bomba.png');
}
function create ()
{
    arkaplan = this.add.image(512, 384, 'arkaresim'); //Bu satırla arkaplan resmini ekliyoruz
    bobi = this.physics.add.sprite(100, 450, 'bobiyatay').setScale(0.3); //Bu satırla ana karakteri ekliyoruz setScale fonksiyonuyla orijinal fotoğraf boyutuna göre ölçekliyoruz.
    cursors = this.input.keyboard.createCursorKeys();
    bombalar = this.physics.add.staticGroup();
    for (i = 0; i < 50; i++)
   {
       x = Phaser.Math.Between(0, 1024);
       y = Phaser.Math.Between(0, 768);
    bombalar.create(x, y, 'bomba').refreshBody();
   }
   yildizlar = this.physics.add.staticGroup();
   for (i = 0; i < 15; i++)
  {
      x = Phaser.Math.Between(0, 1024);
      y = Phaser.Math.Between(0, 768);
      yildizlar.create(x, y, 'yildiz').refreshBody();
  }

    this.anims.create({
        key: 'up',
        frames: this.anims.generateFrameNumbers('bobiyukari', { start: 0, end: 3 }),
        frameRate: 10,
        repeat: -1
    });

    this.anims.create({
        key: 'down',
        frames: this.anims.generateFrameNumbers('bobiasagi', { start: 0, end: 3 }),
        frameRate: 10,
        repeat: -1
    });
    this.anims.create({
        key: 'left',
        frames: this.anims.generateFrameNumbers('bobiyatay', { start: 0, end: 3 }),
        frameRate: 10,
        repeat: -1
    });
    this.anims.create({
        key: 'turn',
        frames: [ { key: 'bobiyatay', frame: 4 } ],
        frameRate: 20
    });
    this.anims.create({
        key: 'right',
        frames: this.anims.generateFrameNumbers('bobiyatay', { start: 5, end: 8 }),
        frameRate: 10,
        repeat: -1
    });
}

function update ()
{
       if (cursors.up.isDown)
    {
        bobi.setVelocityY(-160);
        bobi.anims.play('up', true);
    }
   else if (cursors.down.isDown)
    {
        bobi.setVelocityY(160);
        bobi.anims.play('down', true);
    }

        else
    {
        bobi.setVelocityY(0);

    }

    if (cursors.left.isDown)
    {
        bobi.setVelocityX(-160);

        bobi.anims.play('left', true);
    }
    else if (cursors.right.isDown)
    {
        bobi.setVelocityX(160);
        bobi.anims.play('right', true);
    }

    else
    {
        bobi.setVelocityX(0);
    }

    if (!(cursors.left.isDown||cursors.right.isDown||cursors.up.isDown||cursors.down.isDown))
        {
          bobi.anims.play('turn');
        }

}
</script>

Bu kodun internet sayfasına gömülmüş haline ulaşmak için TIKLAYINIZ.

5.Adım: Yazılarının ve kapı resminin eklenmesi ve ana karakterin nesnelerle etkileşiminin tanımlanması


Oyun da yeterince puan alan karakterimiz kapıya ulaşacak ve oyun başarılı bir şekilde bitecektir. Bu kısımda kapıyı ekleyeceğiz ve nesneler arasındaki etkileşimi overlap fonksiyonuyla tanımlayacağız. Kodumuz şu şekilde:

<script type="text/javascript">

var config = {
    type: Phaser.AUTO,
    width: 1024,
    height: 768,
    physics: {
        default: 'arcade',
        arcade: {
            debug: false
        }
    },
    scene: {
        preload: preload,   //Ön yüklemeleri belirteceğimiz fonksiyon
        create: create,     //Oluşturacağımız nesne ve animasyonları oluşturacağımız fonksiyon
        update: update      //Oyunun akışındaki değişimleri tanımladığımız fonksiyon
    }
};
var game = new Phaser.Game(config);  //Yukarıda config içinde ayarlarını verdiğimiz phaser nesnesini oluşturuyoruz.
//Oyunun genelinde kullanacağımız değişkenleri tanımlıyoruz
var cursors;
var yildizlar;
var bombalar;
var kapi;
var bobi;
var puanTxt;
var canTxt;
var bilgiTxt;
function preload ()
{
    this.load.image('arkaresim', 'resimler/bg.png'); // Arkaplan resmi önce önyüklemede bu ekilde yüklenmeli
    this.load.spritesheet('bobiyatay', 'resimler/bobiyatay.png', { frameWidth: 114, frameHeight: 300 });  //Karakterimizin yatay haket resimleri dizisini bu kodla yüklüyoruz
    this.load.spritesheet('bobiyukari', 'resimler/bobiyukari.png', { frameWidth: 111, frameHeight: 312 }); //Karakterimizin yukarı haket resimleri dizisini bu kodla yüklüyoruz
    this.load.spritesheet('bobiasagi', 'resimler/bobiasagi.png', { frameWidth: 111, frameHeight: 312 });  //Karakterimizin aşağı haket resimleri dizisini bu kodla yüklüyoruz
    this.load.image('yildiz', 'resimler/yildiz.png');
    this.load.image('bomba', 'resimler/bomba.png');
    this.load.image('kapiresim', 'resimler/kapi.png');
}
function create ()
{
    arkaplan = this.add.image(512, 384, 'arkaresim'); //Bu satırla arkaplan resmini ekleiyoruz
    bobi = this.physics.add.sprite(100, 450, 'bobiyatay').setScale(0.3); //Bu satırla ana karakteri ekliyoruz setScale fonksiyonuyla orijinal fotoğraf boyutuna göre ölçekliyoruz.
    cursors = this.input.keyboard.createCursorKeys();
    bombalar = this.physics.add.staticGroup();
    for (i = 0; i < 50; i++)
   {
       x = Phaser.Math.Between(0, 1024);
       y = Phaser.Math.Between(0, 768);
    bombalar.create(x, y, 'bomba').refreshBody();
   }
   yildizlar = this.physics.add.staticGroup();
   for (i = 0; i < 15; i++)
  {
      x = Phaser.Math.Between(0, 1024);
      y = Phaser.Math.Between(0, 768);
      yildizlar.create(x, y, 'yildiz').refreshBody();
  }
  kapi = this.physics.add.sprite(x, y, 'kapiresim').setScale(0.5);
 //Oyunun ana karakterinin diğer nesnelerle etkileşimini overlap ile tanımlıyoruz
 this.physics.add.overlap(bobi, yildizlar, yildizTopla, null, this);
 this.physics.add.overlap(bobi, bombalar, bombaCarp, null, this);
 this.physics.add.overlap(bobi, kapi, yeniSahne, null, this);


    this.anims.create({
        key: 'up',
        frames: this.anims.generateFrameNumbers('bobiyukari', { start: 0, end: 3 }),
        frameRate: 10,
        repeat: -1
    });

    this.anims.create({
        key: 'down',
        frames: this.anims.generateFrameNumbers('bobiasagi', { start: 0, end: 3 }),
        frameRate: 10,
        repeat: -1
    });
    this.anims.create({
        key: 'left',
        frames: this.anims.generateFrameNumbers('bobiyatay', { start: 0, end: 3 }),
        frameRate: 10,
        repeat: -1
    });
    this.anims.create({
        key: 'turn',
        frames: [ { key: 'bobiyatay', frame: 4 } ],
        frameRate: 20
    });
    this.anims.create({
        key: 'right',
        frames: this.anims.generateFrameNumbers('bobiyatay', { start: 5, end: 8 }),
        frameRate: 10,
        repeat: -1
    });

    puanTxt = this.add.text(16, 16, 'Puan: 0',  { font: "bold 24px Verdana", fill: "#fff", boundsAlignH: "center", boundsAlignV: "middle" });
    canTxt = this.add.text(16, 46, 'Can: 100', {font: "bold 24px Verdana", fill: "#fff", boundsAlignH: "center", boundsAlignV: "middle"});
    bilgiTxt = this.add.text(this.scene.centerX, this.scene.centerY,  '', { font: "bold 64px Verdana", fill: "#fff", boundsAlignH: "center", boundsAlignV: "middle" })

}

function update ()
{
       if (cursors.up.isDown)
    {
        bobi.setVelocityY(-160);
        bobi.anims.play('up', true);
    }
   else if (cursors.down.isDown)
    {
        bobi.setVelocityY(160);
        bobi.anims.play('down', true);
    }

        else
    {
        bobi.setVelocityY(0);

    }


    if (cursors.left.isDown)
    {
        bobi.setVelocityX(-160);

        bobi.anims.play('left', true);
    }
    else if (cursors.right.isDown)
    {
        bobi.setVelocityX(160);
        bobi.anims.play('right', true);
    }

    else
    {
        bobi.setVelocityX(0);
    }

    if (!(cursors.left.isDown||cursors.right.isDown||cursors.up.isDown||cursors.down.isDown))
        {
          bobi.anims.play('turn');
        }

}

//Ana karakterin diğer nesnelerle etkileşiminde çalışacak fonksiyonlar
function bombaCarp (bobi, bombalar)
{
}

function yildizTopla (bobi, yildizlar)
{
}

function yeniSahne (bobi, kapi)
{
}
</script>

Bu kodun internet sayfasına gömülmüş haline ulaşmak için TIKLAYINIZ.

6.Adım: Etkileşimle ilgili fonksiyonların oluşturularak oyunun tamamlanması

Bir önceki adımda overlap fonksiyonuyla ana karakterin diğer nesnelerle etkileşiminde gerçekleşecek fonksiyonlatı tanımlamıştık. Bunlar  bombaCarp, yildizTopla,ve yeniSahne fonksiyonlarıydı. Bu fonksiyonların işlevleri şu şekilde olacak:

bombaCarp foksiyonu ile

  • Ana karakterin değdiği bombanın gizlenmesi,
  • Can değerinin azalıp ekranda gösterilmesi sağlanacak.

yildizTopla foksiyonu ile

  • Ana karakterin değdiği yıldızın gizlenmesi,
  • Puanın artırılıp ekranda gösterilmesi sağlanacak.

yeniSahne foksiyonu ile

Ana karakterin en az 8 yıldız toplayıp toplamadığı kontrol edilecek,

Eğer ana karakter en az 8 yıldız toplamışsa ekranın ortasına orijinal boyutuyla gelecek,

  • Ekranda  "TEBRİKLER" yazısı görülecek,
  • Diğer nesneler gizlececek ve kaldırılacaktır.

Eğer ana karakter en az 8 yıldız toplamamışsa,

kapıya ulaştığında "En az 8 yıldız toplayın" uyarı yazısı gelecektir ve 1 saniye görünüp kaybolacaktır. Kaybolma bilgiYaziGizlen  fonksiyonuyla gerçekleşecektir.

Bu fonksiyonların dışında bu aşamada ayrıca update fonksiyonunun içinde karakterin fazla bombaya değip canı bittiğinde olacak olaylar kpdlanmıştır. Kodlarla ilgili ayrıntılı açıklamalar aşağıda verilecek oyunun bitmiş halinin kaynak kodundadır:

<script type="text/javascript">

var config = {
    type: Phaser.AUTO,
    width: 1024,
    height: 768,
    physics: {
        default: 'arcade',
        arcade: {
            debug: false
        }
    },
    scene: {
        preload: preload,   //Ön yüklemeleri belirteceğimiz fonksiyon
        create: create,     //Oluşturacağımız nesne ve animasyonları oluşturacağımız fonksiyon
        update: update      //Oyunun akışındaki değişimleri tanımladığımız fonksiyon
    }
};
var game = new Phaser.Game(config);  //Yukarıda config içinde ayarlarını verdiğimiz phaser nesnesini oluşturuyoruz.
//Oyunun genelinde kullanacağımız değişkenleri tanımlıyoruz
var cursors;
var yildizlar;
var bombalar;
var kapi;
var arkaplan;
var bobi;
var can=100;
var puan=0;
var puanTxt;
var canTxt;
var bilgiTxt;
function preload ()
{
    this.load.image('arkaresim', 'resimler/bg.png'); // Arkaplan resmi önce önyüklemede bu ekilde yüklenmeli
    this.load.spritesheet('bobiyatay', 'resimler/bobiyatay.png', { frameWidth: 114, frameHeight: 300 });  //Karakterimizin yatay haket resimleri dizisini bu kodla yüklüyoruz
    this.load.spritesheet('bobiyukari', 'resimler/bobiyukari.png', { frameWidth: 111, frameHeight: 312 }); //Karakterimizin yukarı haket resimleri dizisini bu kodla yüklüyoruz
    this.load.spritesheet('bobiasagi', 'resimler/bobiasagi.png', { frameWidth: 111, frameHeight: 312 });  //Karakterimizin aşağı haket resimleri dizisini bu kodla yüklüyoruz
    this.load.image('yildiz', 'resimler/yildiz.png');
    this.load.image('bomba', 'resimler/bomba.png');
    this.load.image('kapiresim', 'resimler/kapi.png');
}
function create ()
{
    arkaplan = this.add.image(512, 384, 'arkaresim'); //Bu satırla arkaplan resmini ekleiyoruz
    bobi = this.physics.add.sprite(100, 450, 'bobiyatay').setScale(0.3); //Bu satırla ana karakteri ekliyoruz setScale fonksiyonuyla orijinal fotoğraf boyutuna göre ölçekliyoruz.
    cursors = this.input.keyboard.createCursorKeys();
    bombalar = this.physics.add.staticGroup();
    for (i = 0; i < 50; i++)
   {
       x = Phaser.Math.Between(0, 1024);
       y = Phaser.Math.Between(0, 768);
    bombalar.create(x, y, 'bomba').refreshBody();
   }
   yildizlar = this.physics.add.staticGroup();
   for (i = 0; i < 15; i++)
  {
      x = Phaser.Math.Between(0, 1024);
      y = Phaser.Math.Between(0, 768);
      yildizlar.create(x, y, 'yildiz').refreshBody();
  }

  kapi = this.physics.add.sprite(x, y, 'kapiresim').setScale(0.5);

 //Oyunun ana karakterinin diğer nesnelerle etkileşimini overlap ile tanımlıyoruz
 this.physics.add.overlap(bobi, yildizlar, yildizTopla, null, this);
 this.physics.add.overlap(bobi, bombalar, bombaCarp, null, this);
 this.physics.add.overlap(bobi, kapi, yeniSahne, null, this);


    this.anims.create({
        key: 'up',
        frames: this.anims.generateFrameNumbers('bobiyukari', { start: 0, end: 3 }),
        frameRate: 10,
        repeat: -1
    });

    this.anims.create({
        key: 'down',
        frames: this.anims.generateFrameNumbers('bobiasagi', { start: 0, end: 3 }),
        frameRate: 10,
        repeat: -1
    });
    this.anims.create({
        key: 'left',
        frames: this.anims.generateFrameNumbers('bobiyatay', { start: 0, end: 3 }),
        frameRate: 10,
        repeat: -1
    });
    this.anims.create({
        key: 'turn',
        frames: [ { key: 'bobiyatay', frame: 4 } ],
        frameRate: 20
    });
    this.anims.create({
        key: 'right',
        frames: this.anims.generateFrameNumbers('bobiyatay', { start: 5, end: 8 }),
        frameRate: 10,
        repeat: -1
    });

    puanTxt = this.add.text(16, 16, 'Puan: 0',  { font: "bold 24px Verdana", fill: "#fff", boundsAlignH: "center", boundsAlignV: "middle" });
    canTxt = this.add.text(16, 46, 'Can: 100', {font: "bold 24px Verdana", fill: "#fff", boundsAlignH: "center", boundsAlignV: "middle"});
    bilgiTxt = this.add.text(this.scene.centerX, this.scene.centerY,  '', { font: "bold 64px Verdana", fill: "#fff", boundsAlignH: "center", boundsAlignV: "middle" })

}

function update ()
{
       if (cursors.up.isDown)
    {
        bobi.setVelocityY(-160);
        bobi.anims.play('up', true);
    }
   else if (cursors.down.isDown)
    {
        bobi.setVelocityY(160);
        bobi.anims.play('down', true);
    }

        else
    {
        bobi.setVelocityY(0);

    }


    if (cursors.left.isDown)
    {
        bobi.setVelocityX(-160);

        bobi.anims.play('left', true);
    }
    else if (cursors.right.isDown)
    {
        bobi.setVelocityX(160);
        bobi.anims.play('right', true);
    }

    else
    {
        bobi.setVelocityX(0);
    }

    if (!(cursors.left.isDown||cursors.right.isDown||cursors.up.isDown||cursors.down.isDown))
        {
          bobi.anims.play('turn');
        }

        if (can < 10)
    {
        bilgiTxt = this.add.text(this.scene.centerX, this.scene.centerY,  'OYUN BİTTİ', { font: "bold 64px Verdana", fill: "#fff", boundsAlignH: "center", boundsAlignV: "middle" })
        bilgiTxt.setTint(0xff00ff, 0xffff00, 0x0000ff, 0xff0000);
        Phaser.Display.Align.In.Center(bilgiTxt, this.add.zone(512, 354, 1024, 768));
        bobi.destroy();
        arkaplan.destroy();
        canTxt.destroy();
        kapi.destroy();
        Phaser.Actions.SetVisible(bombalar.getChildren(), false);
        bombalar.clear();
        Phaser.Actions.SetVisible(yildizlar.getChildren(), false);
        yildizlar.clear();
        return;
    }

}

//Ana karakterin diğer nesnelerle etkileşiminde çalışacak fonksiyonlar
function bombaCarp (bobi, bombalar)
{  //Karakterin değdiği bomba gizlenecek
  bombalar.disableBody(true, true);
    // Herbir bombaya değdiğince can azalacak ve ekranda can değeri güncellenecek
  can -= 10;
  canTxt.setText('Health: ' + can);
}

function yildizTopla (bobi, yildizlar)
{   // Karakterin değidiği yıldız gizlenecek
    yildizlar.disableBody(true, true);
    // Herbir yıldıza değdiğinde puan 10 artacak ve ekranda puan güncellenecek
    puan += 10;
    puanTxt.setText('Puan: ' + puan);
}

function yeniSahne (bobi, kapi)
{
     if (puan>70){
    bilgiTxt.setVisible(true);
    bilgiTxt.setText('TEBRİKLER!!');
    bilgiTxt.setTint(0xff00ff, 0xffff00, 0x0000ff, 0xff0000);
    Phaser.Display.Align.In.Center(bilgiTxt, this.add.zone(512, 354, 1024, 768));
    bobi.setX(512);
    bobi.setY(500);
    bobi.setScale(1);
    bobi.disableInteractive();
    arkaplan.destroy();
    kapi.destroy();
    Phaser.Actions.SetVisible(bombalar.getChildren(), false);
    bombalar.clear();
    Phaser.Actions.SetVisible(yildizlar.getChildren(), false);
    yildizlar.clear();
    bobi.anims.play('turn');

    }

    else {
    bilgiTxt.setVisible(true);
    bilgiTxt.setText('En az 8 yıldız toplayın');
    bilgiTxt.setTint(0xff00ff, 0xffff00, 0x0000ff, 0xff0000);
    Phaser.Display.Align.In.Center(bilgiTxt, this.add.zone(512, 354, 1024, 768));
    this.time.delayedCall(1000, bilgiYaziGizlen, [], this);
  }

}
function bilgiYaziGizlen ()
{
    bilgiTxt.setVisible(false);
}
</script>

Bu kaynak kodun internet sayfasına gömülü haline (aynı zamanda oyunun son hali) ulaşmak için  TIKLAYINIZ.

Burada yapım aşamaları anlatılan örnek oyun, temel Javascript-Phaser3 kullanımına bir örnek olarak ele alınmalıdır. Siz bu oyundaki özelliklerden faydalanarak kendi özgün oyunlarınızı ve uygulamalarınızı geliştirebilirsiniz. Bu etkinlik hakkında yorumlarınızı ve katkılarınızı aşağıda yorumlar kısmında görmek dileriz.

Burada verilen aşamaların toplu halini bilgisayarınıza indirmek için TIKLAYINIZ.

426 views
YORUMLAR