Build a game (with explosions!)

Hello!! In this Jam, you will be designing and building a web game. When you're all done, it'll look a bit like this:

So how are we gonna do this?

Here are the steps we'll go through to build your own game:

1. Get started with Glitch
2. Start with a simple template game
3. Add more levels to the template
4. Share your game!

---

Get set up

First, let's get started on 🎏 Glitch.

1. Go to glitch.com and click Sign Up.
2. Choose how you'd like to sign up - you can use a GitHub account or a Google account, or if you don't have either, click Email Magic Link and you'll get a link and code in your email.
3. Either click the link in the email or enter the code from the message in your browser.
4. Wahoo! You're ready to code!

---

Start coding

Now, it's time to code!

Start by remixing my template. Head to https://glitch.com/~kaboom-game-template, then scroll down and click Remix your own below the preview. Now you've got your own code editor!

Before we go any further, let's take a look at the structure of a Kaboom game.

kaboom()

Every Kaboom game's code will start with this - it initializes the library and gets everything set up. Here's what it looks like:

Pretty boring. Let's get some action going!

loadSprite("bean", "https://cdn.glitch.global/6e7edbfb-3679-4519-bb57-df3008b83592/bean.png?v=1688618964513")

This loads in a sprite so you can use it later. You pass in a name for the sprite (here, it's bean) and a URL. I've included a bunch of sample sprites in the project (check the 📦 Assets tab in the sidebar!).

add([ 
	sprite("bean"), 
	pos(80, 40), 
])

This adds a sprite to the screen.

Right now, it doesn't do much. Let's change that!

const bean = add([ 
	sprite("bean"), 
	pos(80, 40), 
	area(),
	body(),  
]);

In Kaboom, each game object is composed of multiple components. Each component will give the game object certain functionality.

For example, there might be a component to decide the shape of an object, whether gravity affects it, its color or even how much health it has. Let's take a deeper look at that sample:

• The const bean part saves the object we're making, so we can refer to it later. You don't always need to do this, but for parts you need to use again later, it's super useful.
• The add() method wraps all the components together, a bit like the tortilla of your object burrito.
• sprite("bean") tells Kaboom "render this object with the bean sprite I loaded earlier".
• pos(80, 40) gives it a position, at X=80, Y=40.
• area() gives it an area that can collide with other objects.
• body() gives it a physical body, which makes it affected by gravity and lets it jump.

Now, head back to your code. You'll notice I've left a comment in the code with some steps to make the game work better. Try to fill them in! If you need help with one, check below.

Once you're done, your game should look a bit like this:

---

Add another level!

Now, let's add another level to our game. Find this section of the code:

const levels = [
[
// Design the level layout with symbols
"@  ^ $$",
"=======",
],
// TODO add more levels
]

Try duplicating everything within the inner set of brackets and designing a new level!

But how does Bean get to the next level? I'll leave this as an exercise for you.

---

Add more stuff!

You can also add more sprites, some sound effects, or even change the look of the entire game! Check out the Kaboom docs for documentation on how to use every feature of the library, and the playground for examples!

---

Sharing your game

Now that you've made the perfect game, it's time to let others play it. Just follow these steps: (On my end, I've had issues with the "Edit project details" menu. This works a lot better for me.)

1. Click 🎏 Settings in the top left, above the file list.
2. Click Go to project page
3. On that page, click 👆 Edit details
4. Enter your new project name, then save it!
5. Click the Edit project button to get back to coding.

To get a link that your friends can use to play your game, click the big purple Share button at the top, then copy the Live site link.