Axure HQ is back once again with another project from the “Fun with Random” series, following on from previous projects such as Proto-typer!, Grub Guess, Roulette, Spot the Difference, AxZee! and A Game of Cards.
It’s simple, whack (click) the emoji every time it appears on a random square on the grid. The game lasts a minute, and you score 10 points every time you hit the emoji (BAM!) and lose 5 points every time that you miss (OOPS!).
Enjoy the game
The layout consists of a 3x3 grid, which is 9 individual squares aligned next to one another and set as dynamic panels to enable interactions and the changes of state.
The randomness is contained within a hidden Hotspot on the canvas, which is triggered once the “Start Game” button is clicked. To utilize the Math.random function, the 9 individual squares are named as numbers between 1-9.
The expression used to generate the random value is
[[Math.floor(Math.random() * (10-1) +1)]], “10-1” is the range of random values representing the 9 dynamic panel squares in the grid.
By default, generating a random value within a range of set values is inclusive at the lower end of the range, ie “1”; but exclusive at the higher end, “10”. The addition of “+1” to “10-1+1” makes the function inclusive at both ends. This makes it possible for the hotspot to move any of the 9 squares within the grid. After each move, the hotspot is reloaded after 750 milliseconds to trigger the next random move.
Each of the dynamic panel squares subsequently has a moved interaction to correspond to the movement of the random number from the Hotspot. The logic below shows that if the random number generated is the same as the “name” of the dynamic panel, the emoji will appear for 750 milliseconds before disappearing to appear on another square at random.
Each of the 9 dynamic panel squares has 6 different states corresponding to one another as well as to the timer and points variables.
Game Loaded - This is the state of the squares when the timer is at 0 (seconds) and before the game is started.
Emoji Hidden - This is the state of the square whilst the game is in progress and the emoji has not appeared in it.
Emoji Missed - This state is set if the square is clicked when the emoji is not present inside, 5 points are deducted from the total. After 500ms this square changes to the Emoji Hidden state.
Emoji Showing - As described previously, this is set if the random number generated from the hotspot matches the name of the square. This will result in the emoji being visible in the square before disappearing to another square. This is your opportunity to accumulate points!
Emoji Hit - This state is set if the emoji is clicked, 10 points are added to the total. The state then changes after 500ms to Emoji Hidden, and the hotspot is reloaded to generate another random number.
Game Over - This state is set when the timer is 61 seconds, signaling the end of the game, all the squares in the grid are disabled in this state.
That’s pretty much it if you would like to take a closer look at how this was all put together, you can download the project here: Whack_Emoji.rp (1.7 MB)