Ağu.20

HTML5 ve PhaserJS ile Oyun Programlama – PART 9 : Karakter ile Nesneleri Toplamak

Oyun örneğinde karakterin toplayacağı nesneler, platform çubuklarının üzerlerinde yer alacak ve bu nesnelere de fizik kuralları uygulanacak.

Nesnemiz, bir yıldız ikonu şeklindedir. star nesne ismi ile yüklenmişti.

Aşağıdaki komut ile yıldızları tanımlayacak olan nesneyi oluşturuyoruz.

var stars;

create() fonksiyonu içinde de for döngüsü ile yıldızları oluşturup sahneye konumlandırıyoruz.

…    
    stars = game.add.group();

    stars.enableBody = true;

    //  20 adet yıldız olacak şeklinde belirtiyoruz.
    for (var i = 0; i < 20; i++)
    {
        //  star grubu içinde yıldızlarımızı oluşturuyoruz.
        //  yıldızların x ve y koordinat bilgilerini belirtiyoruz. 
        //  x koordinat değeri i değeri kadar çarpılıyor.
        var star = stars.create(i * 60, 0, 'star');

        //  yıldızlar için yerçekimi ivmesi uygulanıyor, böylece platform üzerine yağacaklar.
        star.body.gravity.y = 10;

        //  yağan yıldızlar platforma çarpınca rastgele yoğunluklarla sekecek.
        star.body.bounce.y = 1.7 + Math.random() * 0.5;
    }
…    

update() fonksiyonunda yıldızlar için fizik kurallarının hangi alanda olacağını atıyoruz.

…
game.physics.arcade.collide(stars, platforms);
…

Yıldızlar ile karakterin teması esnasında hangi fonksiyon çağırılacaksa onu da update() fonksiyonunda belirtiyoruz.

…
game.physics.arcade.overlap(player, stars, collectStar, null, this);
…

Bu tanımlamaya göre collectStar() fonksiyonu tetiklenecek.

collectStar() fonksiyonunu da kalıp fonksiyonlar dışında oluşturuyoruz.

function collectStar (player, star) {
  // Temas eden yıldız ekrandan kaldırılıyor.
  star.kill();
}

Kodun tamamı ise aşağıda verilmiştir.

<!doctype html> 
<html lang="tr"> 
<head> 
	<meta charset="UTF-8" />
	<script type="text/javascript" src="js/phaser.min.js"></script>
</head>
<body>

<script type="text/javascript">

var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update });

function preload() {

    game.load.image('sky', 'assets/sky.png');
    game.load.image('ground', 'assets/platform.png');
    game.load.image('star', 'assets/star.png');
    game.load.spritesheet('dude', 'assets/dude.png', 32, 48);

}

var player;
var platforms;
var cursors;

var stars;

function create() {
    game.physics.startSystem(Phaser.Physics.ARCADE);
    game.add.sprite(0, 0, 'sky');
    platforms = game.add.group();
    platforms.enableBody = true;
    var ground = platforms.create(0, game.world.height - 64, 'ground');
    ground.scale.setTo(2, 2);
    ground.body.immovable = true;
    var ledge = platforms.create(400, 400, 'ground');
    ledge.body.immovable = true;
    ledge = platforms.create(-150, 250, 'ground');
    ledge.body.immovable = true;
    player = game.add.sprite(100, game.world.height - 300, 'dude');
    game.physics.arcade.enable(player);
    player.body.bounce.y = 0.3;
    player.body.gravity.y = 150;
    player.body.collideWorldBounds = true;
    player.animations.add('left', [0, 1, 2, 3], 10, true);
    player.animations.add('right', [5, 6, 7, 8], 10, true);
    cursors = game.input.keyboard.createCursorKeys();
	
    stars = game.add.group();

    stars.enableBody = true;

    for (var i = 0; i < 20; i++)
    {
        var star = stars.create(i * 60, 0, 'star');
        star.body.gravity.y = 40;
        star.body.bounce.y = 0.6 + Math.random() * 0.1;
    }

}

function update() {

    game.physics.arcade.collide(player, platforms);

    game.physics.arcade.collide(stars, platforms);
    game.physics.arcade.overlap(player, stars, collectStar, null, this);

    player.body.velocity.x = 0;

    if (cursors.left.isDown)
    {
        player.body.velocity.x = -70;
        player.animations.play('left');
    }
    else if (cursors.right.isDown)
    {
        player.body.velocity.x = 70;
        player.animations.play('right');
    }
    else
    {
        player.animations.stop();
        player.frame = 4;
    }

    if (cursors.up.isDown && player.body.touching.down)
    {
        player.body.velocity.y = -400;
    }

}

function collectStar (player, star) {
    star.kill();
}

</script>

</body>
</html>

İçeriği paylaş:
  • facebook
  • twitter

Leave a comment

Yorum