Lesson 2

To get started, we want to create a variable that represents the snake. Add the following line to the beginning of game/snake.js:

var snake = [{ top: 0, left: 0}];

Now that we have this amazing snake we want to show it off, right? The CHUNK game engine makes it easy to draw objects on the screen. Let's tell CHUNK to `draw` our `snake`!

var drawableSnake = { color: "green", pixels: snake };
var drawableObjects = [drawableSnake];
CHUNK.draw([drawableSnake]);

CHUNK's draw function expects to be given a collection of objects. This means we must create an array and place the drawableSnake inside of it. Then we can pass that array into CHUNK.draw

To see what your code does you'll need to save your snake.js file and refresh the browser window that has your index.html in it. We recommend doing this early and often!

Congratulations! You've drawn a (very short!) snake on the screen.

Expected Results

What your snake.js file should look like:

var snake = [{ top: 0, left: 0}];
var drawableSnake = { color: "green", pixels: snake };
var drawableObjects = [drawableSnake];
CHUNK.draw(drawableObjects);

How the game should work:

Play Time!

  • Add comments underneath each line explaining what it does in plain old english.
  • Change the color of the snake.
  • Make the snake longer than just 1 segment!
  • Draw something in addition to the snake. Perhaps an apple or a wall? Make sure it's a different color!

What is CHUNK?

When programming, you'll frequently need to solve problems that have been solved before. In many cases someone who solved the problem already has packaged their code into a library.

Good libraries tend to:

  • Help you think about the problem you're solving more clearly
  • Be well documented
  • Solve a small set of closely related problems

We'll be using the CHUNK library throughout this tutorial. CHUNK is an example of a library whose job is to:

  • Draw chunky-pixels on the screen!
  • Respond to user input
  • Start and end a game
  • Check for things running into each other
  • Be reasonably approachable for novice developers

Syntax Breakdown

var tells the computer to create a variable (in this case named snake) that we can assign a value to.

= (single equals sign) tells the computer to assign the value on the right of the = to the variable on the left of the =.

[ and ] (square brackets) come in pairs. They wrap around one or more values to make a list (often called an array).

{ and } (curly braces) also come in pairs. In this case they wrap around pairs of names and values to create an object (sometimes called a hashmap). (Note: There is another use of curly braces which we will see later.)

: (colon - when creating an object) says to create a variable within the object. It's name (or key) is on the left side of the : and it's value is on the right.

, (comma - when creating an object or map) is used to separate key/value pairs on the object.

; (semicolon) says "This line is over. Thanks!"

. (period) is used to get the value stored at a key inside an object. drawableSnake.color says "get me the value of the color key in the drawableSnake variable." What do you think that value is?

( and ) (parenthesis) also come in pairs. When they come after a variable, they are saying "run the code stored in this variable." A variable that stores code that can be run is called a function. Values held within the parenthesis are given to the function for whatever it's purpose may be. In this case, we want to give a collection of drawable things to CHUNK's draw function so it can draw them on the screen.

Next Step:

Back to Javascript Snake Game