3 x Javascript popup games

Job ID: 35797339

Budget: $250 – $750 USD

You must have a strong background in creating javascript games.
We will provide the creative, but you must have a creative ability to modify and adjust designs to look good.

We're looking to create 3 x games each provided in an html wrapper. We will open them in a popup div from our application.

The requirements are:

1) Games must be mobile responsive
2) Each game will generate a score in the background. For the wheel of fortune, each 'slice' will have a pre-defined value. For the treasure hunt game, each grid section will have a pre-defined value, for the scratch card, there will be 10 potential values (1-10) which will be displayed at random each time the game is played.
3) Once a game is completed, it will show a message based on the value that has been generated.
4) We need to be able to easily edit the files to determine what message relates to what value.
5) We need to be able to easily edit the files to determine which values represent a 'win'.
6) When someone does win, an animated screen with 'You won' is displayed with confetti falling.
7) When someone doesn't win, an animated screen with rain falling saying "Sorry, better luck next time"
8) The game must pass back/output the value for the given user for us to capture on our php page.
9) The game must receive and pass back a session ID securely
10) The winning score should be hashed with session ID so user cannot easily identify the way to win without playing.
11) The games must be lightweight (under 2mb)
12) Any 3rd party dependencies such as css, js, must be from official trusted sources and we will need to be able to host any 3rd party files on our own servers if we choose.

When we initialise the game we will pass a session ID
When the game ends, we will check the session ID and also the score to finish the journey on our pages.

game.start({ id: sessionId });
game.on("result", ({ id, score }) => {
// Check session ID is valid
if (id === sessionId) {
console.log("score:", score);
$('#score').val( score);
setTimeout(function(){
$('form#comp_form').submit();
},5000);
$(".gamebutton").off("click");
}
});

THE GAMES

Game 1 - Wheel fo fortune. Customer can spin a wheel and it will spin fast and slow down, finally stopping at random on a 'slice'. There are 32 slices. Each has a colour and a value and whichever it lands on will be the 'score'. If the score matches the winning score, the user is a winner. That score is passed back to us when the game closes.

Game 2 - Treasure hunt. An image with a 5x5 grid on top. User places an X on one square and submits. Game determines the score for that square. If it matches the winning score, the user is a winner. That score is passed back to us when the game closes.

Game 3 - Scratchcard. User scratches out 9 boxes to see if they have a matching set. Under each box is an image generated at random from a set of 3 images. Each image has a value. The score is the sum of the values that are scratched out.
Related categories: JavaScript CSS HTML5 HTML jQuery / Prototype