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

บทนำ (Overviews)

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

ขั้นตอน (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

ใส่ความเห็น