HTML5 Canvas Game Score

Chapter 4: [Tutorial] How to make scoring system

จาก Chapter 1&2&3 เราจะได้ Background Movement และ Random image ส่วนใน Chapter 4 นี้เราจะมาสร้าง scoring system เพื่อเก็บคะแนน

โดยประกอบไปด้วย 3 ส่วนหลัก

1. Collision between Cat and Plate
2. scoring system
3. UI Scoring

1.Collision between Cat and Plate

ไปที่ Main.js และทำการสร้างฟังก์ชั่น overlab(); เพื่อทำการเช็ค โดยหลักการทำงานของฟังก์ชั่นจะต้องเช็ค การชนกันของสองวัตถุ ซึ่งการชนในที่นี้จะมีโอกาสที่ วัตถุไม่ถูกชนโดยตรง

ดั้งนั้นจึงต้องสร้างเงื่อนไขในการชน

function overlab(a,b){
  if((a.x+a.width >= b.x && b.x+b.width >= a.x) && (a.y+a.height >= b.y && b.y+b.height >= a.y)){
  return true;
 }
 else{
  return false;
 }
}

จากนั้นทำการเรียกใช้ overlab(); เพื่อเป็นเงื่อนไข ในการลบ แมวออกจากเกมเมื่อชนกับ plate นำเงื่อนไขไปใส่ไว้ในฟังก์ชั่น Update และใช้คำสั่ง splice(); ในการลบ

var update = function(dt){
 Plate.update(dt);
time += dt;
 if(time >= 0.7){
  time = 0;
  catsArr.push(new Cat(canvas,Math.floor((Math.random()*(canvas.width-50))) ,-50))
 }
for(var i =0; i < catsArr.length; i++){
  catsArr[i].update(dt);
if(overlab(Plate,catsArr[i])){
   catsArr.splice(i,1);
  }
 }
 canvas.setAttribute('tabindex','0');
 canvas.focus();
};

เมื่อลองรันจะพบว่า ทุกครั้งที่ แมว สัมผัสโดน Plate จะถูกลบออกจากเกม

2. scoring system

ไปที่ Main.js ทำการประกาศตัวแปร Score เพื่อใช้นับคะแนน โดยเราจะ บวกหนึ่งทุกครั้งที่ Plate และ Cat สัมผัสกัน

var score = 0;

จากนั้นให้ไปที่ ฟังก์ชั่น Update ภายใต้เงื่อนไขของการชน ให้เราบวกคะแนนเข้าไปแบบนี้

var update = function(dt){
 Plate.update(dt);
time += dt;
 if(time >= 0.7){
  time = 0;
  catsArr.push(new Cat(canvas,Math.floor((Math.random()*(canvas.width-50))) ,-50))
 }
for(var i =0; i < catsArr.length; i++){
  catsArr[i].update(dt);
if(overlab(Plate,catsArr[i])){
   catsArr.splice(i,1);
   score++;
  }
 }
 canvas.setAttribute('tabindex','0');
 canvas.focus();
};

3. UI Scoring

ขั้นตอนสุดท้ายของการทำ scoring system คือการนำมันมาโชว์บน Scene โดยไปที่ render(); ให้ทำการวาด Text ลงบน Canvas

var render = function(){
 ctx.drawImage(image,0,0,canvas.width,canvas.height); 
 Plate.render();
 for(var i =0; i < catsArr.length; i++){
  catsArr[i].render();  
 }
//SCORE UI
  ctx.font = "30px Tahoma";
  ctx.fillStyle = "White";
  ctx.fillText("score:"+score,50,50);
};

ให้ทำการรัน html เมื่อ แมวสัมผัสโดน Plate คะแนนจะต้อง +1

Chapter 1: Intro and Background

Chapter 2: [Tutorial] How to Move Plate

Chapter 3: [Tutorial] How to random cat

Chapter 4: [Tutorial] How to make scoring system

Chapter 5: [Tutorial] How to make Game Over