Coding is Fun!

Lab1 Lab2 Lab3 Lab4 Lab5 Lab6 Lab7 Lab8 Lab9 Lab10 Optional

NYP SIT Coding is Fun Slides Download

Lab 1

Go to Top

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

Go to Top

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

Go to Top Help

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

Go to Top Help

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

Go to Top Help

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

Go to Top Help

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

Go to Top Help

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

Go to Top Help

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

Go to Top Help

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

Go to Top Help

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: