Lab 6 – Lifeline
<!DOCTYPE html>
<html lang="en">
<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');
//Temporary, to be removed
drawFilledRect(20, 30, 40, 50, "red");
drawEmptyRect(70, 30, 50, 40, "black");
drawFilledCircle(100, 100, 20, 0, 2 * Math.PI, false, "gray");
drawText("Score: ", 10, 300);
drawText("Game Over!", 450, 300);
drawFly(250, 150);
drawSwatter(300, 150);
drawTimeBar(300);
}
// 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. Empty Rectangle
function drawEmptyRect(x, y, width, height, color){
ctx.strokeStyle = color;
ctx.strokeRect(x, y, width, height);
}
// 11. Filled Circle
function drawFilledCircle(x, y, radius, startAngle, endAngle, CounterClockwise, color){
ctx.fillStyle = color;
ctx.beginPath();
ctx.arc(x, y, radius, startAngle, endAngle, CounterClockwise);
ctx.closePath();
ctx.fill();
}
// 12. Draw Text
function drawText(text,x,y){
ctx.fillStyle = "black";
ctx.font = "30px fantasy";
ctx.fillText(text, x, y);
}
// 13. Draw Fly
function drawFly(x, y){
drawFilledCircle(x, y, 8, 0, 2 * Math.PI, false, "black")
drawFilledCircle(x-10, y-10, 10, 0, 2 * Math.PI, false, "gray");
drawFilledCircle(x+10, y-10, 10, 0, 2 * Math.PI, false, "gray");
}
// 14. Draw Swatter
function drawSwatter(x, y){
drawEmptyRect(x, y, 20, 20, "black");
drawEmptyRect(x-20, y, 20, 20, "black");
drawEmptyRect(x, y-20, 20, 20, "black");
drawEmptyRect(x-20, y-20, 20, 20, "black");
drawFilledRect(x - 5, y + 23, 10, 15, "gray");
}
// 15. Draw Time Bar
function drawTimeBar(t){
ctx.fillStyle = "red";
ctx.fillRect(0, 0, t, 10);
}
// 16. Random Number
</script>
</body>
</html>
