diff --git a/unit_01/w03d05/homework/shell_game_solution/app.js b/unit_01/w03d05/homework/brain_game_complex/app.js similarity index 78% rename from unit_01/w03d05/homework/shell_game_solution/app.js rename to unit_01/w03d05/homework/brain_game_complex/app.js index a5bd45d..23350f9 100644 --- a/unit_01/w03d05/homework/shell_game_solution/app.js +++ b/unit_01/w03d05/homework/brain_game_complex/app.js @@ -6,7 +6,6 @@ $(function() { var $startShuffle = $('#start-shuffle'); var $message = $('#message'); - var brainNum = 5; var gamesPlayed = 0; var wins = 0; @@ -21,7 +20,7 @@ $(function() { $message.text('Click Start to give a brain an idea'); $board.html(""); - for (var i=0; i < brainNum; i ++) { + for (var i=0; i < 5; i ++) { var $brain = $('
').attr('id', i); $brain.addClass('brain'); $brain.html(''); @@ -32,9 +31,7 @@ $(function() { // run the reset function on window onload reset(); - $startShuffle.click(function() { - console.log('start clicked'); - randomBrain = Math.floor(Math.random() * brainNum); + $startShuffle.click(function() { if (state === "start") { giveIdea(); } else if (state === "shuffle") { @@ -46,7 +43,7 @@ $(function() { }); var giveIdea = function() { - console.log('give idea function'); + randomBrain = Math.floor(Math.random() * 5); $('#' + randomBrain).html(''); $startShuffle.text('SHUFFLE'); $startShuffle.css('background-color', 'coral'); @@ -54,24 +51,16 @@ $(function() { state = "shuffle"; } - // run recursively according to the counter + // run recursively according to the counter, to repeat animations 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'); + var positions = [0, 1, 2, 3, 4]; + var horizontals = [0, 205, 410, 615, 820]; - $allBrains.each(function(index, value) { + $('.brain').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' }); }); @@ -97,6 +86,7 @@ $(function() { } else { $('#message').text('Not the brain . . . '); } + $('.brain').off('click', checkBrain); state = "reset"; $startShuffle.css('display', 'inline-block'); $startShuffle.text('RESET'); @@ -106,4 +96,6 @@ $(function() { $('#wins').text('WINS: ' + wins + ' out of ' + gamesPlayed); } -}); // end window.onload \ No newline at end of file +}); // end window.onload + + diff --git a/unit_01/w03d05/homework/shell_game_solution/brain.png b/unit_01/w03d05/homework/brain_game_complex/brain.png similarity index 100% rename from unit_01/w03d05/homework/shell_game_solution/brain.png rename to unit_01/w03d05/homework/brain_game_complex/brain.png diff --git a/unit_01/w03d05/homework/shell_game_solution/braincon.png b/unit_01/w03d05/homework/brain_game_complex/braincon.png similarity index 100% rename from unit_01/w03d05/homework/shell_game_solution/braincon.png rename to unit_01/w03d05/homework/brain_game_complex/braincon.png diff --git a/unit_01/w03d05/homework/shell_game_solution/brainlight.png b/unit_01/w03d05/homework/brain_game_complex/brainlight.png similarity index 100% rename from unit_01/w03d05/homework/shell_game_solution/brainlight.png rename to unit_01/w03d05/homework/brain_game_complex/brainlight.png diff --git a/unit_01/w03d05/homework/shell_game_solution/index.html b/unit_01/w03d05/homework/brain_game_complex/index.html similarity index 93% rename from unit_01/w03d05/homework/shell_game_solution/index.html rename to unit_01/w03d05/homework/brain_game_complex/index.html index d2ad32c..f321890 100644 --- a/unit_01/w03d05/homework/shell_game_solution/index.html +++ b/unit_01/w03d05/homework/brain_game_complex/index.html @@ -1,6 +1,6 @@ - + BRAIN GAME diff --git a/unit_01/w03d05/homework/shell_game_solution/lightbulb.png b/unit_01/w03d05/homework/brain_game_complex/lightbulb.png similarity index 100% rename from unit_01/w03d05/homework/shell_game_solution/lightbulb.png rename to unit_01/w03d05/homework/brain_game_complex/lightbulb.png diff --git a/unit_01/w03d05/homework/shell_game_solution/style.css b/unit_01/w03d05/homework/brain_game_complex/style.css similarity index 94% rename from unit_01/w03d05/homework/shell_game_solution/style.css rename to unit_01/w03d05/homework/brain_game_complex/style.css index 864643d..2a4b5d5 100644 --- a/unit_01/w03d05/homework/shell_game_solution/style.css +++ b/unit_01/w03d05/homework/brain_game_complex/style.css @@ -43,7 +43,8 @@ body { display: inline-block; height: auto; width: auto; margin-left: 5px; - margin-top: 20px; + margin-top: 20px; + transition: all 0.4s ease-in; } #wins { diff --git a/unit_01/w03d05/homework/brain_game_simple/app.js b/unit_01/w03d05/homework/brain_game_simple/app.js new file mode 100644 index 0000000..e285c34 --- /dev/null +++ b/unit_01/w03d05/homework/brain_game_simple/app.js @@ -0,0 +1,95 @@ +// This is the simple version of brain game. It shuffles only once, +// and does so by setting a class on an element to shift it. +// In this version, there are no ids, and a elements will only +// receive a single class (so there are some workarounds with these restrictions). + +$(function() { + + console.log('app.js jquery'); + + var $board = $('#board'); + var $startShuffle = $('#start-shuffle'); + var $message = $('#message'); + + // variables declared globally for use in all functions + var randomBrain; var state; + + // resets the board, the start button, and the message prompt + 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 < 3; i ++) { + var $brain = $('
'); + $brain.addClass('position' + i); + $brain.html(''); + $board.append($brain); + } + } + + // run the reset function on window onload + reset(); + + // click handler for the start button, + // changes which function is invoked depending on the stage of the game + $startShuffle.click(function() { + if (state === "start") { + giveIdea(); + } else if (state === "shuffle") { + shuffleBrains(); + } else if (state === "reset") { + reset(); + } + }); + + // selects a random brain, sets the randomBrain variable, shows the light, and sets the + // state variable for the start button + var giveIdea = function() { + randomBrain = Math.floor(Math.random() * 3); + $('.position' + randomBrain).html(''); + $startShuffle.text('SHUFFLE'); + $startShuffle.css('background-color', 'coral'); + $message.text("Press SHUFFLE to shuffle the brains"); + state = "shuffle"; + } + + // shuffles the brains on the page + var shuffleBrains = function() { + $('.position' + randomBrain).html(''); + var positions =[0, 1, 2]; + var assigned = false; + + // loops over all the brains (the children on the board) + // and gives them a new random position class. + // also sets click events for each. + $board.children().each(function() { + var newPosition = positions.splice(Math.floor(Math.random() * positions.length), 1); + if (!assigned) { + if ($(this).hasClass('position' + randomBrain)) { + randomBrain = newPosition[0]; + assigned = true; + } + } + $(this).attr('class', 'position' + newPosition[0]); + $(this).click(checkBrain); + }); + } + + // checks if the selected brain is the correct one + var checkBrain = function() { + if ($(this).hasClass('position' + randomBrain)) { + $('#message').text("THIS IS THE BRAIN!!!"); + $(this).html(''); + } else { + $('#message').text('Not the brain . . . '); + } + state = "reset"; + $startShuffle.text('RESET'); + $startShuffle.css('background-color', 'black'); + $startShuffle.css('color', 'white'); + } + +}); // end window.onload \ No newline at end of file diff --git a/unit_01/w03d05/homework/shell_game_solution_2/brain.png b/unit_01/w03d05/homework/brain_game_simple/brain.png similarity index 100% rename from unit_01/w03d05/homework/shell_game_solution_2/brain.png rename to unit_01/w03d05/homework/brain_game_simple/brain.png diff --git a/unit_01/w03d05/homework/shell_game_solution_2/braincon.png b/unit_01/w03d05/homework/brain_game_simple/braincon.png similarity index 100% rename from unit_01/w03d05/homework/shell_game_solution_2/braincon.png rename to unit_01/w03d05/homework/brain_game_simple/braincon.png diff --git a/unit_01/w03d05/homework/shell_game_solution_2/brainlight.png b/unit_01/w03d05/homework/brain_game_simple/brainlight.png similarity index 100% rename from unit_01/w03d05/homework/shell_game_solution_2/brainlight.png rename to unit_01/w03d05/homework/brain_game_simple/brainlight.png diff --git a/unit_01/w03d05/homework/shell_game_solution_2/index.html b/unit_01/w03d05/homework/brain_game_simple/index.html similarity index 86% rename from unit_01/w03d05/homework/shell_game_solution_2/index.html rename to unit_01/w03d05/homework/brain_game_simple/index.html index d2ad32c..58377a2 100644 --- a/unit_01/w03d05/homework/shell_game_solution_2/index.html +++ b/unit_01/w03d05/homework/brain_game_simple/index.html @@ -15,10 +15,8 @@
-
- -

-
WINS:
+
+
diff --git a/unit_01/w03d05/homework/shell_game_solution_2/lightbulb.png b/unit_01/w03d05/homework/brain_game_simple/lightbulb.png similarity index 100% rename from unit_01/w03d05/homework/shell_game_solution_2/lightbulb.png rename to unit_01/w03d05/homework/brain_game_simple/lightbulb.png diff --git a/unit_01/w03d05/homework/shell_game_solution_2/style.css b/unit_01/w03d05/homework/brain_game_simple/style.css similarity index 52% rename from unit_01/w03d05/homework/shell_game_solution_2/style.css rename to unit_01/w03d05/homework/brain_game_simple/style.css index 864643d..f131b60 100644 --- a/unit_01/w03d05/homework/shell_game_solution_2/style.css +++ b/unit_01/w03d05/homework/brain_game_simple/style.css @@ -3,10 +3,9 @@ body { } #container { - width: 1200px; + width: 800px; height: 440px; border: 1px solid black; - text-align: center; margin: 0 auto; border-radius: 15px; background-color: ivory; @@ -16,54 +15,46 @@ body { 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; + text-align: center; } #board { - min-width: 1200px; + margin-left: 35px; + min-width: 800px; } -.brain { - display: inline-block; +#board * { + position: absolute; + top: 80px; + left: 90px; height: auto; width: auto; - margin-left: 5px; - margin-top: 20px; + transition: all 0.4s ease-in; } -#wins { - margin-top: 100px; +.position0 { + transform: translateX(0px); } -img { - animation-duration: 0.5s; - animation-iteration-count: 10; +.position1 { + transform: translateX(250px); } -@keyframes brainsize { - 0% { transform: scale(1); } - 50% { transform: scale(0.6) translateY(200px); } - 100% { transform: scale(1); } +.position2 { + transform: translateX(500px); } - - - +#start-shuffle { + width: 100px; height: 40px; + margin: 0 auto; + text-align: center; + cursor: pointer; + line-height: 40px; + vertical-align: center; + border-radius: 5px; + font-size: 20px; +} diff --git a/unit_01/w03d05/homework/shell_game_solution_2/app.js b/unit_01/w03d05/homework/shell_game_solution_2/app.js deleted file mode 100644 index a5bd45d..0000000 --- a/unit_01/w03d05/homework/shell_game_solution_2/app.js +++ /dev/null @@ -1,109 +0,0 @@ -$(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); - } - } - - // run the reset function on window onload - reset(); - - $startShuffle.click(function() { - console.log('start clicked'); - randomBrain = Math.floor(Math.random() * brainNum); - 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 \ No newline at end of file