Thom Page
10 years ago
parent
2656dd3f58
commit
7ec9477360
@ -0,0 +1,122 @@
|
||||
|
||||
|
||||
# WDI-PANTHALASSA
|
||||
|
||||
---
|
||||
Title: Shell game<br>
|
||||
Type: Homework<br>
|
||||
Duration: Weekend <br>
|
||||
Creator: Kristyn Bryan <br>
|
||||
Adapted by: Thom Page
|
||||
Course: WDIr-Panthalassa<br>
|
||||
Competencies: jQuery, JS game logic, CSS transitions<br>
|
||||
|
||||
---
|
||||
|
||||
|
||||
|
||||
# Let's Create a Shell Game!
|
||||
|
||||
|
||||
|
||||
## 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
|
||||
* `$('<div>')` will _create_ a new `div`
|
||||
<br>
|
||||
* 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.
|
||||
@ -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 = $('<div>').attr('id', i);
|
||||
$brain.addClass('brain');
|
||||
$brain.html('<img src="brain.png"/>');
|
||||
$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('<img src="brain.png"/>');
|
||||
shuffleBrains();
|
||||
} else if (state === "reset") {
|
||||
reset();
|
||||
}
|
||||
});
|
||||
|
||||
var giveIdea = function() {
|
||||
console.log('give idea function');
|
||||
$('#' + randomBrain).html('<img src="brainlight.png"/>');
|
||||
$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('<img src="braincon.png"/>');
|
||||
$startShuffle.css('background-color', 'ivory');
|
||||
|
||||
$('.brain').click(checkBrain);
|
||||
}
|
||||
}
|
||||
|
||||
var checkBrain = function() {
|
||||
if ($(this).is('#' + randomBrain)) {
|
||||
$('#message').text("THIS IS THE BRAIN!!!");
|
||||
$('#' + randomBrain).html('<img src="brainlight.png"/>');
|
||||
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;
|
||||
// }
|
||||
|
After Width: | Height: | Size: 47 KiB |
|
After Width: | Height: | Size: 6.1 KiB |
|
After Width: | Height: | Size: 52 KiB |
@ -0,0 +1,26 @@
|
||||
<html>
|
||||
<head>
|
||||
<title></title>
|
||||
<link rel="stylesheet" type="text/css" href="style.css">
|
||||
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
|
||||
|
||||
<script type="text/javascript" src="app.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="container">
|
||||
|
||||
<div id="top">
|
||||
<div id="start-shuffle">START</div>
|
||||
<div id="message"></div>
|
||||
</div>
|
||||
|
||||
<div id="board"></div>
|
||||
|
||||
<br><br>
|
||||
<div id="wins">WINS:</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
After Width: | Height: | Size: 59 KiB |
@ -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); }
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Loading…
Reference in new issue