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 ส่วนหลัก
- Collision between Cat and Plate
- scoring system
- 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