Create A Simon Game in Solar2D

[Updated July 31, 2020]

On the Solar2D forums someone asked about creating a Simon-like game where the computer highlights a color and the user touches the same one, then computer highlights two colors and user does the same, etc. Simon was one of the top electronic games in the 80s.

The question on the forum was along the lines of “how do I make a game like that?” which is pretty broad, and I’m not going to answer it here, but I played around with Solar2D yesterday and came up with something that could be the foundation for a game like that.

Here’s a 77-second video that gives you a quick look at what the game does:

It’s not a finished game, but it could certainly serve as the foundation for one. So let’s get started by diving into some code.

The Overview

In a nutshell, we’re going to create a table in Lua and populate it with a number of colors, all chosen at random.

Once we have that new sequence, the computer will run through it and highlight each colored ball (and play a sound) and then pass control over to the player.

The player will try to tape the balls in the same order. As they tap, a star or an X appears above the colored ball, depending on whether they’re right or wrong. That bit is just some eye-candy to make the game more interesting.

If the player taps all the balls in correct order, the win message is displayed, otherwise the lose message is displayed. In either case the player can start a new game at that time.

Creating A New Sequence

I started playing around with this tutorial code by by creating a routine that would make a new sequence for the user to solve. It looks like this:

Pass in the number of options you want in the sequence and it will grab that many colors at random and create a new table containing those options. At the end it will pass back that table, so you’ll call that function like this:

…and you’ll get back a table called newSeq that contains a random selection of 10 colors. Using a variable called sequenceIdx you can keep track of where you are in the sequence. For example,

…will print the third color in the sequence. Now you’re not going to be printing the value to the terminal, but you can still access it the same way. At the beginning of a turn you’ll set that variable to 1 and that will start with the color that’s in position 1 in the table.

Three Main Parts of the Program

Besides creating a sequence to be solved, the other main parts of the game are:

• Have the computer display the current sequence, one ball at a time.
• Allow the user to try and duplicate the sequence that was shown.

Some of the minor parts of the program including setting up the initial screen and allowing the user to play the game again after a win or loss.

Before we look at the code where the app shows the current sequence let’s take a peek at setting up the initial screen, because that sets up some code we’ll be using later.

That picture shows one ball larger and a bit brighter than the others — that’s what happens when the user touches the ball or when the app “chooses” it. It also plays a unique sound when chosen. Part of that happens because of the way the balls are set up at the beginning:

We create a loop that fills the mainBalls table with the info we need for each ball — the first thing we do is set the key for each value in the table to the color of the ball:

The variable idx is set to Blue, Green, etc., which means that second line would look like this:

The only other lines of interest in that main loop are:

We’re setting the alpha to less than one so when we use the “pop” routine we can set it to 1 and that makes the ball brighten when it’s touched.

We also set the sound that should be played when the ball is chosen. By handling it this way we don’t have to programmatically decide which sound to play when a ball is touched, it’s automatic.

In fact, let’s look at that part of the code right now…

Popping the Balls

When the user touches a ball or the app chooses one, we want it to “pop” up and play a sound. To make it pop we scale it up and the back up at the same time increasing the alpha value.

We pass in a ball object (that was created in the setUpBalls() function), define the function that “unpops” the balls, and then go right into transition.to that makes the ball grow slightly. When it’s done it will call the unPop function that takes the ball back to normal.

You can see that we don’t need to figure out which sound to play, we just play the one that was saved in the sound property of the ball object. Set up it at the beginning and then never think about it again — that’s the best kind of programming. 🙂

It’s the Computer’s Turn

Okay, that’s a lot of the housekeeping out of the way, let’s look at the part where the app shows the sequence that the user will need to follow.

Before this function is called the sequenceIdx variable has been set to 1 to make sure we start at the beginning. The first thing we do is pop the ball that’s first in the sequence.

Remember that newSeq holds a list of colors such as: “Yellow”, “Green”, “Green”, “Red”, etc. so that when sequenceIdx equals 1 the popBall parameter could also be seen as:

The if block that comes next checks to see if sequenceIdx is less than the number of values in the newSeq table. If it is, then it sets a timer to call the playSequence again after a set period of time (BOOP_PAUSE was set to 1000 at the beginning of the file) and then drops past the if block and increases the sequenceIdx by 1 so it points to the next value in the table.

Because of the timer that gets set every time, playSequence will continue to call itself until it has done a pop for each value in the sequence table. At that point the other part of the if block will come into play and we’ll show the player a message letting them know it’s their turn to play.

If you haven’t used the Crawl Space Library before you might be confused about this line:

When you use crawlspaceLib you automatically get the ability to fade objects in and fade them out. Not only graphics, but even text as you can see here.

Note: When this was originally written you needed 3rd-party libraries to do things like fading in and out, but those are now part of the official transition library in Solar2D. Check out the docs on that here:

https://docs.coronalabs.com/api/library/transition/index.html

Instead of setting up a callback to fade out the text after it’s faded in, I just combined the two. Now the message will fade in over 2 seconds and then fade out over 4 seconds.

You’ll also notice inside that if block we take care of two more things:

1. Set the global GAME_STATE variable to “playing” (we’ll talk more about that later).
2. Reset sequenceIdx so the user can start at the correct place when they start guessing — and we set it to zero since the next line after the if block will increment it. That way it will start at 1 for the user.

It’s the Player’s Turn

When we created the balls on the screen we added a touch event listener for each — inside that function we take care of all the stuff to determine whether then user touches the balls in the correct order. After checking to make sure the event.phase is “ended” we check to see if the game is actually in playing mode:

At the beginning of the code the GAME_STATE variable is set to “waiting” and doesn’t change to “playing” until after the computer’s turn is over. We could have enabled and disabled the event listener as needed, but I figured this way was easier — event listener is always on, but sometimes we just ignore the touch and return.

Next we pop the ball that was touched:

…and then look to see whether that ball was the correct one by comparing the current ball in the sequence to the color of the ball that was touched. Let’s look at the code that runs if the colors matched:

We briefly show a star above the ball that was touched and the increment the pointer (sequenceIdx) that shows us which value in the table we’re looking at. If the pointer is no greater than the number of values in the sequence, it means the user is done and we set the GAME_STATE (so touches will stop working), play the winning sound and display a message, and then put up a Start Game message so the user can play again if they like.

If the colors didn’t match we show an X above the ball and set the GAME_STATE to “lost”, play the losing sound and display the message, and then put up the Start Game message so the user can try again.

In Summary

While this sample is a complete game, it’s not a “polished” game by any means. A “real” Simon game would start with one color in the sequence to copy, move on to two, then three, and so on until the user missed. A real game would also have a way to keep score such as the most colors in a sequence that have been matched, etc.

But there’s nothing stopping you from taking this code and building on it (although find your own ball graphics — the ones in this sample are licensed for this sample only, not for general distribution).

If you’d like to download the entire working sample project, join Game Dev Nation (It’s free!) and the download link will appear in this spot after you confirm your registration via email and log back in.

Please click the Like button below if you appreciate this tutorial. 🙂

Originally written for Corona SDK, which is now called Solar2D but still just as awesome.

color, game design, sequence, simon, tables