How to create Flappy Bird (Part 7) – Dead animation

บทนำ (Overviews)

คราวที่แล้วเราสามารถกำหนดจุดหมุนให้นกสามารถเงยหน้าเวลาบินขึ้นและก้มหน้าเวลาบินโฉบลง (How to create Flappy Bird (Part 6) – Flappy) ในตอนนี้เราจะทำให้เกมส์ของเราหยุดและนกก็ล่วงลงมา ก่อนที่จะเริ่มเกมส์ใหม่อีกครั้งเพื่อเพิ่มสีสันต์ให้กับเกมส์นั้นเอง

ขั้นตอน (Steps)

1. มาถึงตอนนี้ เมื่อเราลองเล่นเกมส์และเวลาตัวเราชนกับท่อจะพบว่า เริ่มเกมส์ใหม่ทันที เนื่องจากได้เขียน “game.physics.arcade.overlap(this.bird, this.pipes, this.restartGame, null, this);” ไว้ในส่วนของ “update: function()”
2. เพื่อเพิ่มความสมจริงเมื่อ “bird” ชน “pipes” แล้วให้ pipes หยุดและ “bird” ไหลหล่นไปก่อนเริ่มต้นเกมส์ใหม่ เขียนฟังก์ชันใหม่และเรียกใช้แทน “code” ข้างต้น game.physics.arcade.overlap(this.bird, this.pipes, this.overlapPipe, null, this);

   overlapPipe: function() {
      // หยุดการใช้งาน Timer ที่ตั้งค่าเอาไว้
      game.time.events.remove(this.timer);
   
      // วน pipe ใน group ของ pipes เพื่อให้หยุดไม่เคลื่อนไหว
      this.pipes.forEachAlive(function(p){
       p.body.velocity.x = 0;
       }, this);
   }
   

3. จากนั้นตรวจสอบเมื่อมีการชนจะไม่สามารถบินขึ้นได้อีก

       jump: function() {
           //ตรวจสอบ bird ตายหรือยัง ถ้า false จะออกจากฟังก์ชันนี้ทันที
           if (this.bird.alive == false) {
             return;
           }
   
           //ถ้ายังไม่ตายสามารถบินขึ้นได้
       	this.bird.body.velocity.y = -350;
           var animation = game.add.tween(this.bird);
           animation.to({angle: -20}, 100);
           animation.start();
       }
   

4. ในส่วนของ “overlapPipe: function()” เราจะเพิ่มตัวแปรไว้จำว่ามีการชนกันระหว่าง “bird” และ “pipes” แล้ว “this.bird.alive = false;”
5. สามารถดาวน์โหลด source-code ได้จาก https://gist.github.com/thaisingle/cb6944833e399ed13ca6