Blog Post

Si te krijojme nje Klon te Flappy Bird (p2-Final)

Nga Mangosoft

2007-10-16

Si te krijojme nje Klon te Flappy Bird (p2-Final)

Deri ne kete pike kemi arritur te krijojme pengesa dhe te vendosim zogun ne loje, gjithashtu i japim zogut funksionin e hedhjes, por ne rast se zogu preket me pengesat nuk ndodh asgje per te krijuar keto na ndiqni ne pjesen e dyte, si te krijojme nje Klon te Flappy Bird pjesa e dyte.

Piket dhe Perplasjet 

Ne mesimin e meparshem krijuam strukturen e lojes dhe gjithashtu krijuam pengesa per zogun, por ajo qe na duhet tani eshte te shikojme perplasjet ne mes zogut dhe pengesave dhe gjithashtu te regjistrojme piket kur zogu kalon pengesat me sukses.

Ne funksionin create() vendosim kodin e meposhtem per te incializuar piket ne 0 dhe e vendosim tekstin ne pjesen e siperme te ekranit.

this.piket = 0;
this.labelPiket = game.add.text(20,20,”0”,{font:”30px Arial”,fill:”#ffffff”});

Ne funksioni addRowOfPipes() vendsim kodin e meposhte qe do te te rris piket per nje ne cdo pengese te krijuar. Me kete kuptojme qe zogu ka kaluar me sukses pengesen e pare dhe krijojme pengesen e dyte.

this.piket += 1;
this.labelPiket.text = this.piket;

Ne funksionin update() vendosim kodin per rifillim te lojes, sa her qe zogu do te perplaset me pengesat.

game.physics.arcade.overlap(this.bird, this.pengesat, this.restartGame, null, this);

 

 

Animcaion dhe Audio 

Tani qe kemi krijuar lojen, per ta bere ate me interesante i japim zogut animcaionin e fluturimit, ose me sakte ate te hedhjes.

Zogu duket sikur shkon per larte ne klikim dhe duket sikur zbret kur nuk ka klikim, kete mund ta realizojme duke shkruar kodin e meposhtem ne funksionin update().

if(this.bird.angle < 20){ this.bird.angle += 1; }

Gjithashtu ne funksionin Jump() e vendosim animcaionin per fluturimin e zogut.

var animacion = game.add.tween(this.bird);
animcaion.to({angle:-20},100);
animcaion.start();

Nese e shohim tani e kuptojme se zogu rrotullohet por jo ne drejtimin e duhur, sepse qendra e rrotullimit eshte ne piken 0,0, per ta ndryshuar kete e vendosim kodin e meposhtem ne funksionin create().

this.bird.anchor.setTo(-0.2, 0.5);

Ne foton e meposhtme paraqitet ndryshimi qe krijohet me qendren e rrotullimit te zogut.

 

Tani animacioni do te kryhet ne drejtimin e duhur,

   

Tani qe krijuam animacionin do ti vendosim lojes edhe audio sa here qe zogu te fluturoj.

Fillimisht e lexojme audion duke e shkruar ate ne funksionin preload()

game.load.audio(“jump”,”assets/jump.wav”);

Me kodin e poshtem e vendosim audion ne loje duke e shkruar ne funksionin create()

this.jumpSound = game.add.audio(‘jump’);

Dhe si perfundim e luajm audion sa her qe zogu do te fluturoj (hidhet) duke e shkruar kodin e meposhtem ne funksionin jump()

this.jumpSound.play();

Tani mund te themi qe kemi krijuar nje lojme te thjeshte por te kompletuar, duke shfrytezuar librarine e Phaser dhe teknologjine HTML dhe Javascript.

Share on Facebook