
Lab 3 – 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
// 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");
}
// 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
// 11. Draw Fly
// 12. Draw Swatter
// 13. Draw Time Bar
// 14. Random Number
</script>
</body>
</html>