Skip to content

Commit 0fcf584

Browse files
committed
Fix double 'Steps' on lesson 2 of js snake game
Fix double parens on lesson 1 of js snake game
1 parent 3cade48 commit 0fcf584

File tree

2 files changed

+69
-74
lines changed

2 files changed

+69
-74
lines changed

sites/en/javascript-snake-game/lesson-1.step

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -117,7 +117,7 @@ Functions are __invoked__ with parentheses, which causes them to run.
117117
message <<-MARKDOWN
118118
The __push__ function allows us to add new items to an array. the slice function returns a new array with
119119
with everything to the right of the __index__ we provided. Here, we passed the function the number 1, so
120-
slice returned an array with everything after the first element in the array. (Note that the first element is assigned 0 as its index rather than 1).)
120+
slice returned an array with everything after the first element in the array. (Note that the first element is assigned 0 as its index rather than 1.)
121121
MARKDOWN
122122
end
123123

sites/en/javascript-snake-game/lesson-2.step

Lines changed: 68 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -5,101 +5,96 @@ end
55

66
steps do
77

8-
steps do
8+
step "Now back to our snakes" do
99

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:"
1111

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
1315

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
1721

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
2327

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'
2932

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!
3436

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
5040

51-
Good libraries tend to:
41+
js_expected_results 'lesson-2'
5242

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

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:
5950

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
6754

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:
7057

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
7765

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

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
8275

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

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

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

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

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
10187
end
10288

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
10398

10499
end
105100

0 commit comments

Comments
 (0)