Getting familiar with the Sprig Engine + Make your first puzzle!

At Hack Club we believe strongly that the best way to learn to code is by making creative, interesting, meaningful projects. Sprig is a project by Hack Club that enables anyone to do just that - we've created a web editor that both beginners and more advanced programmers can have fun making games in, and an accompanying handheld console that you can get for free by publishing your own game!

By the end of today's session, we'll be making our first project in Sprig: a Sokoban-style push block game!

Outline:

1. What's Sprig?
2. Let's explore the Sprig editor!
3. Build Your First Game!
4. Wrap-up!

1. What's Sprig?

Sprig is a game editor, game engine and handheld gaming console all built by Hack Club. To learn more about how these were made, take a look at Sprig's GitHub!

What level of programming is required to make Sprig games?

You will be learning and using JavaScript, and no previous experience with it is required. These are some examples of two games made by beginners:

1. Lava and Water by Akeel
2. QuadraPedal by Jamarkis

For those of you with more JS experience, designing and building games can stretch and challenge your skills. Check out these games that really push what Sprig can do:

1. Raycasting by Henry
2. Chess by Thomas

There are hundreds more games in the Sprig Gallery, made by other teenagers, to learn from and take inspiration from!

Why should I bother with Sprig?

Sprig is an awesome tool to get started in programming! Sprig uses the JavaScript programming language, which is one of the most popular in the world. By coding games in Sprig, you'll get familiar with the language used to code many of the world's websites, apps, and games. Additionally, many of the concepts you'll learn are applicable to all of programming.

By completing your own game in Sprig, you'll also qualify to receive a Sprig Console; it's a DIY kit to make a handheld console, and it can run any Sprig game you build on a computer!

2. Let’s explore the world of Sprig

This video shows you around the world of sprig.

Start your adventure here https://sprig.hackclub.com/
From there, check out the gallery of games submitted by teenagers from all over the world. https://sprig.hackclub.com/gallery

Note that you can open any game in the gallery to see its code. In fact, this is a great way to learn coding– see how other hackers solved their game design problems!
Try clicking on one now!

You’re now in the Sprig code editor! Hitting the RUN button runs the current code, and allows you to play the game.
Fun hint: the size of your editor and play window can be adjusted.

Make sure you don't lose your progress

You'll want to register with Sprig to save your work! Otherwise, logging out of your computer could clear your work (this is not fun!!).

In the login page, enter your email. A login code will be sent.

Use the code sent to you to log in (can't find it... check spam folders?).

Congrats! You’re now logged in. To access your saved games, use the same email to log in.

3. Build Your First Game!

Click on the gallery up top.

We’ll be following the getting_started tutorial. Click it.

In the HELP screen there are both a TOOLKIT of functions particular to Sprig, and a TUTORIAL for “Getting_Started.” Follow the instructions there to build your first Sokobon Puzzle!

Click the "remix" button in the top right corner, so that your changes will be saved.

4. Wrap-up!

Congratulations! By finishing this session, you just made your first game in Sprig!

Next session and for the next 2 sessions, we’ll be building on our knowledge and creating a maze game from scratch. Click here to advance to the next session.