How to Code a Snake Game on Scratch
Introduction: How to Code a Snake Game on Scratch
Want to learn how to code without all that language mumbo-jumbo? Scratch is the answer for you--it's a free website that lets you code without having to learn a whole new language. I discovered Scratch only a few weeks ago, but I'm glad to report that it's very easy to pick up, even for total beginners like me. In this tutorial, I teach you how to make a simple snake game in scratch, with sound effects and scoring.
If you want to test my version of the finished product before you start building, go to https://scratch.mit.edu/projects/454858553/.
Supplies
* A computer/any device with internet access
Step 1: Exploring Scratch
Disclaimer: This isn't going to be a full out crash course on how Scratch works. If you're interested in learning more, I'd recommend going to Scratch's Ideas page.
To create a new project on Scratch, go to https://scratch.mit.edu/. Sign in if you already have an account, or click Join Scratch at the top right to create a new account. Once you're logged in, click the Create tab at the top of the page, next to the Scratch logo. This will take you to a brand new project page.
Automatically, the project page is on the Code tab, where we'll be dragging code blocks to actually make our snake game. On the tab to the right, the Costumes tab, is where we will be drawing our game characters (the apple and snake). The next tab over is the Sounds tab, where we'll be adding sound effects to our game.
When you're on the Code tab, there are three main sections that we'll have to worry about. The most left side with all the code blocks is divided into sections based on functionality, and I'll be calling these sections "drawers." The section right next to the drawers is what I call the "code space." This is where we'll be dragging and connecting the code blocks together. The area most right of the screen is divided in half--the top half is your viewing area, where you'll see your code output. The bottom half is your sprite pane, where all the sprites you've created are displayed. We'll be talking about sprites more in the next step.
The green flag above the viewing area, when clicked, runs your program. The red stop sign next to it stops your program.
Tip: Remember to repeatedly save your code by clicking the "Save Now" button on the top right of the screen that appears when you've added new code to the code space.
Step 2: Creating Our First Sprite
In Scratch, game characters are called "sprites". Our first sprite will be the snake.
To begin, delete the <PERSON> sprite by clicking the trash symbol on the top right of the sprite box. 141
Go into the Backdrops tab and click the Choose a Sprite button on the bottoms left corner. Click the paintbrush icon. Once you click the icon, you should see the Backdrops text on the tab switch to say Costumes.
Click the Circle tool from the toolbar on the left of the drawing board and use it to make a circle on the drawing board. Change the fill to green, or whatever color you want. Change the outline to none, which is just a red line slashing through a blank box. Change the name of the costume from "costume1" to "snake". Changing the name of the sprite from "Sprite1" to "snake" will also make things easier for you later on in this build.
Switch back to the code tab so that we can start programming our snake to move at our command!
Step 3: Making the Snake Move
To make our snake move, drag the "when flag is clicked" block from the Events drawer onto your code space. Go into the Motion drawer and select a "move 10 steps" block. When you click on the green flag above the output screen, you should see your snake sprite move. The next step is to make our snake move depending on which arrow key we press.
Step 4: Using the Arrow Keys to Move the Snake
Go to the Variables drawer and click the "Make a Variable" button. When a box pops up asking for a new variable name, type in "direction", and then hit OK. Drag a "When space key is pressed" block from the Events Drawer onto your code space. Change "space" key to "up arrow". Take a "set direction to 0" block from the Variables drawer and type "up" in the place of "0". Connect the block to the "When up arrow key is pressed" block.
Do the same for the other arrow keys (i.e. 391