Midleton Dojo - Class 4 - Change of time - 12pm-2pm GAA Club

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

  1. gar.morley

    gar.morley Administrator Staff Member

    Hello Ninjas!

    The next Midelton CoderDojo will be on in the Midleton GAA Club on Saturday 31st of October at the changed time of 12pm to 2pm.
     
    gar.morley, Oct 29, 2015
    #1
  2. gar.morley

    gar.morley Administrator Staff Member

    This week we're going to start making a game!

    Step 1

    Let's open Atom and then copy and past all of the following code into a new file. Then save the file on your Desktop with the name "game.html". Make sure not to forget the ".html" at the end!

    Code:
    <!DOCTYPE html>
<html>
  <head>
    <title>The Worm Game</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;

      // 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);
      }

      var drawBackground = function() {
        // This is the grass
        pencil.fillStyle = "Green";
        pencil.fillRect(0, 350, 600, 50);

        // This is the trunk of the tree
        pencil.fillStyle = "Brown";
        pencil.fillRect(280, 175, 40, 200);

        // And this is the leaves of the tree
        pencil.fillStyle = "Green";
        pencil.beginPath();
        pencil.arc(300, 160, 100, 0, 2 * Math.PI);
        pencil.fill();
      }

      var drawWorm = function(x) {
        // Step 3. Draw the worm here!!!
      }

      var moveWorm = function(event) {
        // Step 4a. Make the worm move here!!!
      }
      // Step 4b. We'll put an "event listener" here

      // Step 2. We'll draw everything here the first time
    </script>
  </body>
</html>

    Step 2

    We've written some code which already which will draw a picture on the screen. We've put all the code in a "function", so the first thing we have to do is "call" the function.

    Put the follow code under the line that starts with "// Step 2".

    Code:
    drawEverything();
    Make sure to save your file and then open it in a browser (like Google Chrome). You should see some grass and a tree!

    Step 3

    Now let's draw a worm on the grass. This is similar to code we wrote last week. Put this under the line that starts with "// Step 3".

    Code:
    pencil.fillStyle = "Purple";
pencil.fillRect(x, 380, 100, 10);
    Save the file and reload your browser and you should see a little purple worm at the bottom of the screen.

    This function is a little different from the last one we saw, because it takes an "argument" called x. This means we can call this function many times, but with different values for x.

    Step 4

    Let's make the worm move! Under the line that starts with "// Step 4a" add the following code:

    Code:
    if (event.which == left_arrow) {
  currentX -= 5;
} else if (event.which == right_arrow) {
  currentX += 5;
}
drawEverything();
    The last thing we have to do is make the browser "listen" for when you press a key on your keyboard. We do that buy adding this line after the line that starts with "// Step 4b":

    Code:
    document.addEventListener("keydown", moveWorm, false);
    Save your code and reload the browser and you should be able to move the worm by pressing the left and right arrows on the keyboard.

    What's next?

    Have you noticed that the worm disappears if you press left or right too many times. How could make the worm stop if he hits the left or right of the grass?
     
    gar.morley, Oct 30, 2015
    #2

Share This Page