Blog Post

Si te krijojme nje Klon te Flappy Bird (p1)

Nga Mangosoft

2023-09-16

Si te krijojme nje Klon te Flappy Bird (p1)

Flappy Bird eshte nje loje e vogel dhe e lehte per te kuptuar strukturen. Ne do te shohim se si mund te krijojme nje verzion fillestart  te lojes me Javascript duket perdorur librarian Phaser.

Phaser eshte falas dhe me burim te hapur, gjithashtu mund te luhet ne cdo lloje shfletuesi.

 

Ndertimi i struktures 

Per te filluar kete projekt ju duhet te shkarkoni projektin e shprazet ku do te gjeni strkuturen e fajllave qe do te perdorim per zhvillimin e lojes.

-               Phaser.min.js – libraria e Phaser verzioni 2.4.3

-               Index.html – ku do te paraqitet loja

-               Main.js – ku do te shkruajm kodin e zhvillimit te lojes

-               Assets/ - folder qe permban 2 imazhe dhe nje audio efekt

 

Gjithcka qe na duhet per te konfiguruar lojen me Phaser eshte te permbushim funskionet plreload(), create() dhe update() qe jane konfiguruar ne fajllin main.js.

 


Zogu 

Le te fokusohemi ne vendosjen e zogut ne loje dhe gjithashtu ti japim mundesi qe kur te klikohet tasti spacebar zogu te hidhet.

Per te vendosur zogun fillimisht duhet te bejme ndryshime ne fuksionet e konfigurara ne fajllin main.js edhe ate ne preload()

Game.load.image(‘bird’, ‘assets/bird.png’); 

Ne funksionin create() vendosim

//Te ndryshojme ngjyren e prapavijes ne te kalter
game.stage.backgroundColor = ‘#71c5cf’;
 
//E inicializojme librarin e levizjeve game.physics.startSystem(Phaser.Physics.ARCADE);
 
//E shfaqim zogun ne pozicionin  x=100 dhe y=100
this.bird = game.add.sprite(100,245, ‘bird’);
 
//I japim gravitet per renien
game.physics.arcade.enable(this.bird);
this.bird.body.gravity.y = 1000;
  //E thirrim funksionin jump me klikim te tastit spacebar
var spaceKey = game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR);
spaceKey.onDown.add(this.jump, this);
 

Ne update() funksionin e vendosim

//E bejme restart lojen ne zogu ka kaluar mbi kufijt e ekranit
if(this.bird.y < 0 || this.bird.y > 490) { this.restartGame(); }

Per tja mundsuar hedhjen zogut dhe restrtin e lojes shkruaj dy funksione te tjera ne vazhdimsi te funksionit update()

Jump:function(){
   this.bird.body.velocity.y = -350;
},
restart:function(){
   game.state.start(‘main’);
},

Nese e ruajm tani lojen dhe e testojm ate ne shfletues do te shohim qe nuk do te na paraqitet asgje tjeter vec se ni dritare e zeze, per ta shfaqur lojen ose me sakte zogun me gjithe funksionin e hedhjes do te na duhet nje webserver.

Online mund te gjejme shume menyra per te instaluar nje webserver, ne ju sugjerojme te perdorni XAMPP ose mund ta hidhni kodin ne nje share host dhe mund ta aksesoni ate si nje webfaqe.

 


Pengesat 

Ajo qe kemi krijuar deri tani nuk eshte edhe aq interesante por qe te bejme dicka me interesante do na duhet te vendosim pengesa per zogun  dhe per ta bere kete fillimisht e paraqesim pengesen ne preload()

game.load.image(‘pengesa’,’assets/pipe.png’);

Per te krijuar nje grup me pengesa qe do te shfaqen ne loje do ta shfrytezojme funksionin group te Phaser dhe kete do ta vendosim ne create()

this.pengesat = game.add.group();

Per ti shfaqur pengesat ne loje, krijojm nje funksion te ri addOnePipe

addOnePipe:function(x, y){
                  var pengesa = game.add.sprite(x,y,’pengesa’);
                  this.pengesat.add(pengesa);
                  game.physics.arcade.enable(pengesa);
                  pengesa.body.velocity.x = -200;
                  pengesa.checkWorldBounds = true;
                  pengesa.outOfBoundsKill = true;
},

Funksioni I mesiperm na shfaqe nje pengese por ne na duhet te krijojme nje grup me pengesa qe do te kete nje vrim dikundi ne mes per ta krijuar kete perdorim funksionin e meposhtem :

addRowOfPipes:function(){
      var vrima = Math.floor(Math.random()*5)+1;
      for(var i = 0; i < 8; i++){
         if( i != vrima && i != vrima + 1){
            this.addOnePipe(400, i * 60 +10);
}                
}
},

Ne imazhim e meposhtem kemi nje shembull kur vrima eshte 2

 

Qe te krijojme pengesa per cdo 1.5 sekonda ne funksionin create() shkruajm :

this.timer = game.time.events.loop(1500, this.addRowOfPipes, this);

 

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.

Share on Facebook