## How to play the game
In the shell game, three or more identical containers (which may be cups, shells, coconut shells, etc.) are placed face-down on a surface.
A small ball or coin is placed beneath one of these containers so that it cannot be seen, and they are then shuffled by the operator in plain view.
One or more players are invited to bet on which container holds the ball.
One or more players are invited to bet on which container holds the ball.
Where the game is played honestly, the operator can win if he shuffles the containers in a way which the player cannot follow.
Here is a short video using _brains_ instead of shells: https://www.youtube.com/watch?v=N6UNLHZgwfs
Here is a playable shell game with betting: http://mistupid.com/games/shellgame.htm
* Generate your shells, cococunts, cups, or brains, etc. with jQuery. Make them inside a loop.
* Put a start button the page. When the button is pressed
* a random shell will get the ball and display it.
* The start button will now display 'shuffle'. Functionally, it will now be a shuffle button.
* When the shuffle button is pressed
* The positions of the shells on the page should change places in random order. Display the shells in their new order.
* The ball will not be displayed.
* when the user clicks on the correct shell
* The ball will reappear
* The shuffle button will change to a 'reset' button that will set the game back to its original state when clicked
Here is a video of a much simpler version of the _brain_ game: https://www.youtube.com/watch?v=8uoDRHByKM4
Your game should at least be as functional as the simpler version of the _brain_ game.
## Remove cheating
Make it so the user cannot check in the 'Elements' tab to see which shell has the ball after they have been shuffled.
Here is a playable shell game with betting: http://mistupid.com/games/shellgame.htm
## User Stories
@ -55,61 +40,122 @@ Make it so the user cannot check in the 'Elements' tab to see which shell has th
3. The user should be able to then click the element, and the game should tell them whether or not they picked the correct one.
4. the user should be able to reset game and do it all over again.
## Animations
#### Fade
One of the simpler animation effects is the fade. If you fade out two cards and then fade them back in, you can create a way to visualize two cards switching.
#### Transitions and Transforms
A harder method is using transitions and transforms. Think about the location you want for each element and how to 'swap' these locations.
## STEPS AND COMMITS
There is no starter code for this homework, you are required to make the shell game from scratch.
* You can set up transforms in your javascript using `jQuery.css()`
```
$(element).css({transform: 'translate(' + value + 'px)'});
$(element).css({transition: 'all 0.4s ease-in'});
```
* You can also use `jQuery.css()` to trigger css keyframes by giving the element the applicable `animation-name`
* Set up your files and generate your elements: shells, coconuts, cups, or brains, etc. with jQuery. Make them inside a loop.
* Put a start button the page. When the button is pressed
* a random element will get the item (ball, coin, idea, etc.) and display it.
* The start button will now display 'shuffle'.
<hr>
** Commit your work.** <br>
The commit message should read: <br>
"Commit 2: on start button click, a random element displays the item".
<hr>
* When the shuffle button is pressed
* The positions of the elements on the page should change places in random order. Display the elements in their new order.
* The item will not be displayed.
<hr>
** Commit your work.** <br>
The commit message should read: <br>
"Commit 3: on shuffle button click, elements will shuffle".
<hr>
* when the user clicks on the correct element
* The item will reappear
* The shuffle button will now display 'reset'
<hr>
** Commit your work.** <br>
The commit message should read: <br>
"Commit 4: correct element click works".
<hr>
* When the reset button is clicked
* The game will return to its original state, and the shuffle button will now display 'start'
<hr>
** Commit your work.** <br>
The commit message should read: <br>
"Commit 5: reset button works".
<hr>
#### Looping transforms
If you try to repeat transforms in a regular for loop, it might not work so well. The reason is that the loop is so quick that it will end before even the first transform has finished.
* Make it so the shuffle happens multiple times, and not just once, when the `shuffle` button is clicked
Try using a setTimeout to repeat the transforms, with the second parameter slightly longer than the duration of the transform:
<hr>
** Commit your work.** <br>
The commit message should read: <br>
"Commit 6: shuffles more than once".
<hr>
```
var transformLoop = setTimeout(someFunction, 501);
```
Then you can stop the setTimeout using clearTimeout:
## Bonuses and Extras
- Make it so the user cannot check in the 'Elements' tab to see which element has the item after they have been shuffled.
<hr>
** Commit your work.** <br>
The commit message should read: <br>
"Commit 7: user cannot cheat".
<hr>
- The user should be able to see how many times s/he has won.
<hr>
** Commit your work.** <br>
The commit message should read: <br>
"Commit 8: user can see number of wins".
<hr>
- When the user has made an attempt at selecting the right element, turn off the click handler for the elements so the user can cannot keep trying to guess correctly.
<hr>
** Commit your work.** <br>
The commit message should read: <br>
"Commit 9: click handler for elements turned off".
<hr>
- The amount of times the elements swap on a shuffle is randomized.
<hr>
** Commit your work.** <br>
The commit message should read: <br>
"Commit 10: shuffles a random number of times".
<hr>
- The more times the user wins the game, the harder it gets (the faster the shuffle).
<hr>
** Commit your work.** <br>
The commit message should read: <br>
"Commit 11: shuffle gets faster when the user wins".
<hr>
```
clearTimeout(transformLoop);
```
## Animations
There are many ways to go about animating your shells/cups/brains in your game.
#### Fade
One of the simpler animation effects is the fade. If you fade out two elements and then fade them back in, you can create a way to visualize two elements switching.
#### Transforms
A harder method is using transforms. Think about the location you want for each element and how to 'swap' these locations. There are many ways to go about this, and it's up to you to problem-solve and explore.
## Bonuses and Extras
Make sure you define the `transition` parameters or you won't see the `transform` transitioning.
- The user should be able to see how many times s/he has won.
- The amount of times the cards swap on a shuffle is randomized.
- The more times the user completes the game, the harder it gets (the faster the shuffle).
* You could shuffle an element by setting a class on that element that has a transform property.
## Before you start writing code...
**ADVANCED**<br>
You could move things around by setting css transform values using `jQuery.css()`
More on this in **Hints, Tips and Tricks** below.
1. Write out the objects you think you'll need.
2. For each object, list its responsibilities. What data will it need to store? What methods will it need?
3. List all possible object-to-object interactions.
4. Draw a 'paper prototype' of the DOM model for your game. You'll use this to build it.
## Hints, Tips and Tricks
Here are some hints, tips and tricks that may or may not be applicable to you or the way you design your game, but they might help:
Here are some hints, tips and tricks that may or may not be applicable to you or the way you design your game, but they might help. Do not look at these if you haven't planned your game--they apply to many different ways of achieving the goal, and you might suffer from information overload. Scan through them to see if there anything helpful to your particular case.
* Remember this crucial difference:
* `$('div')` will _select_ all `div`s on the page
@ -119,9 +165,13 @@ Here are some hints, tips and tricks that may or may not be applicable to you or
* To stop inline-block elements from shifting due to the browser window size, try setting a `min-width` on the parent
* To make your cursor a pointer when you hover over an element, set its css to `cursor: pointer`.
* You can change the css of an element with jQuery `.css()`
http://www.w3schools.com/jquery/jquery_css.asp
* If you decide to shuffle elements by assigning classes that have transforms, you might run into problems when the user clicks to check for the correct element **if those elements also have an id**. In this case, think about how to design your game without ids. If you do decide to shuffle elements by assigning classes that have transforms, you shouldn't need to do any additional changing on the transforms using `jQuery.css()`
* To check if an element has a particular `id`, look into jQuery `.is()`
* You can use variables to get an element with jQuery.
@ -149,7 +199,6 @@ var giveValue = function() {
```
$(element).css({transform: 'translate(' + value + 'px)'});
$(element).css({transition: 'all 0.4s ease-in'});
```
* You can also use jQuery.css() to trigger css keyframes by giving the element the applicable `animation-name`
* If you need a function that will shuffle an array, it's fine to borrow one from StackOverflow. Alternatively, you could look into including the `underscore` library and using its shuffle method in your program. Remember, you can also select a random array index with `array[Math.floor(Math.random() * array.length)]`
* You can set multiple types of transforms to happen at the same time on an element. But, you cannot pile on or add more transforms to happen at the same time in different places in your code. If you want to add multiple transforms from different sources (say for example you want a regular transform to happen, AND you want a keyframe transform at the same time on the same element), you could set one of the transforms to happen on a **child** of the element instead.
* To make your cursor a pointer when you hover over an element, set its css to `cursor: pointer`.
* If you need a function that will shuffle an array (not recommended), it's fine to borrow one from StackOverflow. Alternatively, you could look into including the `underscore` library and using its shuffle method in your program.
* Remember, you can also select a random array index with `array[Math.floor(Math.random() * array.length)]`, and you can remove array elements with `.splice()`
* You can find the index of jQuery list items with `.index()`
#### Looping animations
If using keyframes, look into the `animation-iteration-count` property. You might be able to use this depending on how you intend to move your elements.
If you are using `jQuery.css` to add transforms and you try to repeat transforms in a regular **for loop**, it might not work so well. The reason is that the loop is so quick that it will end before even the first transform has finished.
Again, there are many ways to accomplish looping transforms.
* Your best bet using Google.
* There is an eventListener that will wait for an animation to finish (and you could then repeat the animation)
* Or try using a setTimeout to repeat the transforms, with the second parameter slightly longer than the duration of the transform:
```
var transformLoop = setTimeout(someFunction, 501);
```
Then you can stop the setTimeout using clearTimeout:
```
clearTimeout(transformLoop);
```
* You can find the index of jQuery list items with `.index()`
Thom Page
10 years ago
