Coding is Easy! – Lab 10 Help

Lab 10 – Lifeline (Complete Code)
<!DOCTYPE html>
<html>
<body>

<canvas id="gameCanvas" width="600" height="300" style="border-style: solid; border-width: 2px; border-color: black;"></canvas>

<p>
  <button id="startBtn" onclick="start()">Start</button>
</p>

<h1>
  My First Game
</h1>


<script>

// 1. Variables
var loopid;
var timer = 0;
var timeout = 600;
var mouse_X, mouse_Y;
var fly_X, fly_Y;
var flyTimer = 0;
var flyTimeout = 15;
var hit=false;
var score = 0;
var fly_img = new Image;
fly_img.src = "https://icode.sg/wp-content/uploads/2021/04/fly.png";
var swat_img = new Image;
swat_img.src = "https://icode.sg/wp-content/uploads/2021/04/swat.png";


// 2. Frame
function frame(){
  update();
  render();
}

// 3. Update 
function update(){
  //increase timer every frame
  timer = timer + 1;

  // check if it is a hit
  if (hit == true){
    score = score + 1;
  }   

  //random fly position
  if ((flyTimer >= flyTimeout) || (hit == true))
  {
     //reset random fly position
     fly_X = getRandomInt(600);
     fly_Y = getRandomInt(300);
     //reset flyTimer
     flyTimer = 0;
   }else{
     //increase flyTimer every frame
     flyTimer = flyTimer + 1;
   }
}

// 4. Render
function render(){
  // clear the canvas
  drawFilledRect(0, 0, 600, 300, "white");
  // display Time Bar
  drawTimeBar(timer);
  // display Swatter
  drawSwatter(mouse_X, mouse_Y);
  // display fly
  drawFly(fly_X , fly_Y);
  // display score
  drawText("Score : " + score,10,300);
  
  
  // if hit, paint the whole screen red
  if (hit == true){
    drawFilledRect(0, 0, 600, 300, "red"); 
    hit = false;
  }

  //if time ran out 
  if (timer >= timeout){
    drawText("Game Over!",450,300);
    stop();
  }
}

// 5. Start
function start(){
  //Prevent multiple loops
  if (loopid != null){
    stop();
  }

  // where to draw
  canvas = document.getElementById("gameCanvas");
  ctx = canvas.getContext('2d');

  //reset
  timer = 0;
  flyTimer = 0;
  score = 0;
  
  // add mouse listeners
  canvas.addEventListener("mousemove", onMouseMove, false);
  canvas.addEventListener("click", onMouseClick, false);
  
  // Run fame every 50 ms
  loopid = setInterval(frame,50);
}

// 6. Stop 
function stop(){
  clearInterval(loopid);
}

// 7. Mouse Move
function onMouseMove(e) {
  mouse_X = e.clientX; 
  mouse_Y = e.clientY; 
}

// 8. Mouse Click
function onMouseClick(e) {
 absX= Math.abs(fly_X - mouse_X);
 absY= Math.abs(fly_Y - mouse_Y);
 if ((absX <= 20) && (absY <= 20)){
     hit = true;
 }
}

// 9. Filled Rectangle
function drawFilledRect(x, y, width, height, color){
  ctx.fillStyle = color;
  ctx.fillRect(x, y, width, height);
}

// 10. Draw Text
function drawText(text,x,y){
  ctx.fillStyle = "black";
  ctx.font = "30px fantasy";
  ctx.fillText(text, x, y);
}

// 11. Draw Fly
function drawFly(x, y){
  ctx.drawImage(fly_img, x-10,y-10);
}

// 12. Draw Swatter
function drawSwatter(x, y){
  ctx.drawImage(swat_img, x-20,y-20);
}

// 13. Draw Time Bar
function drawTimeBar(t){
  ctx.fillStyle = "red";
  ctx.fillRect(0, 0, t, 10);
}

// 14. Random Number
function getRandomInt(max) {
  return Math.floor(Math.random() * max);
}

</script>

</body>
</html>
Share this:
