Lab 6 – 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 loopid;
var timer = 0;
var timeout = 600;
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
function frame(){
update();
render();
}
// 3. Update
function update(){
//increase timer every frame
timer = timer + 1;
}
// 4. Render
function render(){
// clear the canvas
drawFilledRect(0, 0, 600, 300, "white");
// display Time Bar
drawTimeBar(timer);
//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;
// Run frame every 50 ms
loopid = setInterval(frame,50);
}
// 6. Stop
function stop(){
clearInterval(loopid);
}
// 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
function drawTimeBar(t){
ctx.fillStyle = "red";
ctx.fillRect(0, 0, t, 10);
}
// 14. Random Number
</script>
</body>
</html>
icode 