| 
5 | 5 | 
 
  | 
6 | 6 | steps do  | 
7 | 7 | 
 
  | 
8 |  | -  steps do  | 
 | 8 | +  step "Now back to our snakes" do  | 
9 | 9 | 
 
  | 
10 |  | -    step "Now back to our snakes" do  | 
 | 10 | +    message "To get started, we want to create a variable that represents the snake. Add the following line to the beginning of game/snake.js:"  | 
11 | 11 | 
 
  | 
12 |  | -      message "To get started, we want to create a variable that represents the snake. Add the following line to the beginning of game/snake.js:"  | 
 | 12 | +    source_code :javascript, <<-JAVASCRIPT  | 
 | 13 | +      var snake = [{ top: 0, left: 0}];  | 
 | 14 | +    JAVASCRIPT  | 
13 | 15 | 
 
  | 
14 |  | -      source_code :javascript, <<-JAVASCRIPT  | 
15 |  | -        var snake = [{ top: 0, left: 0}];  | 
16 |  | -      JAVASCRIPT  | 
 | 16 | +    markdown <<-MARKDOWN  | 
 | 17 | +      <p>Now that we have this amazing snake we want to show it off, right?  The  | 
 | 18 | +      CHUNK game engine makes it easy to draw objects on the screen. Let's tell CHUNK  | 
 | 19 | +      to 'draw' our snake!</p>  | 
 | 20 | +    MARKDOWN  | 
17 | 21 | 
 
  | 
18 |  | -      markdown <<-MARKDOWN  | 
19 |  | -        <p>Now that we have this amazing snake we want to show it off, right?  The  | 
20 |  | -        CHUNK game engine makes it easy to draw objects on the screen. Let's tell CHUNK  | 
21 |  | -        to 'draw' our snake!</p>  | 
22 |  | -      MARKDOWN  | 
 | 22 | +    source_code :javascript, <<-JAVASCRIPT  | 
 | 23 | +      var drawableSnake = { color: "green", pixels: snake };  | 
 | 24 | +      var drawableObjects = [drawableSnake];  | 
 | 25 | +      CHUNK.draw(drawableObjects);  | 
 | 26 | +    JAVASCRIPT  | 
23 | 27 | 
 
  | 
24 |  | -      source_code :javascript, <<-JAVASCRIPT  | 
25 |  | -        var drawableSnake = { color: "green", pixels: snake };  | 
26 |  | -        var drawableObjects = [drawableSnake];  | 
27 |  | -        CHUNK.draw(drawableObjects);  | 
28 |  | -      JAVASCRIPT  | 
 | 28 | +    markdown <<-MARKDOWN  | 
 | 29 | +      CHUNK's 'draw' function expects to be given a collection of objects. This  | 
 | 30 | +      means we must create an array and place the drawableSnake inside of it. Then we  | 
 | 31 | +      can pass that array into 'CHUNK.draw'  | 
29 | 32 | 
 
  | 
30 |  | -      markdown <<-MARKDOWN  | 
31 |  | -        CHUNK's 'draw' function expects to be given a collection of objects. This  | 
32 |  | -        means we must create an array and place the drawableSnake inside of it. Then we  | 
33 |  | -        can pass that array into 'CHUNK.draw'  | 
 | 33 | +      To see what your code does you'll need to save your 'snake.js' file and  | 
 | 34 | +      refresh the browser window that has your index.html in it. We recommend doing  | 
 | 35 | +      this early and often!  | 
34 | 36 | 
 
  | 
35 |  | -        To see what your code does you'll need to save your 'snake.js' file and  | 
36 |  | -        refresh the browser window that has your index.html in it. We recommend doing  | 
37 |  | -        this early and often!  | 
38 |  | - | 
39 |  | -        Congratulations! You've drawn a (very short!) snake on the screen.  | 
40 |  | -      MARKDOWN  | 
41 |  | -    end  | 
42 |  | - | 
43 |  | -  js_expected_results 'lesson-2'  | 
44 |  | - | 
45 |  | -    step "What is CHUNK?" do  | 
46 |  | -      markdown <<-MARKDOWN  | 
47 |  | -        When programming, you'll frequently need to solve problems that have been  | 
48 |  | -        solved before. In many cases someone who solved the problem already has  | 
49 |  | -        packaged their code into a 'library'.  | 
 | 37 | +      Congratulations! You've drawn a (very short!) snake on the screen.  | 
 | 38 | +    MARKDOWN  | 
 | 39 | +  end  | 
50 | 40 | 
 
  | 
51 |  | -        Good libraries tend to:  | 
 | 41 | +js_expected_results 'lesson-2'  | 
52 | 42 | 
 
  | 
53 |  | -        * Help you think about the problem you're solving more clearly  | 
54 |  | -        * Be well documented  | 
55 |  | -        * Solve a small set of closely related problems  | 
 | 43 | +  step "What is CHUNK?" do  | 
 | 44 | +    markdown <<-MARKDOWN  | 
 | 45 | +      When programming, you'll frequently need to solve problems that have been  | 
 | 46 | +      solved before. In many cases someone who solved the problem already has  | 
 | 47 | +      packaged their code into a 'library'.  | 
56 | 48 | 
 
  | 
57 |  | -        We'll be using the CHUNK library throughout this tutorial. CHUNK is an  | 
58 |  | -        example of a library whose job is to:  | 
 | 49 | +      Good libraries tend to:  | 
59 | 50 | 
 
  | 
60 |  | -        * Draw chunky-pixels on the screen!  | 
61 |  | -        * Respond to user input  | 
62 |  | -        * Start and end a game  | 
63 |  | -        * Check for things running into each other  | 
64 |  | -        * Be reasonably approachable for novice developers  | 
65 |  | -      MARKDOWN  | 
66 |  | -    end  | 
 | 51 | +      * Help you think about the problem you're solving more clearly  | 
 | 52 | +      * Be well documented  | 
 | 53 | +      * Solve a small set of closely related problems  | 
67 | 54 | 
 
  | 
68 |  | -    step "Understanding the Code" do  | 
69 |  | -      message "The code you wrote used the CHUNK library to draw a 1px snake on the screen. Let's try to understand the code as a whole a bit better."  | 
 | 55 | +      We'll be using the CHUNK library throughout this tutorial. CHUNK is an  | 
 | 56 | +      example of a library whose job is to:  | 
70 | 57 | 
 
  | 
71 |  | -      source_code :javascript, <<-JAVASCRIPT  | 
72 |  | -        var snake = [{ top: 0, left: 0}];  | 
73 |  | -        var drawableSnake = { color: "green", pixels: snake };  | 
74 |  | -        var drawableObjects = [drawableSnake];  | 
75 |  | -        CHUNK.draw(drawableObjects);  | 
76 |  | -      JAVASCRIPT  | 
 | 58 | +      * Draw chunky-pixels on the screen!  | 
 | 59 | +      * Respond to user input  | 
 | 60 | +      * Start and end a game  | 
 | 61 | +      * Check for things running into each other  | 
 | 62 | +      * Be reasonably approachable for novice developers  | 
 | 63 | +    MARKDOWN  | 
 | 64 | +  end  | 
77 | 65 | 
 
  | 
78 |  | -      markdown <<-MARKDOWN  | 
79 |  | -        The first line declares the variable 'snake' and assigns an array to it. Within that array is one item which is defined by a set of curly-braces. These curly-braces represent another Javascript data type called an Object which is also referred to as a 'hash map'.  | 
 | 66 | +  step "Understanding the Code" do  | 
 | 67 | +    message "The code you wrote used the CHUNK library to draw a 1px snake on the screen. Let's try to understand the code as a whole a bit better."  | 
80 | 68 | 
 
  | 
81 |  | -        Data stored in an hash map object involves two parts, a key and a value. In our code, we have two pieces of data in the object, a 'top' value and a 'left' value. The key is used to get the data from the object. So in our example, if we need to know what the current 'left' value of snake is, we type 'snake.left' which will return a value of '0'.  | 
 | 69 | +    source_code :javascript, <<-JAVASCRIPT  | 
 | 70 | +      var snake = [{ top: 0, left: 0}];  | 
 | 71 | +      var drawableSnake = { color: "green", pixels: snake };  | 
 | 72 | +      var drawableObjects = [drawableSnake];  | 
 | 73 | +      CHUNK.draw(drawableObjects);  | 
 | 74 | +    JAVASCRIPT  | 
82 | 75 | 
 
  | 
83 |  | -        On the second line, we declare the variable 'drawableSnake' and assign an object to its value. The object has two pieces, the first has the key 'color' and the value '"green"', and the second has the key 'pixels' which has the value 'snake'. 'snake' is the variable we defined on the previous line, which means 'drawableSnake.pixels' will return us the object we created on the first line.  | 
 | 76 | +    markdown <<-MARKDOWN  | 
 | 77 | +      The first line declares the variable 'snake' and assigns an array to it. Within that array is one item which is defined by a set of curly-braces. These curly-braces represent another Javascript data type called an Object which is also referred to as a 'hash map'.  | 
84 | 78 | 
 
  | 
85 |  | -        The third line declares a variable 'drawableObjects', which we assign the value of an array whose only data is the 'drawableSnake' declared on the previous line. We do this because our CHUNK engine is looking for a list (an array) or objects to draw.  | 
 | 79 | +      Data stored in an hash map object involves two parts, a key and a value. In our code, we have two pieces of data in the object, a 'top' value and a 'left' value. The key is used to get the data from the object. So in our example, if we need to know what the current 'left' value of snake is, we type 'snake.left' which will return a value of '0'.  | 
86 | 80 | 
 
  | 
87 |  | -        Finally, we call the CHUNK library's built-in function 'draw' and pass it the argument 'drawableObjects' which was declared on the previous line. We'll explore functions and arguments in future lessons.  | 
88 |  | -      MARKDOWN  | 
89 |  | -    end  | 
 | 81 | +      On the second line, we declare the variable 'drawableSnake' and assign an object to its value. The object has two pieces, the first has the key 'color' and the value '"green"', and the second has the key 'pixels' which has the value 'snake'. 'snake' is the variable we defined on the previous line, which means 'drawableSnake.pixels' will return us the object we created on the first line.  | 
90 | 82 | 
 
  | 
91 |  | -    step "Play Time!" do  | 
92 |  | -      markdown <<-MARKDOWN  | 
93 |  | -        * Add comments underneath each line explaining what it does in plain old english.  | 
94 |  | -        * Change the color of the snake.  | 
95 |  | -        * Make the snake longer than just 1 segment!  | 
96 |  | -        * Draw something in addition to the snake. Perhaps an apple or a wall? Make  | 
97 |  | -        sure it's a different color!  | 
98 |  | -      MARKDOWN  | 
99 |  | -    end  | 
 | 83 | +      The third line declares a variable 'drawableObjects', which we assign the value of an array whose only data is the 'drawableSnake' declared on the previous line. We do this because our CHUNK engine is looking for a list (an array) or objects to draw.  | 
100 | 84 | 
 
  | 
 | 85 | +      Finally, we call the CHUNK library's built-in function 'draw' and pass it the argument 'drawableObjects' which was declared on the previous line. We'll explore functions and arguments in future lessons.  | 
 | 86 | +    MARKDOWN  | 
101 | 87 |   end  | 
102 | 88 | 
 
  | 
 | 89 | +  step "Play Time!" do  | 
 | 90 | +    markdown <<-MARKDOWN  | 
 | 91 | +      * Add comments underneath each line explaining what it does in plain old english.  | 
 | 92 | +      * Change the color of the snake.  | 
 | 93 | +      * Make the snake longer than just 1 segment!  | 
 | 94 | +      * Draw something in addition to the snake. Perhaps an apple or a wall? Make  | 
 | 95 | +      sure it's a different color!  | 
 | 96 | +    MARKDOWN  | 
 | 97 | +  end  | 
103 | 98 | 
 
  | 
104 | 99 | end  | 
105 | 100 | 
 
  | 
 | 
0 commit comments