HTML5 Canvas游戏得分

กาก第1＆2＆3章背景运动จะได้随机图像ส่วนใน第4章นี้เราจะมาสร้าง评分系统เพื่อเก็บคะแนน

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

• 古墓丽影-原产地
• Sonic系列：Sonic 3和指关节
• 一个神秘的应用
• 在线磨练您的令人困惑的技能。
• 游戏新闻：PS5是否已被索尼“确认”并于2019年发布？

1. 猫与板之间的碰撞
2. 计分系统
3. UI评分

1.猫和盘子之间的碰撞

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

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

 函数overlab（a，b）{ 
  if（（（a.x + a.width> = bx && b.x + b.width> = ax）&&（a.y + a.height> = by && b.y + b.height> = ay）） { 
 返回true； 
  } 
 其他{ 
 返回false； 
  } 
  } 

labากนั้นทำการเรียกใช้overlab（）; กับอเป็นเงื่อนไขในการลบแมวออกจากเกมเมื่อชนกับplateนำเงื่อนไขไปใส่ไว้ในฟังก์ชั่น更新และใช้คำสั่งsplice（）;。 ในการลบ

  var update = function（dt）{ 
  Plate.update（dt）;时间+ = dt; 
  if（时间> = 0.7）{ 
 时间= 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อลองรันจะพบว่าทุกครั้งที่PlateนPlateจะถูกลบออกจากเกม

2.计分系统

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

  var score = 0; 

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

  var update = function（dt）{ 
  Plate.update（dt）;时间+ = dt; 
  if（时间> = 0.7）{ 
 时间= 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（）; 
  }; 

3. UI计分

评分系统SceneอSceneารนำมันมาโชว์บนSceneโดยไปที่render（）; ดารวาด文字ลงบน帆布

  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用户界面 
  ctx.font =“ 30px Tahoma”; 
  ctx.fillStyle =“白色”; 
  ctx.fillText（“ score：” + score，50,50）;}; 

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