This game is a digital version of the famous party game charades, but in reverse. You pick a theme and then everyone else has to act out a word for you to guess. You only have a minute so try and guess using people’s clues. You can use just acting for hard, or let people speak to make it easier. But they can’t use the word/s you are trying to guess!
If your team say you have the right answer then swipe right for the next starter – or if they are stumped on how to act it out they can ask you to swipe left and pass.
Try and get the highest score you can in a minute.
Creating the game
So to create this game we need some themes and some lists of starter questions. We can create those as feeds using cloud.umajin.com.
Here we can see four starters setup, animals, instruments, food and sport.
If you make a feed yourself you can toggle into JSON mode (the top left button toggles between the two sideways triangles and grid mode, you can switch just by clicking). Then paste in the JSON you can copy from here;
Once you have your feeds setup you can create a feedlist on the home page with the themes and then a feed item view on a new game page with the starters connected. Clicking on the theme feedlist can call some javascript we have written to prepare a list of starters and shuffle them so when you begin the game the starters are random. This video gives you an overview of the project, we will have downloads and more details after the video.
Actions
To start with we setup actions on the press event of our feedlist containing the themes. This does a few things. First it calls our special Javascript function to randomise the starters. Then it plays a click sound. Then it fades out the feedlist and waits. The click and the fade let the user know they picked a theme and gives them time to put the smartphone on their forehead without seeing the first starter! Once the 2 second wait is done the showpage actions moves through to the game page.
The game page is pretty simple. On the main page there are actions added for swipe left and swipe right. These might seem around the wrong way, but because the phone is on the users forehead facing outwards.. it is swapped around from their perspective. The swipes play a sound effect and trigger the Javascript for the next card or to pass a card.
Javascript
The code uses two important ideas, first it reads the JSON data from the starters feed into Javascript so that we can filter it by theme and shuffle the entries so the game is random. The second idea is to build up a new Javascript array we turn into JSON and use as a feed for the results page. We actually list the starter and add a tick.png if you got it right, and a cross.png if you got it wrong. This is a custom feed which makes it easy to have a list of results on the final page!
note: getData and setData are also used to keep the users results by setting and getting them out of the main button on the game page. This is a handy way of maintaining state without using global javascript arrays.
Have Fun!
Cheers
David