Coding is Easy!

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

Go to Top          Help

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

Go to Top          Help

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

Go to Top          Help

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

Go to Top          Help

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

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 = 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

Go to Top          Help

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

Go to Top          Help

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

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!