1. 程式人生 > >React Native Candy Crush Clone — Part 1

React Native Candy Crush Clone — Part 1

React Native Candy Crush Clone — Part 1

Preface

As a Swift developer specializing in educational games for kids, I wanted more experience in Javascript & React Native. Searching LinkedIn, I found that that Jobs for pure Swift developers aren’t really a thing.

But I also found this:

Perfect! A volunteer opportunity to create an educational game! Now if only I could build it in React Native…

I had only a moderate amount of experience in React Native at that point so I let the client know that it was a new technology for me and that I was doing it for the experience .

“No problem”, they said — That’s why most developers volunteer.

Why Candy Crush?

There are a lot of passive mobile games out there but none quite as ubiquitous as Candy Crush. Not to mention the dearth of other games that followed in it’s footsteps by adopting the match-three-edible-things

format.

However, Candy Crush wasn’t my initial inspiration. Dots by Playdots Inc. was the first game I truly started to appreciate for it’s elegance and simplicity.

The layout is very peaceful…

Mobile games are supposed to be relaxing — but don’t take my word for it. King Games is very upfront about their intent to relax and comfort the player with their Candy Crush Saga.

Relax … and Play Candy

As a matter of preference, the Dots game felt more peaceful and engaging. Just the physical acts of swiping through the dots was fun. I also liked that the only measure of success was a raw score. This way I could easily compare my games and iterate on different strategies.

By contrast, Candy Crush has 3000+ different levels in which sheer luck counts for far more than it should.

So I set out to create a game that combined some of the best parts of each.

Assets

For the jelly beans, I found inspiration from some images I found online and drew them myself in Affinity Designer.

For the Jars, I’m very proud to be able to give credit to LittleRedFoxShoppe on Etsy for allowing me to create my own custom assets based on their designs. Here are the originals:

For me, I needed a bit more control over the image so it could look great on mobile. Once again, I created my own version in Affinity.

My custom

Sprinkle in a nice cloudy blue background and a few images of Tuffy Tiger and we’ve got the toolkit we need to start building a beautiful game!

JellyBean Jam!

Logic & Strategy

This game is for kids, but it was tested on adults. As a result, there’s a lot more strategy than meets the eye. There are four instructional scenes that appear on start. Let’s take a look:

Swapping

Unlike some other games, you don’t have to create a match every time you swap a bean. In fact, you can swap as many times as you like depending on how you want to arrange the board. This means that you’ll never run into a board that needs to be reshuffled.

Beans Make Jars

Match three beans to make a jar and then try to get multiple jars in row. The beans will always collapse either upward or to the left. This way you can predict where your jar is going to end up.

Matching jars give you points and extra turns.

Unfortunately, 3 jars only gives you 2 extra turns. However, for each additional jar you match, you get an additional two turns. Thus, 4 jars is 4 turns, 5 jars is 6 turns and so on. This way you can eventually gain more turns than you are losing. (Assuming that you can make one jar with every turn)

Four beans make a rainbow bean

Now that we had established an incentive to match more than three jars, we had to make sure the player was rewarded for matching extra beans. Cue the “Rainbow Bean”

Rainbow Beans clear all instances of the image they are swapped with.

Let’s take a look:

Rainbow Bean in Action

Not only that, they also give you an extra turn and a huge point bonus. Yippie!

I know what you’re thinking:

What if we used the Rainbow Bean on Jars?

See for yourself:

Nice! Not only does it give us an extra turn for every jar, but it also one for the Rainbow Bean. This means that we can use the Rainbow Bean to at LEAST break even on the turns we use.

Best Strategy?

As it turns out, matching more than 3 jars is the best way to get extra turns but it’s not without it’s complications. Sometimes the board gets messy and it takes too many moves to line them all up. Sometimes you’ll accidentally match three jars when you were trying save up. The best you can do is keep a mixed strategy, snagging rainbow beans when you can and using them to keep you out of trouble or get big point bonuses.

This is exactly what I was hoping to achieve when designing the game logic. I wanted a game that held no fixed strategy and encouraged the player to develop their own ideas and patterns.