Coding is Easy! – Lab 5 Help

Lab 5 – Lifeline
<!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 fly_img = new Image;
fly_img.src = "https://icode2019posbchallenge.files.wordpress.com/2021/04/fly.png";
var swat_img = new Image;
swat_img.src = "https://icode2019posbchallenge.files.wordpress.com/2021/04/swat.png";

// 2. Frame

// 3. Update 

// 4. Render

// 5. Start
function start(){
  // where to draw
  canvas = document.getElementById("gameCanvas");
  ctx = canvas.getContext('2d');

  drawFilledRect(20, 30, 40, 50, "red");
  drawText("Score: ",10,300);
  drawText("Game Over!",450,300);
  ctx.drawImage(fly_img, 200,150);
  ctx.drawImage(swat_img, 300,150);
}

// 6. Stop 

// 7. Mouse Move

// 8. Mouse Click

// 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

// 12. Draw Swatter

// 13. Draw Time Bar

// 14. Random Number

</script>


</body>
</html>
Share this:

Like this:
