Have Fun with Coding!

Lab1 Lab2 Lab3 Lab4 Lab5 Lab6 Lab7 Lab8 Lab9 Lab10 Challenge

have-fun-with-coding-v2 Download

Lab 1

Go to Top __________ Help

1. Open the following URL using a Web Browser

https://www.w3schools.com/js/tryit.asp?filename=tryjs_editor

2. Replace contents between <html></html> with the following codes.

<body style="text-align: center; font-family:Arial">

Hello World!

<h1>
 Header 1
</h1>

<h2>
 Header 2
</h2>

</body>

Result:

3. Click the Run Button

4. Congratulations. You have created your very first Web Page.

Go to Top

Lab 2

Go to Top __________ Help

1. Replace contents from “Hello World! … ” to ” … </h2>” with the following HTML codes.

<h1>
  My Snake Game
</h1>

<canvas id="gameCanvas" width="400" height="400"></canvas>

<h2 id="scoreBoard">
  Score = 0
</h2>

  Start Game by moving snake using Arrow Keys.
  <br>
  ! ! ! Be careful not to hit the wall ! ! !

<script>
</script>

Result:

2. Click the Run Button

3. Congratulations. You have created the various components needed for your game!

Go to Top

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

// 3. Start Game

// 4. Frame

// 5. Draw Text

// 6. Draw Rect

// 7. Draw Snake

// 8. Draw Rat

// 9. Get Random

// 10. Move Rat

// 11. Check Hit Border

// 12. Check Caught Rat

// 13. Lose

// 14. Key Press

// 15. Sound Function

// 16. Change Speed 

// 17. Check Bit Self (Challenge)

Result:

2. In “// 1. Variables” section inside <script>, enter the following codes.

var snakeX = 200; 
var snakeY = 200;
var ratX = 300;
var ratY = 300;
var msg = "Press any arrow key to start!";
var msgPrevScore = "Your Score was X";

Result:

3. In “// 2. On Load” section inside <script>, enter the following codes.

window.onload=function() {
  // Define Canvas
  canvas = document.getElementById("gameCanvas");
  ctx = canvas.getContext("2d");
  
  // Draw
  drawRect(0, 0, canvas.width, canvas.height, "black");  
  drawRect(snakeX, snakeY, 18, 18, "lime");
  drawRect(ratX, ratY, 18, 18, "red");
  drawText(msg, 70,100);
  drawText(msgPrevScore, 20,380);
}

Result:

4. In “// 5. Draw Text” section inside <script>, enter the following codes.

function drawText(text, x, y){
  ctx.fillStyle = "white";
  ctx.font = "20px Arial";
  ctx.fillText(text, x, y);
}

Result:

5. In “// 6. Draw Rect” section inside <script>, enter the following codes.

function drawRect(x, y, width, height, colour){
  ctx.fillStyle = colour;
  ctx.fillRect(x, y, width, height);
}

Result:

6. Click the Run Button

7. Congratulations. You have added text and squares in your canvas.

Go to Top

Lab 4

Go to Top __________ Help

1. In “// 1. Variables” section inside <script>, enter the following codes.

var moveX = 20; //to change later
var moveY = 0;
var loopid = null;
var frameInterval = 200;

Result:

2. In “// 2. On Load” section inside <script>, replace codes after “// Draw” with the following codes.

  // Start Game
  startGame();

Result:

3. In “// 3. Start Game” section inside <script>, enter the following codes.

function startGame(){
  loopid = setInterval(frame,frameInterval);
}

Result:

4. Enter the following codes in “// 4. Frame” section inside <script>.

function frame() {
  ////////////
  // Change //
  ////////////

  snakeX = snakeX + moveX;
  snakeY = snakeY + moveY;

  ////////////
  // Render //
  ////////////

  // Clear
  drawRect(0, 0, canvas.width, canvas.height, "black")
  
  // Draw
  drawRect(snakeX, snakeY, 18, 18, "lime")
  drawRect(ratX, ratY, 18, 18, "red")
}

Result:

5. Click the Run Button

6. Congratulations. You have animated your snake.

Go to Top

Lab 5

Go to Top __________ Help

1. In “// 1. Variables” section, replace “var moveX = 20; //to change later” with “var moveX = 0;”.

var moveX = 0;

Result:

2. In “// 2. On Load” section inside <script>, enter the following codes before “// Start game”.

  // Add Keypress Listener
  document.addEventListener("keydown", keyPress);

Result:

3. In “// 14. Key Press” section inside <script>, enter the following codes.

function keyPress(evt) {
  switch(evt.keyCode) {
    case 37:
      // Left
      moveX = -20;
      moveY = 0;
      break;
    case 39:
      // Right
      moveX = 20;
      moveY = 0;
      break;
    case 38:
      // Up
      moveX = 0;
      moveY = -20;
      break;
    case 40:
      // Down
      moveX = 0;
      moveY = 20;
      break;
  }
}

Result:

4. Click the Run Button

5. Congratulations. You have added key control of your snake.

Go to Top

Lab 6

Go to Top __________ Help

1. In “// 1. Variables” section inside <script>, add the following codes .

var score = 0;

Result:

2. In “// 4. Frame” section inside <script>, add the following codes after “snakeY = snakeY + moveY;”.

  // Snake caught rat?
  checkCaughtRat();

Result:

3. In “// 9. Get Random” section inside <script>, enter the following codes.

function getRandom(num){
  // Returns a random integer from 0 to num*20
  return (Math.floor(Math.random() * num) * 20);
}

Result:

4. In “// 10. Move Rat” section inside <script>, add the following codes .

function moveRat(){
  ratX=getRandom(20);
  ratY=getRandom(20);
}

Result:

5. In “// 12. Check Caught Rat” section inside <script>, enter the following codes.

function checkCaughtRat(){

  if(ratX==snakeX && ratY==snakeY) {

    // Add to Score & Display score
    score++;
    document.getElementById("scoreBoard").innerHTML = "Score : " + score;
    
    // Move rat
    moveRat();
  }
}

Result:

6. Congratulations. You have caught the mouse.

Go to Top

Lab 7

Go to Top __________ Help

1. In “// 1. Variables” section inside <script>, Replace var msgPrevScore = “Your Score was X”; with var msgPrevScore = “”;.

var msgPrevScore = "";

Result:

2. Add in “// 4. Frame” section inside <script> before “// Snake caught rat?”.

  // hit border?
  checkHitBorder();

Result:

3. In “// 4. Frame” section inside <script>, add the following codes after “// Clear”.

  // show message at start of game
  if ((moveX == 0) && (moveY == 0)){
    drawText(msg, 80,100);
    drawText(msgPrevScore, 20,380);
  }

Result:

4. In “// 11. Check Hit Border” section inside <script>, enter the following codes.

function checkHitBorder(){
  if((snakeX < 0) || (snakeX > canvas.width - 20) || (snakeY < 0) || (snakeY > canvas.height -20)) {
    lose();
  }
}

Result:

5. In “// 13. Lose” section inside <script>. Enter the following codes .

function lose(){
  // record previous Score
  msgPrevScore = "Your score was " + score;

  // reset
  snakeX = 200; 
  snakeY = 200;
  ratX = 300;
  ratY = 300;
  moveX = 0;
  moveY = 0;
  score = 0;

  //Reset Score to 0
  document.getElementById("scoreBoard").innerHTML = "Score : " + score ;
}

Result:

6. Congratulations. You have added detection of snake hitting the wall.

Go to Top

Lab 8

Go to Top __________ Help

1. In “// 1. Variables” section inside <script>, add the following codes.

var trail=[];
var snakeLength = 5;

Result:

2. In “// 4. Frame” section inside <script>, replace codes after “// Draw” with the following codes .

  // draw snake
  drawSnake();
 
  // draw rat
  drawRat();

Result:

3. In “// 7. Draw Snake” section inside <script>, Enter the following codes.

function drawSnake(){
  //add position of new head of snake trail
  trail.push({x:snakeX, y:snakeY});

  //remove trail at end of tail 
  if (trail.length > snakeLength) {
    trail.shift();
  }

  //draw snake
  for(var i = 0; i < trail.length; i++) {
    drawRect(trail[i].x, trail[i].y, 18, 18, "lime")
  }
}

Result:

4. In “// 8. Draw Rat” section inside <script>, Enter the following codes.

function drawRat(){
  drawRect(ratX, ratY, 18, 18, "red")
}

Result:

5. In “// 12. Check Caught Rat” section inside <script>, Add the following codes before score++.

    //Add length
    snakeLength++;

Result:

6. In “// 13. Lose” section inside <script>, add the following codes before //Reset Score to 0.

  trail=[];
  snakeLength = 5;

Result:

7. Congratulations. You have animated the snake.

Go to Top

Lab 9

Go to Top __________ Help

1. In “// 1. Variables” section inside <script>, Add the following codes .

var winSound = new sound("https://icode2019posbchallenge.files.wordpress.com/2021/08/score.wav");
var loseSound = new sound("https://icode2019posbchallenge.files.wordpress.com/2021/08/dead.wav");

Result:

2. In “// 12. Check Caught Rat” section inside <script>, add the following codes.

    //play win sound
    winSound.play();

Result:

3. Enter the following codes in “// 13. Lose” section inside <script>.

  //play lose sound
  loseSound.play();

Result:

4. In “// 15. Sound Function” section inside <script>, Enter the following codes.

function sound(src) {
  this.sound = document.createElement("audio");
  this.sound.src = src;
  this.sound.setAttribute("preload", "auto");
  this.sound.setAttribute("controls", "none");
  this.sound.style.display = "none";
  document.body.appendChild(this.sound);
  this.play = function(){
    this.sound.play();
  }
  this.stop = function(){
    this.sound.pause();
  }  
}

Result:

5. Congratulations. You have added sounds to your games.

Go to Top

Lab 10

Go to Top __________ Help

1. In “// 1. Variables” section inside <script>, Add the following codes.

var intervalChange = 10;

Result:

2. In “// 12. Check Caught Rat” section inside <script>. Enter the following codes before //Move Rat.

    // Increase game speed
    if (frameInterval >= 80){
      frameInterval = frameInterval - intervalChange;
      changeSpeed();
    }

Result:

3. In “// 16. Change Speed” section inside <script>, Enter the following codes.

function changeSpeed(){
  clearInterval(loopid);
  loopid = setInterval(frame, frameInterval);
}

Results:

4. Congratulations. You have created your very own Snake and Rat game!

Go to Top

Challenge

Go to Top __________ Help

1. In “// 4. Frame” section inside <script>, Add the following codes before ??Snake caught rat?.

  //bit Itsef?
  checkBitSelf();

Result:

2. In “// 17. Check Bit Self” section inside <script>, Enter the following codes.

function checkBitSelf(){
  for(var i = 0; i < trail.length; i++) {
    if((trail[i].x == snakeX && trail[i].y == snakeY) && !(moveX == 0 && moveY == 0)) {
       lose();
    }
  }
}

Result: