How to create Flappy Bird (Part 5) – Scoring and Overlapping

บทนำ (Overview)

ความเดิม เราสามารถสร้างท่อให้นกกระโดดข้าม ได้แล้ว (How to create Flappy Bird (Part 4) – Create pipes) มาคราวนี้เราจะสร้างการนับคะแนนกันเมื่อมีท่อใหม่สร้างขึ้นมา และให้มีการเริ่มเกมใหม่เมื่อมีการชนกันระหว่างนกกับท่อ flappy18

ขั้นตอน (Steps)

  1. สร้างตัวแปรและข้อความสำหรับนับคะแนน ไว้ใน “create: function()”
           this.score = 0;
           this.labelScore = game.add.text(20, 20, "0", { font: "30px Arial", fill: "#ffffff" });
    
  2. ให้โปรแกรมสามารถนับคะแนนที่ละหนึ่งได้เมื่อมีการสร้างท่อใหม่ขึ้นมา
        addLongPipes: function() {        
    
         var blank = Math.floor(Math.random() * 5) + 1;
         for (var i = 0; i < 8; i++){
           	if (i != blank && i != blank + 1){
           		this.addShotPipe(400, (i * 60) + 10);
           	}
         } 
    
         this.score += 1;
         this.labelScore.text = this.score; 
    
        }
    

    flappy10

  3. จากโปรแกรมข้างต้นเห็นว่าสามารถเริ่มนับแต้มได้แล้วแต่ตัว “bird” กับ “pipes” ยังสามารถชนกันได้ เราจะแก้ไขส่วนนี้ ให้เมื่อชนกันแล้วเริ่มต้น “game” ใหม่อีกครั้ง
        update: function() {
          //สร้าง physics เมื่อเกิดการซ้อนทับกันให้เรียกฟังก์ชัน restartgame()
          game.physics.arcade.overlap(this.bird, this.pipes, this.restartGame, null, this);
    
          if (this.bird.inWorld == false){
            	this.restartGame();
          }
    
        },
    
  4. สามารถดาวน์โหลด source-code ของบทความนี้ได้ที่ https://gist.github.com/thaisingle/ee139c358554ad74a809

ใส่ความเห็น