Hello Axure Friends!
The Axure team is back in the kitchen with an entrée to add to the “Fun with Random” menu of games. We’ve cooked up games like Something Monsters, Rock, Paper, Scissors, Lizard, Spock, Threes!, Simon’s Great Sloth Hunt, Axure Quest VIII, The Monty Hall Problem, Julie's Game of Cards, and Deal or No Deal. Now it’s time to feast your eyes (and fingers) on a game guaranteed to get your tummy rumbling: Grub Guess!
The goal of Grub Guess is to score points by correctly identifying pictures of food. The catch is, you will only see a small part of the image, and time is ticking so be quick! Can’t guess the grub? Use the Move Image option to see a different part of the image. Guessed the grub correctly? You get points and more time to identify the next food item!
Here’s a breakdown of the scoring system:
Correct Guess: +100 Points | +3 seconds added to the clock
Wrong Guess: -10 Points
Move the Image: -10 Points
Now that you know the rules, it’s time to dig in:
See It Live! | GrubGuess.rp (18.1 MB)
Note: If you haven’t yet worked with repeaters, variables, conditional logic, and math functions you may want to read up on these topics before moving forward.
Randomizing the Images
Every time you get to guessin’ you'll see a random image. I set this up by placing each of the images in a separate state of a dynamic panel, FoodDP. The game decides which image to show by setting the dynamic panel to a random state.
You may be familiar with setting a dynamic panel to a specific state, but I’m setting mine at random by using the “Value” option of the Set Panel State action. This option lets you select a state by entering either its name or number (its position in the list of states). The power of this option is that you can dynamically pull in a state name or number via a variable or math expression. I'm using the expression below:
Math.floor(Math.random() * (20-1+1)) + 1)
This expression generates a random number between 1 and 20 (for my 20 states). To write this, I used the following general math expression:
Math.floor(Math.random() * (max-min +1)) + min
Where min is the lowest number we want and max is the highest number.
With my minimum and maximum values plugged in, the expression can be written more simply as:
Math.floor(Math.random() * (20)) + 1)
Viewing Different Parts of the Image
When it’s time to guess some new grub or whenever you use the Move Image option, the part of the image you see is also determined randomly.
I’ve done this by placing the FoodDP dynamic panel inside another, smaller dynamic panel, FrameDP. FrameDP has set dimensions that constrain how much of the image you see, allowing it to act as a sort of frame.
FoodDP is moved to a random location by using the same expression I mentioned earlier, but here I'm using it to calculate the X and Y values FoodDP will be moved to.
[[Math.floor(Math.random() * ((Target.width - FrameDPLV.width) + 1)) - (Target.width - FrameDPLV.width)]]
[[Math.floor(Math.random() * ((Target.height - FrameDPLV.height) + 1)) - (Target.height - FrameDPLV.height)]]
You’ll notice I’m subtracting FrameDPLV.width/height from Target.width/height in the expressions. I did this to make sure the edge of an image never falls inside the border of the frame, which prevents having empty space shown in the frame.
You’ll notice your score is updating in real time as you play the game. I did this by using a repeater, ScoreKeeper, and a global variable, TotalScoreGV.
The repeater acts as a local database; it has no widgets and only uses a single dataset column called “Score”. When you guess correctly, 100 points are added to your score by adding a new row to ScoreKeeper with an item.Score value of 100. When you guess incorrectly or use the Move Image action, 10 points are subtracted from your score by adding a new row with an item.Score value of -10.
All the rows in ScoreKeeper are then summed up and displayed. To sum the rows, whenever the ScoreKeeper’s OnItemLoad event fires, TotalScoreGV is set to the sum of its current value and the current row's Item.Score value:
[[TotalScoreGV + Item.Score]]. The value of TotalScoreGV is then displayed at the top right of the image frame by setting the text on the Score widget.
Tip: If you score 1,000 or more points before the timer ticks down to 0, you'll win a small surprise—get grubbin' to find out what it is!
Customizing the Game
Want to create your own version of this game featuring Cats? Celebrities? Spongebob Memes? Download the RP file, rename the dynamic panel states, and replace the images with your own! Happy Grub Guessin’ and have fun!