HTML5 Canvas Game Over

Chapter 5: [Tutorial] How to make Game Over

จาก Chapter 1&2&3&4 เราจะได้ Background, Plate, Random Cat, scoring system ส่วนใน Chapter 5 ซึ่งจะเป็น Chapter สุดท้ายก็คือการทำ Game Over

โดยเงื่อนไขของ Game Over คือ เมื่อ Plate ไม่สามาถรับ แมวได้ จะทำให้ Game Over ทันที ซึ่ง เกมจะต้องหยุด และมีคำว่า “GAME OVER” แสดงอยู่บนหน้าจอ

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

var gameOver = false;

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

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

ขึ้นมาไว้ใน ฟังก์ชั่น 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++;
  }
  if(catsArr[i].y >= canvas.height){
    gameOver = true;
  }
 }
 canvas.setAttribute('tabindex','0');
 canvas.focus();
};

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

var update = function(dt){
 Plate.update(dt);
 if(!gameOver){
     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++;
      }
      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 UI
  ctx.font = "30px Tahoma";
  ctx.fillStyle = "White";
  ctx.fillText("score:"+score,50,50);
//GAME OVER UI
  if(gameOver){
   console.log("asma");
  ctx.font = "50px Tahoma";
  ctx.textAlign = "center";
  ctx.textBaseline = "middle";
  ctx.fillStyle = "White";
  ctx.fillText("GAME OVER",canvas.width/2,canvas.height/2);
  }
};

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

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