Making a Whack-A-Mole Game With Scratch!

by andre.esau in Workshop > CNC

1808 Views, 7 Favorites, 0 Comments

Making a Whack-A-Mole Game With Scratch!

download.png

Hello there. Welcome to “How To Make A ‘Whack-A-Mole’ Game With Scratch!”. By the end of this instructable, you will have learned how you can make a ‘whack-a-mole’ type game for yourself by coding with Scratch! All you’ll need is a laptop or mobile device, internet access, the ability to read this instructable and maybe a but of flair to enhance your own game as you follow along! Go to “scratch.mit.edu” on your device to get to Scratch, make an account if you don’t have one yet, go to where it says “my stuff”, and then open a new project. Done? Great! Let’s get right in!

Designing the Scene...

DCBC8018-39D3-4D7D-9A68-C52576D24D37.jpeg
CF138C10-E17E-4E83-9480-8DF9FD6A9193.jpeg

Awesome! So I see you have got your project ready so let’s not wait any longer.
I started out by clicking that icon in the bottom-right corner that has that blue image icon and the plus sign, which is shown in an image above. This is what you must press to create your background. Once this is done, a few options will show up, offering different ways to go about creating your background. You can do whatever you want, it I chose to paint mine. My painting is also shown in a picture above, as well. Note that you can change the color (the default is purple) of your paintbrush by hitting where it says “fill”, and you can change the paintbrush size in the middle of the screen where it has the paintbrush icon with a number you can adjust. Now we have set the background up. Next what you must do is create the characters or moles. This is an easy process, and it’s done in a similar way. In order to getting to pit in your character (either from importing it from somewhere else, if you already have in one set up that you’d like to have in there, using one of Scratch’s ore-made characters, or painting it), you have to press the blue icon to the left of the background one, the one that has what looks like a bear or some creature on it with the plus sign. These characters are going to be like the moles that you’re going to have to whack, but don’t make more than one, as we can use what you have drawn as the design for other moles we can code in without necessarily having to draw them all.

Ok, great. Now we can dive into the playing aspect...

Coding What Happens at the Very Start of the Game...

51982E4C-B1A9-41C5-B9B8-B7AEEC565CA7.jpeg
96BF8042-8CDD-4FE7-849C-5AAB7525BD4D.jpeg

As you can see, I put in my code what all the code should be activated by (in my case it was the green flag being clicked). You can set it to activated by whatever you want (a certain key being pressed, something on the screen being clicked, etc,) but to keep it simple, I think the green flag is the best way to go. So here is what I am setting to happen at the very start of the game, like when the player first presses play, or, here, the green flag: the mole will hide (yes that is a mole even if it doesn’t like like one) and then shrink (because my goal is to have it grow to a bigger size once that mole is coded to pop up, like the moles in arcades do).

You may also be wondering why I told it to hide and shrink. You may be asking if doing this is redundant since it would already be invisible. Well, I did this because even when the size is set to 0 it will still appear, eve if it is very small. But I don’t want it to be visible at all at this point, so I hit it as well. I set my desired location, too, although feel free to set it to a random position (it really doesn’t matter-I did this so I could make sure that it fit within the boundaries of the square and not overlap some of the lines).

Getting the Moles Know When to Show Up

6D325472-5446-4859-9155-9BEDE65B8B24.jpeg

Add this orange block to your code, and insert the green one into the hole (just by simply by dragging it in). You can find them by looking in the section with its corresponding color(orange)). Let me explain why:

The orange block represents a variable (called “your label” by default, but you can change it the name you want to). What this variable will be for this is essentially a cue for moles to enter at a given time. Since we want the entrance of the moles to be random, so that the game can vary and not be the same each time it is played, this is what we need:a random number generator that will choose one depending on what it lands on. Make the range of numbers have as many numbers as the amount of moles you would like to have, since each number will be assigned to its own mole (if you have any more in the range than there are moles then there will be a number that is not assigned to a mole that will make the game freeze forever, since nothing would happen in response to it, and if you have any less than one mole will never be summoned).

So now that you have listed out a range of numbers to choose from (something to something else), you are done with this step!

This Is a Simple Step for Some Efficiency Later On

630A034B-D3E4-4906-A564-C3680A400CF0.jpeg
6160C8F0-47FB-44BE-9AAC-387CD355E108.jpeg

Attach this yellow ‘if’ block to the end of the code(it is listed under the events section). We will not tell it what the situation is that it is taking into account, but it will help us out further into this, since it is a required element that all of the moles will each need to have, just with slightly different information inside. Don’t worry about this for now. Just place it in, and I’ll explain later.

Inside if that hike on this piece, out in a snow block, as well as the increase by ten block surrounded by the repeat ten times block(this will allow it to show itself and then gradually grow without immediately becoming full sized. This shown in an image above, too, if you want to take a look

Also, please put out a ‘when this sprite clicked’ block, too, which is also listed under the events section. You’ll thank yourself later


Also, put in a ‘set-size’ block

Also, put a show block (I keep coming back to this step during editing as I go along and forgetting them)

Duplicating Moles

D64E2E00-3021-41ED-BF42-A1DE329CCD82.png

Now duplicate your mole as many times as there are numbers in the range (for me it is 5 times).


Here is how you duplicate characters (or sprites, as they are called):
Hold on where it is displayed below in your workspace if you are on a mobile device, or right click on it if you are on a computer/laptop.
————————————————————————————————————

It will give you three options(duplicate, export, and delete). Obviously, click duplicate (and not delete-that would be awful)

Notice that the code, too, is copied, which is what we want, so you don’t have to rewrite it

ps, it can be hard to do on a mobile device, so I would recommend doing this on a laptop or computer if you haven’t started doing any of this yet. I’d you have, don’t worry, it’s not that hard.

Also, tweak the location that each mole is set to go to. As of now, they are set to travel to the same place (unless you coded in a random location, in which case you can ignore what I’m saying).


Almost ready? Nice, we’re getting close to finishing...

Giving the Moles a Cue...

946DDCD2-EFD2-4266-891D-C91D50D68A10.jpeg

Here is where we will work with those ‘if’ pieces that we talked about earlier.


Go ahead and plug in the circular orange ‘my variable’ variable into a green ‘equals’ operator. On the other side of the equals thing put whatever number you would like that mole to correspond to(you should now have that ‘if’ piece on each mole, as the code was copied into each).

What you have just told the program is that when (or if) what you just entered(that ‘my variable’ equals that number) is the case, it should do the following (which we will code what to be in a second)

Now click on each mole, giving each a different number from the range of numbers you listed before. It’s a bit tedious, but not really(at least if you have much more than 5 like I do, in which case sorry)


Next, go to the looks section, and put the show block into hole in the ‘if’ block (because, if you remember, we had set it to hide when the green flag was clicked. Now, however, we want it to know to show whenever it’s number is generated)

A Little Code Debugging...

1BEECFB9-627F-4A60-8C21-C76D028343DD.jpeg

You know how we have this block on each of our moles’ code? Yeah, we can’t have that, because they are each programmed to set our variable to a random number at the same exact time, which will result in confusion. Odds are that the same random number will not be chosen, and so we must take out on all moles but one (we need it in one so that that number can still be chosen) to avoid confusion in the program.
Do not delete it, though, as it is still necessary. Just put it onto the side

Oh, and also, take away the hide button in the first mole(but none others)-you want it to be there when the green flag is this

Also, go to the first mole's code and tell it to set the variable to 'pick random 1 to ten' after it is clicked.

That’s all for this step

Coding What Happens When the Moles Are Clicked...

We now must code what will happen to the moles once they are clicked...

Luckily, you have your ‘when this sprite clicked’ piece ready to go, which was there before you duplicated it(I bet you’re thanking yourself for doing that).

Put the hide block underneath that.

Underneath that, place the 'set my variable [or whatever the name of your variable is] to pick random 1 to 5'.

Then, take a size setting block(under the looks section). Put the size at whatever it was originally, so it is this way next time the number generator lands on its number and it shows up again.

Great, you are pretty much done...

Finishing Touches...

We're just about finished

  • Here are some things you might consider adding in to enhance the game:A hammer animation when the moles are hit (this can be done by first drawing one as its own sprite, going to each mole and coding it to, when it is clicked, in addition to hiding and doing all of the stuff we coded in, send out a message or, as it is called in Scratch, a broadcast(found under the events section). A broadcast just announces things across different lines of code. This broadcast can then cue the hammer to appear, after being hidden. Then, you can code it to move or tilt in a certain way to make it look like it is actually whacking a mole.).

  • A sort of scoreboard that is set to increase its count each time a mole is clicked (there a bunch of Youtube videos on how to do this)

  • A penalty for not clicking the mole in a certain amount of time (this can be done through having it increase a different variable by a set amount each time a mole is pressed. Then, after a given amount of seconds, that number on the variable can also be transferred to another variable. You can put down an 'if' block establishing that, if the two numbers ever equal each other (remember that the equals piece is found in the operator section) then to make there be a consequence, such as the appearance of a 'you lose' sign or something).

Conclusion

Now we've made a whack-a-mole game


This can be applied to multiple different parts of games, and not just to this direct replication of a whack-a-mole arcade game. For example, I have made a game before about someone not having friends and having the object of trying to keep their friends inside a building so that they can't leave. They were captured by a tap to their character, and I used the same concept there as I did with this. If the variable was generated to its number, a sprite was assigned to appear.

Well, we're done. Thank you so much for reading this, and I hope I have gotten you somewhere in turns of improving your game designing abilities... Bye