Midleton Dojo - Class 6 - 1pm to 3pm at GAA club

Discussion in 'CDYS Youth Work Ireland - Midleton' started by gar.morley, Nov 12, 2015.

  1. gar.morley

    gar.morley Administrator Staff Member

    This week our worm is finally going to eat some apples!

    Step 0: Get ready!

    You'll need to get the file called "game_week3.html" and open it in your text-editor (Atom) and your browser (Chrome). Can you remember how to do that from the last few weeks?

    Step 1: Oh no!

    Oh no! Everything is blank! Don't worry. We'll start drawing everything on the screen again soon.

    In Atom, find the line of code (near the bottom of the file) which starts with "Step 1a" and put the following code after it:

    Code:
    createAppleSometimes();
growAndMoveApples();
drawEverything();
printScore();
    These are all the things we want the computer to do, but we have to tell it how often to do it! Find the code that starts with "//Step 1b" and put the following line of code:

    Code:
    setInterval(tick, 50);
    Here we are telling the computer to call the function "tick" every 50 milliseconds. That's 20 times a second! Save your code and reload your browser and you should see apples falling from the trees.

    Step 2: Eating apples

    Let's make the worm eat the apples. How can we tell if the worm is eating the apple? Well, let's say if her head is in the same place as the apple, she has eaten it.

    To do that, find the bit of code that starts with "// Step 3". You want to change the line of code "return false" to be the following:

    Code:
    return isWormsHeadInSamePlaceAsApple(apple);
    Now save your code and reload your browser. Your worm should be able to move around and eat apples!

    Step 3: Printing the score

    We asked the computer to print the score back in step one, but we haven't told it how to do that yet. But don't worry! It's pretty easy.

    Find the line of code that starts with "// Step 3" and add the following line of code after it:

    Code:
    console.log("Score " + score);
    Save your code reload your browser. This code prints the score to your browser's "JavaScript console" so we'll have to open that to see the score. Near the top-right corner of the Chrome window there is a little "hamburger" icon (three lines, one on top of the other). Click that, then go to "More tools", then "Developer Tools". Then you want to click on "Console" (it might be hidden under two arrows ">>" near the top of the screen).

    With the console open you should be able to see the score update. But at the moment it's always zero. Let's fix that.

    Step 4: Scoring the apples

    Find "// Step 4" in your code and add the following lines of code:

    Code:
    if (apple.colour == goodAppleColour) {
  score += appleScore;
} else {
  score += badAppleScore;
}
    We are using some variables here which we defined further up in the file (see if you can find them).

    Now save your file and reload your browser (with the console still open). You should be able to get points for your apples. Try to catch them before they hit the ground!

    Next time

    Next time we'll add a time limit, print the score on the screen itself and more!
     
    gar.morley, Nov 12, 2015
    #1
  2. gregory.gleinig

    gregory.gleinig Administrator Staff Member

    We are going to continue The Worm Game adding Apples growing and when they fall to the ground your worm can eat them with a score!

    Included is fresh code that you can copy/paste into a new file, name it game_week6.html or whatever name you wish, just make sure it ends in .html

    [​IMG]
    Code:
    <!DOCTYPE html>
<html>
  <head>
    <title>The Worm Game - Week 6</title>
  </head>
  <body>
    <h1>The Worm Game</h1>
    <canvas id="canvas" width="600" height="400"></canvas>

    <script>
      var left_arrow = 37;
      var right_arrow = 39;
      var currentX = 0;
      var apples = [];
      var wormDirection = "right";

      // This is the canvas and pencil we will use for drawing
      var canvas = document.getElementById("canvas");
      var pencil = canvas.getContext("2d");

      var drawEverything = function() {
        drawBackground();
        drawWorm(currentX);
        for (var i = 0; i < apples.length; i++) {
          drawApple(apples[i]);
        }
      }

      var drawBackground = function() {
        // This is the white background
        pencil.fillStyle = backgroundColour;
        pencil.fillRect(0, 0, 600, 400);

        // This is the grass
        pencil.fillStyle = grassColour;
        pencil.fillRect(0, 350, 600, 50);

        // This is the trunks of the trees
        pencil.fillStyle = trunkColour;
        pencil.fillRect(80, 210, 30, 150);
        pencil.fillRect(280, 175, 40, 200);
        pencil.fillRect(480, 210, 30, 150);

        // And this is the leaves of the trees
        pencil.fillStyle = treeColour;
        pencil.beginPath();
        pencil.arc(95, 180, 70, 0, 2 * Math.PI);
        pencil.fill();
        pencil.beginPath();
        pencil.arc(300, 160, 100, 0, 2 * Math.PI);
        pencil.fill();
        pencil.beginPath();
        pencil.arc(495, 180, 70, 0, 2 * Math.PI);
        pencil.fill();
      }

      var moveWorm = function(event) {
        if (event.which == left_arrow) {
          wormDirection = "left";
          currentX -= wormSpeed;
          if (currentX < 0) {
            currentX = 0;
          }
        } else if (event.which == right_arrow) {
          wormDirection = "right";
          currentX += wormSpeed;
          if (currentX > 500) {
            currentX = 500;
          }
        }
      }
      document.addEventListener("keydown", moveWorm, false);

      var drawWorm = function(x) {
        // this is her body
        pencil.fillStyle = wormColour;
        pencil.fillRect(x, 380, 100, 10);

        // her eye is on different sides of her body
        // depending on if she's moving left or right
        if (wormDirection == "right") {
          x = x + 90;
        } else {
          x = x + 5;
        }

        // this is her eye
        pencil.fillStyle = wormEyeColour;
        pencil.fillRect(x, 380, 5, 5);
      }

      var drawApple = function(apple) {
        pencil.beginPath();
        pencil.arc(apple.x, apple.y, apple.size/2, Math.PI/180, Math.PI/180*360, false);
        pencil.fillStyle = apple.colour;
        pencil.fill();
        pencil.strokeStyle = "Black";
        pencil.stroke();
      }

      var createApple = function() {
        var treeCenters = [[95, 180], [300, 160], [495, 180]];
        var center = treeCenters[Math.floor(Math.random() * 3)];
        var deltaX = Math.random() * 80 - 40;
        var deltaY = Math.random() * 80 - 40;
        apples.unshift({x: center[0]+deltaX, y: center[1]+deltaY, size: 0, colour: goodAppleColour});
      }

      var growAndMoveApples = function() {
        for (var i = 0; i < apples.length; i++) {
          apple = apples[i];
          if (isWormEatingApple(apple)) {
            scoreForEatingApple(apple);
            removeApple(apple);
          } else {
            if (apple.size < appleSize) {
              apple.size += 0.5;
            } else {
              if (apple.y < 385) {
                apple.y += 5;
              } else {
                apple.colour = badAppleColour;
              }
            }
          }
        }
      }

      var removeApple = function(apple) {
        var index = apples.indexOf(apple);
        if (index > -1) {
          apples.splice(index, 1);
        }
      }

      var isWormsHeadInSamePlaceAsApple = function(apple) {
        var wormHeadX = currentX;
        var wormHeadY = 380;
        var wormHeadWidth = 30;
        var wormHeadHeight = 10;
        if (wormDirection == "right") {
          wormHeadX += 90;
        }
        return (wormHeadX < apple.x + appleSize &&
                wormHeadX + wormHeadWidth > apple.x &&
                wormHeadY < apple.y + appleSize &&
                wormHeadHeight + wormHeadY > apple.y)
      }

      var createAppleSometimes = function() {
        if (Math.random() < chanceOfApple) {
          createApple();
        }
      }

      /////////////////////////////
      // Hey! Ignore everything above this line! (Unless you really
      // want to play around with the JavaScript code, which is cool
      // too. Be careful to save a copy of your code in case you
      // break anything though!)
      /////////////////////////////



      /////////////////////////////
      // Try changing some of these variables below if
      // you can figure out what they do!
      /////////////////////////////

      var backgroundColour = "White";
      var grassColour = "Green";
      var treeColour = "Green";
      var trunkColour = "Brown";

      var wormColour = "Purple";
      var wormEyeColour = "Black";
      var wormSpeed = 5;

      var appleSize = 20;
      var goodAppleColour = "Red";
      var badAppleColour = "Brown";
      var appleScore = 10;
      var badAppleScore = 1;
      var chanceOfApple = 0.05;

      var score = 0;

      /////////////////////////////
      // Worm Game Week 6! We'll start writing our code below
      // this line.
      /////////////////////////////

      var tick = function() {
        // Step 1a: tell the computer all the things we want to do
        createAppleSometimes();
        growAndMoveApples();
        drawEverything();
        printScore();
      }
      // Step 1b: and tell it we want to do it lots of times a second
      setInterval(tick, 50);

      var isWormEatingApple = function(apple) {
        // Step 2: is the worm eating the apple?
        return isWormsHeadInSamePlaceAsApple(apple);
      }

      var printScore = function() {
        // Step 3: print the score
        pencil.font="35px Georgia";
        pencil.fillStyle="Purple"

        var gradient=pencil.createLinearGradient(0,0,100,0);
        // three colors
        gradient.addColorStop("0","magenta");
        gradient.addColorStop("0.25","blue");
        gradient.addColorStop("1.0","red");

        // Fill with gradient
        pencil.fillStyle=gradient;

        pencil.fillText("Score: " + score, 1, 30);

      }

      var scoreForEatingApple = function(apple) {
        // Step 4: change the score when an apple is eaten
        if (apple.colour == goodAppleColour) {
          score += appleScore;
        } else {
          score += badAppleScore;
        }
      }

    </script>
  </body>
</html>
     

    Attached Files:

    Last edited: Nov 14, 2015
    gregory.gleinig, Nov 14, 2015
    #2

Share This Page