
Lab1 Lab2 Lab3 Lab4 Lab5 Lab6 Lab7 Lab8 Lab9 Lab10 Optional
Lab 1
1. Open the following URL using a Web Browser
https://www.w3schools.com/js/tryit.asp?filename=tryjs_editor
2. Replace contents between <body></body> with “Hello World”.
Result:

3. Click the Run Button
4. Congratulations. You have created your very first Web Page.

Lab 2
1. Replace “Hello World” with the following HTML codes.
<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>
</script>
Result:

2. Click the Run Button
3. Congratulations. You have created the various components needed for your game!

Lab 3
1. Paste the following comments within the <script> element. This will help guide you where to place the JavaScripts.
// 1. Variables
// 2. Frame
// 3. Update
// 4. Render
// 5. Start
// 6. Stop
// 7. Mouse Move
// 8. Mouse Click
// 9. Filled Rectangle
// 10. Empty Rectangle
// 11. Filled Circle
// 12. Draw Text
// 13. Draw Fly
// 14. Draw Swatter
// 15. Draw Time Bar
// 16. Random Number
Result:

2. Enter the following codes in “// 5. Start” section inside <script>.
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");
}
Result:

3. Enter the following codes in “// 9. Filled Rectangle” section inside <script>.
function drawFilledRect(x, y, width, height, color){
ctx.fillStyle = color;
ctx.fillRect(x, y, width, height);
}
Result:

4. Enter the following codes in “// 10. Empty Rectangle” section inside <script>.
function drawEmptyRect(x, y, width, height, color){
ctx.strokeStyle = color;
ctx.strokeRect(x, y, width, height);
}
Result:

5. Click the Run Button
6. Click on the Start button in your game
7. Congratulations. You have drawn 2 rectangles.

Lab 4
1. Enter the following codes in “// 5. Start” section inside <script>, at the end of start() function.
drawFilledCircle(100, 100, 20, 0, 2 * Math.PI, false, "gray");
Result:

2. Enter the following codes in “// 11. Filled Circle” section inside <script>.
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();
}
Result:

3. Click the Run Button
4. Click on the Start button in your game
5. Congratulations. You have added a circle.

Lab 5
1. Enter the following codes codes in “// 5. Start” section inside <script>, at the end of start() function.
drawText("Score: ", 10, 300);
drawText("Game Over!", 450, 300);
Result:

2. Enter the following codes codes in “// 12. Draw Text” section inside <script>.
function drawText(text,x,y){
ctx.fillStyle = "black";
ctx.font = "30px fantasy";
ctx.fillText(text, x, y);
}
Result:

3. Click the Run Button
4. Click on the Start button in your game
5. Congratulations. You have added 2 text.

Lab 6
1. Enter the following codes codes in “// 5. Start” section inside <script>, at the end of start() function.
drawFly(250, 150);
drawSwatter(300, 150);
drawTimeBar(300);
Result:

2. Enter the following codes in “// 13. Draw Fly” section inside <script>.
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");
}
Result:

3. Enter the following codes in “// 14. Draw Swatter” section inside <script>.
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");
}
Result:

4. Enter the following codes in “// 15. Draw Time Bar” section inside <script>.
function drawTimeBar(t){
ctx.fillStyle = "red";
ctx.fillRect(0, 0, t, 10);
}
Result:

5. Click the Run Button
6. Click on the Start button in your game
7. Congratulations. You have added a swatter, a fly and a time bar.

Lab 7
1. Enter the following codes in “// 1. Variables” section inside <script>.
var loopid;
var timer;
var timeout = 600;
Result:

2. Enter the following codes in “// 2. Frame” section inside <script>.
function frame(){
update();
render();
}
Result:

3. Enter the following codes in “// 3. Update” section inside <script>.
function update(){
//increase timer every frame
timer = timer + 1;
}
Result:

4. Enter the following codes in “// 4. Render” section inside <script>.
function render(){
// clear the canvas
drawFilledRect(0, 0, 600, 300, "white");
// display Time Bar
drawTimeBar(timer);
}
Result:

5. Replace “//Temporary, to be removed” contents of the start function (// 5. Start) with the following code
Result:

6. Click the Run Button
7. Click on the Start button in your game
8. Congratulations. You have animated your time bar.

Lab 8
1. Enter the following codes at the end of “// 1. Variables” section inside <script>.
var mouse_X, mouse_Y;
Result:

2. Enter the following codes after // display Time Bar in Render() function (// 4. Render).
// display Swatter
drawSwatter(mouse_X, mouse_Y);
Result:

3. Enter the following codes between code for // reset and // run frame every 50m s in start() function (// 5. Start).
// add mouse listeners
canvas.addEventListener("mousemove", onMouseMove, false);
Result:

4. Enter the following codes in “// 7. Mouse Move” section inside <script>.
function onMouseMove(e) {
mouse_X = e.clientX;
mouse_Y = e.clientY;
}
Result:

6. Click the Run Button
7. Click on the Start button in your game
8. Congratulations. You have added a swatter that follows your cursor.

Lab 9
1. Enter the following codes at the end of “// 1. Variables” section inside <script>.
var fly_X, fly_Y;
var flyTimer;
var flyTimeout = 15;
Result:

2. Enter the following codes at the end of “// 3. Update” section inside <script>.
//random fly position
if (flyTimer >= flyTimeout)
{
//reset random fly position
fly_X = getRandomInt(600);
fly_Y = getRandomInt(300);
//reset flyTimer
flyTimer = 0;
}else{
//increase flyTimer every frame
flyTimer = flyTimer + 1;
}
Result:

3. Enter the following codes at the end of render function (// 4. Render) section inside <script>.
// display fly
drawFly(fly_X , fly_Y);
Result:

4. Enter the following codes before “// add mouse listeners” in start function (// 5. Start) section inside <script>.
flyTimer = 0;
Result:

5. Enter the following codes in “// 16. Random Number” section inside <script>.
function getRandomInt(max) {
return Math.floor(Math.random() * max);
}
Result:

6. Click the Run Button
7. Click on the Start button in your game
8. Congratulations. You have added a random fly.

Lab 10
1. Enter the following codes at the end of “// 1. Variables” section inside <script>.
var hit=false;
var score;
Result:

2. Enter the following codes before “//random fly position” in update function (// 3. Update) inside <script>.
// check if it is a hit
if (hit == true){
score = score + 1;
}
Result:

3. Replace if (flyTimer >= flyTimeout) in update function (// 3. Update) inside <script> with the following codes
if ((flyTimer >= flyTimeout) || (hit == true))
Result:

4. Enter the following codes at the end of render function (// 4. Render) section inside <script>.
// 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();
}
Result:

5. Enter the following codes before “// add mouse listeners” in start function (// 5. Start) section inside <script>.
score = 0;
Result:

6. Enter the following codes before “// Run fame every 50 ms” in start function (// 5. Start) section inside <script>.
canvas.addEventListener("click", onMouseClick, false);
Result:

7. Enter the following codes in “6. Stop” section inside <script>.
function stop(){
clearInterval(loopid);
}
Result:

8. Enter the following codes in “// 8. Mouse Click” section inside <script>
function onMouseClick(e) {
absX= Math.abs(fly_X - mouse_X);
absY= Math.abs(fly_Y - mouse_Y);
if ((absX <= 20) && (absY <= 20)){
hit = true;
}
}
Result:

9. Click the Run Button
10. Click on the Start button in your game
11. Congratulations. You have created your very own Swat the Fly game!

Optional
- Highlight all the codes you have typed in the Tryit Editor, Right click your mouse and select Copy.

2. Open notepad.

3. Paste contents into notepad.

4. Click File -> Save As…

5. Save as filename “MyFirstGame.html” and select Save as Type : All Files (*.*)

6. Locate the file and you can copy and share it with you friends. Simple double click on it to run the game!
