Mission 2: Snake

In Mission 2, you are going to code your own version of a Snake game. You will use JavaScript to make the snake move and the fruit appear on the board, and you will learn how to use a new HTML element called <canvas> to create 2D graphics. You will organize your code with object literals and arrays, learn how to make your game tick, and you will find out how to add and process keyboard input so that you can control your snake.

By the end of the mission, you will be able to play your own Snake game!

CODE SKILLS:Creating Graphics

Learn how to use the canvas element with JavaScript.

CODE SKILLS:The Game Board

Use canvas, an array, the forEach and split methods to create the game board graphics.

CODE SKILLS:Organizing the Game Board

Use object literals to group related pieces of code together.

CODE SKILLS:Adding the Snake

Create the snake and code a function that will draw it on the board.

CODE SKILLS:Making the Game Tick

Use setTimeout to make the snake tick. We will add more code to these functions in the next game build.

CODE SKILLS:Making the Snake Move

Make the snake move across the board using the unshift and pop methods.

CODE SKILLS:Controlling the Snake

Use an eventListener so the player can control the snake’s movement with the WASD keys on the keyboard.

CODE SKILLS:Walls and Collisions

Add collision detection to the game so the snake can’t move through the walls.

CODE SKILLS:Game Over

Learn how to end the game when the snake hits a wall.

CODE SKILLS:Adding a Fruit

Add a fruit to the game board.

CODE SKILLS:Eating the Fruit

Make the snake eat the fruit. The fruit should vanish from the board and the snake grow in square length.

CODE SKILLS:Adding Random Fruit

Add lots of fruit in different places.

CODE SKILLS:Fixing the Bugs

Fix the bugs so the game is ready to play.

Do it yourself task:Your finished game

Get the finished code for your game.

diamond

dog