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. Draw Text
// 11. Draw Fly
// 12. Draw Swatter
// 13. Draw Time Bar
// 14. 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");
}
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. Click the Run Button
5. Click on the Start button in your game 
6. Congratulations. You have drawn a red rectangle.
Lab 4
1. Enter the following 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 in “// 10. 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 5
1. Enter the following codes codes in “// 1. Variables” section inside <script>
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";Result:
2. Enter the following codes codes in “// 5. Start” section inside <script>, at the end of start() function.
ctx.drawImage(fly_img, 200,150);
ctx.drawImage(swat_img, 300,150);
Result
3. Click the Run Button
4. Click on the Start button in your game
5. Congratulations. You have added a fly and a swatter.
Lab 6
1. Enter the following codes in “// 1. Variables” section inside <script>.
var loopid;
var timer = 0;
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);
//if time ran out
if (timer >= timeout){
drawText("Game Over!",450,300);
stop();
}
}Result:
5. Replace contents of the start function (// 5. Start) with the following code
// 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);
}Result:
6. Enter the following codes in “// 6. Stop” section inside <script>
function stop(){
clearInterval(loopid);
}Result:
7. Enter the following codes in “// 13. Draw Time Bar” section inside <script>
function drawTimeBar(t){
ctx.fillStyle = "red";
ctx.fillRect(0, 0, t, 10);
}Result:
8. Click the Run Button
9. Click on the Start button in your game
10. Congratulations. You have animated your time bar.
Lab 7
1. Enter the following codes in “// 1. Variables” section inside <script>.
var mouse_X, mouse_Y;Result:
2. Enter the following codes in “// 4. Render” section inside <script>.
// display Swatter
drawSwatter(mouse_X, mouse_Y);Result:
3. Enter the following codes in “// 5. Start” section inside <script>.
// 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:
5. Enter the following codes in “// 12. Draw Swatter” section inside <script>
function drawSwatter(x, y){
ctx.drawImage(swat_img, x-20,y-20);
}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 8
1. Enter the following codes at the end of “// 1. Variables” section inside <script>.
var fly_X, fly_Y;
var flyTimer = 0;
var flyTimeout = 15;
Result:
2. Enter the following codes at the end of “// 3. Update” in <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 in “// 4. Render” section inside <script>.
// display fly
drawFly(fly_X , fly_Y);Result:
4. Enter the following codes in “// 11. Draw Fly” section inside <script>
function drawFly(x, y){
ctx.drawImage(fly_img, x-10,y-10);
}Result:
5. Enter the following codes in “// 14. 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 9
1. Enter the following codes at the end of “// 1. Variables” section inside <script>.
var hit=false;
var score = 0;Result:
2. Enter the following codes at the end of “// 3. Update” section inside <script>.
// check if it is a hit
if (hit == true){
score = score + 1;
hit = false;
} Result:
3. Enter the following codes at the end of render function (// 4. Render) section inside <script>.
// display score
drawText("Score : " + score,10,300);
Result:
4. Enter the following codes in start function (// 5. Start) section inside <script>.
//reset
timer = 0;
flyTimer = 0;
score = 0; canvas.addEventListener("click", onMouseClick, false);Result:
5. 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:
6. Click the Run Button
7. Click on the Start button in your game
8. Congratulations. You can now hit the fly and score.
Lab 10
1. Remove “hit = false;” from “// 3. Update” section inside <script>.
Add ” || (hit == true) ” after “(flyTimer >= flyTimeout)” in “// 3. Update” section inside <script>
|| (hit == true)Result:
2. Enter the following codes in “// 4. Render” section inside <script>.
// if hit, paint the whole screen red
if (hit == true){
drawFilledRect(0, 0, 600, 300, "red");
hit = false;
}Result:
3. Click the Run Button
4. Click on the Start button in your game
5. 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!
