Coding is Fun!

Lab1     Lab2     Lab3     Lab4     Lab5     Lab6     Lab7     Lab8     Lab9     Lab10     Optional

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:

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

Go to Top

  1. 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!