HTML5画布游戏结束

ก第1＆2＆3＆4章背景，盘子，随机猫，计分系统ส่วนใน第5章ซึ่งจะเป็นสุดท้ายก็คือการทำGame Over

งเงื่Plate Plate Plate““““““““““““

• 关于罗马神哈克和秘籍–生存狩猎技巧–中
• 《 FF XIV》魔兽贝希摩斯现身《 Monster Hunter：World》
• 艾哈迈达巴德的前5个游戏区
• Unity：动画师
• 追求完美，不。 但是100％接受您的风格。 观看纽约芭蕾舞团的经验教训。

ไปที่Main.jsประกาศตัวแปร

  var gameOver = false; 

OverอนไขของGame Overคือเมื่อแมวตกลงนอกฉากของเกมได้ดั้งนั้นให้ทำการสร้างเงื่อนไข

  if（catsArr [i] .y> = canvas.height）{ 
  gameOver = true; 
  } 

Updateนมาไว้ในฟังก์ชั่น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）; 
 分数++; 
  } 
  if（catsArr [i] .y> = canvas.height）{ 
  gameOver = true; 
  } 
  } 
  canvas.setAttribute（'tabindex'，'0'）; 
  canvas.focus（）; 
  }; 

Overากนั้นให้ทำการสร้างเงื่อนไขเมื่อGame Overมีค่าเป็นTrueเกมจะต้องหยุดการทำงาน

  var update = function（dt）{ 
  Plate.update（dt）; 
  if（！gameOver）{ 
 时间+ = 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）; 
 分数++; 
  } 
  if（catsArr [i] .y> = canvas.height）{ 
  gameOver = true; 
  } 
  } 
  } 
  canvas.setAttribute（'tabindex'，'0'）; 
  canvas.focus（）; 
  }; 

ำนมอนต่อไปคือการนำTextมาแสดงบนหน้าจอฟังก์ชั่นrender（）; ดรียกใช้การวาดcanvasเมื่อGame Overมีค่าเป็นTrue

  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）; // GAME OVER UI 
  if（gameOver）{ 
  console.log（“ asma”）; 
  ctx.font =“ 50px Tahoma”; 
  ctx.textAlign =“中心”; 
  ctx.textBaseline =“中间”; 
  ctx.fillStyle =“白色”; 
  ctx.fillText（“游戏结束”，canvas.width / 2，canvas.height / 2）; 
  } 
  }; 

ากนั้นทำการทดสอบรันhtmlจะต้องได้แบบนี้