Howdy!
Axure HQ has another addition to the “Fun With Random” series to share with you today!
Past Fun With Random games include Chelsea’s Something Monsters game, Alyssa’s Rock, Paper, Scissors, Lizard, Spock , the infamous Monty Hall Problem created by Jonathan, and other classics such as Axure Quest VIII , Julie’s Game of Cards, and Deal or No Deal. In the newest installment of the Fun with Random game series, I’m presenting my rendition of a classic game that’ll still leave you stumped: Spot the Difference!
In this game, your attention to detail will be greatly tested. The primary objective is to spot the 10 differences between a set of nearly identical photos as quickly as you can. The game has 10 rounds, giving you ample opportunity to improve your attentive skills, or get frustrated and fall to your demise (let’s hope for the former). During the game, whenever you find a difference between the two photos, click on that difference (from the photo on the right). If you are correct, a red circle will appear and you will get one point. There is also a timer running through the entire game, and once you get to the end, your final score and time will be displayed.
Here’s where things get tricky… if you get stumped, you have the option to click the hint button to help you find an answer. However, everytime you click the hint button, 30 seconds will be added to the clock. The hints are also randomly chosen via the Math.random expression, which means you run the risk of receiving the same hint twice (or even over and over again), thus wasting more time.
Breakdown of the game:
The game itself is fairly simple. When the player finds one of the differences between a set of photos, they’ll click on that spot, and if correct, a circle will appear. These circles are ellipse widgets that I set to be hidden. I then added a hotspot over them, which is what the player clicks on. Each hotspot has a Mouse Button Down interaction with a Show/Hide event to show the hidden ellipse widget, and to hide the hotspot itself, which renders it disabled once the player clicks on it (so that the player can’t continue to rack up points by clicking on the same hotspot over and over again). The key components of the game that utilize global variables, repeaters, the Math.Random expression, and overall more complex interactions are the scorekeeper, the timer, and the randomized hints.
The Scorekeeper:
In addition to the Show/Hide events, the hotspots that overlay the ellipse widgets also have Set Variable Value and Set Text events to add a point to both the overall score and the score for each round. I used global variables for each round’s scorekeeper and for the total score that is displayed at the end.
The Timer:
After the player reads the instructions and clicks the Start button on the front page, they are taken to page 2, which starts the game and allows the timer to start ticking. I again used a global variable (which I named CounterVar) for the timer, and set the variable value using the expression: [[CounterVar+1]]. When setting the text on the timer, I knew I wanted it to display the time as minutes and seconds, so I used the expression:
[[‘0’.concat(Math.floor(CounterVar/60)).slice(-2)]]:[[‘0’.concat(CounterVar%60).slice(-2)]]
Randomized Hints:
On to the most fun part of the game: the hints. When building the game, even I was having trouble spotting all of the differences between the photos, so I figured that players might want a few hints. However, I didn’t want to make it too easy, so I decided to make receiving a hint add 30 seconds to the clock each time, and to make the hints randomly selected. Since the hints are randomly selected, it doesn’t take into account the answers that you already have right, which means that you run the risk of the hint not being helpful, and it also makes it possible for you to receive the same hint multiple times, while still adding 30 seconds to your time everytime you click the hint button. The hint button definitely requires the player to perform a cost-benefit analysis.
In order to hide and display the hints, I used two repeaters. One of the repeaters (named Hint Source) holds the hints I created and assigns them a number, and the other one (named Target) displays the hint once the player clicks the hint button. I made the hint button generate a random hint by using the expression:
[[Math.floor(Math.random() * 4) + 1]]
Math.random() returns a random number between 0 and 1, which is then multiplied by 4 (the number of hints for that round). Math.floor takes that number and returns an integer by rounding it down. This returns a random integer between 0 and 3, and adding 1 gives a range of 1 to 4, which allows for hints 1-4 to be selected randomly. For rounds that only have 3 hints, I simply replaced the 4 in the expression with a 3.
That pretty much sums up how I built the game. If you want to take a closer look at the inner workings of my game, feel free to open the attached .rp file. I’d love to hear any questions or feedback that you may have!
ConnorsGame.rp (7.6 MB)