Of all of the random things that happen here in the Axure offices, the most random is the “Fun with Random” challenge. The idea is to use Axure RP to design a game that involves a random element. Kip inspired us to inquire more with his Magic 8-Ball. Rachel stole all our money–and our hearts–with her Slot Machine. Alex piqued our curiosity with his Deal or No Deal. And Julie dealt us a wicked hand with her Game of Cards.
Now it’s time to rock and roll with my dice game, Threes!
You start with five dice. Your score will be calculated by what you roll. Each number is worth its face value, except threes, which are worth zero points. After each roll, you pick the dice you want to keep. You can keep as many dice as you want so long as you keep at least one per roll. No player would roll more than five times. Once you’ve picked all five dice, you’ve got your score and it’s the next player’s turn. The player with the lowest score wins. Remember, threes are worth zero points!
The real meat of this game is in the “PokerChip” Roll button.
I have five variables, Die1 – Die5, that are each set to a number between 1 and 6 using the following function:
“(Math.random() * 100).tofixed(0))” will give a random number between 0 and 99. The “%6” will spit out the remainder after dividing that number by 6, thus giving me a number between 0 and 5. To make things more intuitive to work with, the “+1” makes that a number between 1 and 6.
The magic here is actually that my dice are seven sided die! That’s right; lucky number seven! Each die is a Dynamic Panel (DP) (named “Die1”-”Die5”). Each die has seven states. States “1” - “6” are what you would expect they’d be, i.e. sides 1-6 of a die. “State7” is actually a nested six-state DP that has an OnLoad event that changes the state to “Next” every 200ms. This is where the rolling effect is coming from.
The “Roll” button sets these DPs to “State7”, waits for 3000ms, and then sets each DP to the appropriate state (1-6) designated by the value of the corresponding variable.
That pretty much sums up the random aspect of the game. There are a few other neat things here, though.
The question marks at the bottom are also the seventh side of a seven sided die (“Dieselect1”-“Diselect5”). When a rolled die (Die#) is picked (OnClick), it takes care of the scoring and Moves it over the corresponding static die (Dieselect#) before it is then hidden. The corresponding die is then set to the correct panel state.
The player info/scoring is maintained via a Repeater called “Players” and a “PlayerCount” variable that keeps track of how many players there are. The winning info is retrieved by sorting the the “Score” column of the “Players” Repeater to be in ascending numerical order, i.e. the lowest score is on top.
Next stop, Las Vegas!
I’ve attached the .rp file for anyone who wants it.
Threes.rp (271 KB)