diff --git a/unit_01/w03d05/homework/shell_game.md b/unit_01/w03d05/homework/shell_game.md new file mode 100644 index 0000000..663bf9d --- /dev/null +++ b/unit_01/w03d05/homework/shell_game.md @@ -0,0 +1,122 @@ +![ga](http://mobbook.generalassemb.ly/ga_cog.png) + +# WDI-PANTHALASSA + +--- +Title: Shell game
+Type: Homework
+Duration: Weekend
+Creator: Kristyn Bryan
+Adapted by: Thom Page +Course: WDIr-Panthalassa
+Competencies: jQuery, JS game logic, CSS transitions
+ +--- + + + +# Let's Create a Shell Game! + +![Shell game and cat](https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcS2L-3nfFsTsQtoeeN4XGFheORdbLpmAH6eU3lbpeYSK9AR1EGn) + +## 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 . +Where the game is played honestly, the operator can win if he shuffles the containers in a way which the player cannot follow. +See this website for an example: http://mistupid.com/games/shellgame.htm + + + +* Generate your shells 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 + * Without yet using any animations, the positions of the shells on the page should randomize. 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 + + + + +## 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. + + +## 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: + +* Remember this crucial difference: + * `$('div')` will _select_ all `div`s on the page + * `$('
')` will _create_ a new `div` +
+* To stop an element from shifting down when text is added, try +setting `overflow: hidden` to the css of that element. + +* To stop inline-block elements from shifting due to the browser window size, try setting a `min-width` on the parent + +* You can change the css of an element with jQuery `.css()` +http://www.w3schools.com/jquery/jquery_css.asp + +* To check if an element has a particular `id`, look into jQuery `.is()` + +* If you want a variable to be globally available to changes within your functions, define it first outside of your functions (it doesn't need to have a value) + +``` +var someNumber; + +var giveValue = function() { + someNumber = 1; +} +``` + +* You can use variables to get an element with jQuery. + +``` +var someNumber = 1; + +$('#' + someNumber) + +// gets the element with an id of 1 +``` + +* 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 + +* To make your cursor a pointer when you hover over an element, set its css to `cursor: pointer`. + +* You can find the index of jQuery list items with `.index()` + + + + + + +## User Stories + +1. The user should be able to see where the 'ball' is originally. +2. The user should be able to start the shuffling sequence and follow (even if it's difficult) the card/coconut/cup. The shuffling should be random. +3. The user should be able to then click a card, 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. + +## How do we get the 'shuffle' animation? + +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. + +A harder method (and easier on the eyes) is using transitions. Think about the location you want for each card and how to 'swap' these locations. + +## Bonuses and Extras + +- 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). + +## Before you start writing code... + +1. Write out the objects you think you'll need. +2. For each object, list its responsiblities. 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. \ No newline at end of file diff --git a/unit_01/w03d05/homework/shell_game_solution/app.js b/unit_01/w03d05/homework/shell_game_solution/app.js new file mode 100644 index 0000000..6b2b69f --- /dev/null +++ b/unit_01/w03d05/homework/shell_game_solution/app.js @@ -0,0 +1,165 @@ +$(function() { + + console.log('app.js jquery'); + + var $board = $('#board'); + var $startShuffle = $('#start-shuffle'); + var $message = $('#message'); + + var brainNum = 5; + var gamesPlayed = 0; + var wins = 0; + + var randomBrain; + var state; + + var reset = function() { + state = "start"; + $startShuffle.text("START"); + $startShuffle.css('background-color', 'cadetblue'); + $startShuffle.css('color', 'white'); + $message.text('Click Start to give a brain an idea'); + $board.html(""); + + for (var i=0; i < brainNum; i ++) { + var $brain = $('
').attr('id', i); + $brain.addClass('brain'); + $brain.html(''); + $board.append($brain); + } + randomBrain = Math.floor(Math.random() * brainNum); + } + + // run the reset function on window onload + reset(); + + $startShuffle.click(function() { + console.log('start clicked'); + if (state === "start") { + giveIdea(); + } else if (state === "shuffle") { + $('#' + randomBrain).html(''); + shuffleBrains(); + } else if (state === "reset") { + reset(); + } + }); + + var giveIdea = function() { + console.log('give idea function'); + $('#' + randomBrain).html(''); + $startShuffle.text('SHUFFLE'); + $startShuffle.css('background-color', 'coral'); + $message.text("Press SHUFFLE to shuffle the brains"); + state = "shuffle"; + } + + // run recursively according to the counter + var counter = 0; + var shuffleBrains = function() { + console.log('shuffle brains function running recursively'); + + var positions = []; + for (var i=0; i < brainNum; i++) { + positions.push(i); + } + + var horizontals = [0, 205, 410, 615, 820, 1025, 1230, 1435]; + + var $allBrains = $('.brain'); + + $allBrains.each(function(index, value) { + var newIndex = positions.splice(Math.floor(Math.random() * positions.length), 1); + $('#' + index).css({transform: 'translate(' + ((newIndex * 205) - horizontals[index]) + 'px)'}); + $('#' + index).css({transition: 'all 0.4s ease-in'}); + $('#' + index + ' img').css({ animationName: 'brainsize' }); + }); + + var brainLoop = setTimeout(shuffleBrains, 501); + + counter++; + if (counter == 10) { + clearTimeout(brainLoop); + counter = 0; + $message.text('Click on the brain you think is right!'); + $startShuffle.html(''); + $startShuffle.css('background-color', 'ivory'); + + $('.brain').click(checkBrain); + } + } + + var checkBrain = function() { + if ($(this).is('#' + randomBrain)) { + $('#message').text("THIS IS THE BRAIN!!!"); + $('#' + randomBrain).html(''); + wins++; + } else { + $('#message').text('Not the brain . . . '); + } + state = "reset"; + $startShuffle.css('display', 'inline-block'); + $startShuffle.text('RESET'); + $startShuffle.css('background-color', 'black'); + $startShuffle.css('color', 'white'); + gamesPlayed++ + $('#wins').text('WINS: ' + wins + ' out of ' + gamesPlayed); + } + +}); // end window.onload + + + + + + // shuffle($allBrains); + + // + + // var idx0 = $allBrains.index($('#0')); + // $('#0').css({transform: 'translate(' + (idx0 * 205) + 'px)'}); + // $('#0').css({transition: 'all 0.4s ease-in'}); + // $('#0 img').css({ animationName: 'brainsize' }); + + // var idx1 = $allBrains.index($('#1')); + // $('#1').css({transform: 'translate(' + ((idx1 * 205) - 205) + 'px)'}); + // $('#1').css({transition: 'all 0.4s ease-in'}); + // $('#1 img').css({ animationName: 'brainsize' }); + + + // var idx2 = $allBrains.index($('#2')); + // $('#2').css({transform: 'translate(' + ((idx2 * 205) - 410) + 'px)'}); + // $('#2').css({transition: 'all 0.4s ease-in'}); + // $('#2 img').css({ animationName: 'brainsize' }); + + + // var idx3 = $allBrains.index($('#3')); + // $('#3').css({transform: 'translate(' + ((idx3 * 205) - 615) + 'px)'}); + // $('#3').css({transition: 'all 0.4s ease-in'}); + // $('#3 img').css({ animationName: 'brainsize' }); + + // var idx4 = $allBrains.index($('#4')); + // $('#4').css({transform: 'translate(' + ((idx4 * 205) - 820) + 'px)'}); + // $('#4').css({transition: 'all 0.4s ease-in'}); + // $('#4 img').css({ animationName: 'brainsize' }); + + + + + // shuffle borrowed from Stack Overflow + // var shuffle = function(array) { + // var counter = array.length; + // // While there are elements in the array + // while (counter > 0) { + // // Pick a random index + // var index = Math.floor(Math.random() * counter); + // // Decrease counter by 1 + // counter--; + // // And swap the last element with it + // var temp = array[counter]; + // array[counter] = array[index]; + // array[index] = temp; + // } + + // return array; + // } \ No newline at end of file diff --git a/unit_01/w03d05/homework/shell_game_solution/brain.png b/unit_01/w03d05/homework/shell_game_solution/brain.png new file mode 100644 index 0000000..19100f9 Binary files /dev/null and b/unit_01/w03d05/homework/shell_game_solution/brain.png differ diff --git a/unit_01/w03d05/homework/shell_game_solution/braincon.png b/unit_01/w03d05/homework/shell_game_solution/braincon.png new file mode 100644 index 0000000..5226164 Binary files /dev/null and b/unit_01/w03d05/homework/shell_game_solution/braincon.png differ diff --git a/unit_01/w03d05/homework/shell_game_solution/brainlight.png b/unit_01/w03d05/homework/shell_game_solution/brainlight.png new file mode 100644 index 0000000..fca9a5c Binary files /dev/null and b/unit_01/w03d05/homework/shell_game_solution/brainlight.png differ diff --git a/unit_01/w03d05/homework/shell_game_solution/index.html b/unit_01/w03d05/homework/shell_game_solution/index.html new file mode 100644 index 0000000..d2ad32c --- /dev/null +++ b/unit_01/w03d05/homework/shell_game_solution/index.html @@ -0,0 +1,26 @@ + + + + + + + + + + +
+ +
+
START
+
+
+ +
+ +

+
WINS:
+ +
+ + + \ No newline at end of file diff --git a/unit_01/w03d05/homework/shell_game_solution/lightbulb.png b/unit_01/w03d05/homework/shell_game_solution/lightbulb.png new file mode 100644 index 0000000..a70f358 Binary files /dev/null and b/unit_01/w03d05/homework/shell_game_solution/lightbulb.png differ diff --git a/unit_01/w03d05/homework/shell_game_solution/style.css b/unit_01/w03d05/homework/shell_game_solution/style.css new file mode 100644 index 0000000..864643d --- /dev/null +++ b/unit_01/w03d05/homework/shell_game_solution/style.css @@ -0,0 +1,70 @@ +body { + font-family: monospace; +} + +#container { + width: 1200px; + height: 440px; + border: 1px solid black; + text-align: center; + margin: 0 auto; + border-radius: 15px; + background-color: ivory; +} + +#top { + margin-top: 20px; +} + +#start-shuffle { +/* display: inline-block;*/ + width: 100px; height: 40px; + margin: 0 auto; +/* margin-left: 5px; + margin-bottom: 5px;*/ + text-align: center; + cursor: pointer; + line-height: 40px; + vertical-align: center; + border-radius: 5px; + font-size: 20px; +} + +#message { +/* display: inline-block;*/ + line-height: 40px; +} + +#board { + min-width: 1200px; +} + +.brain { + display: inline-block; + height: auto; width: auto; + margin-left: 5px; + margin-top: 20px; +} + +#wins { + margin-top: 100px; +} + +img { + animation-duration: 0.5s; + animation-iteration-count: 10; +} + +@keyframes brainsize { + 0% { transform: scale(1); } + 50% { transform: scale(0.6) translateY(200px); } + 100% { transform: scale(1); } +} + + + + + + + +