Created
February 7, 2017 21:12
-
-
Save furball514/c2553d371da3fbe071efaf3fdead5b46 to your computer and use it in GitHub Desktop.
Simon Memory Game
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!--LOOK AT BROWSER CONSOLE OR LOCAL CONSOLE TO SEE WHY YOU LOST --> | |
| <head> | |
| <link href="https://fonts.googleapis.com/css?family=Permanent+Marker" rel="stylesheet"> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <h1 class="text-center"> | |
| <span class="fa fa-gamepad"> <p> Simon Game By </p> <a href="http://codepen.io/furball/" target="_blank"> Karthik </a> </span> | |
| <span class="fa fa-gamepad"> </span> | |
| </h1> | |
| <br> </br> | |
| <button id="play" class="play"> <span class="fa fa-play"> </span> </button> play game | |
| | |
| <button id="reset" class="play"> <span class="fa fa-refresh"> </span> </button> reset | |
| <span id="lights" class="fa fa-toggle-on"> </span> Toggle Animate light | |
| <h4 id="levelUp">level 1 </h4> | |
| <br> </br> | |
| <div class="row"> | |
| <button class="btn col-md-1 one"> </button> | |
| <button class="btn col-md-1 two"> </button> | |
| </div> | |
| <div class="row"> | |
| <button class="btn col-md-1 three"> </button> | |
| <button class="btn col-md-1 four"> </button> | |
| </div> | |
| </div> | |
| <audio id="one" src="https://s3.amazonaws.com/freecodecamp/simonSound1.mp3"> </audio> | |
| <audio id="two" src="https://s3.amazonaws.com/freecodecamp/simonSound2.mp3"> | |
| </audio> | |
| <audio id="three" src="https://s3.amazonaws.com/freecodecamp/simonSound3.mp3"> | |
| </audio> | |
| <audio id="four" src="https://s3.amazonaws.com/freecodecamp/simonSound4.mp3"> | |
| </audio> | |
| </body> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /*function main //console.log(randomNum);//console.log(level++); var level=0;// console.log(level++); var userArr=[];var compArr = [];var arr=[];function one (){$('.one').animate({opacity:.2},50).animate({opacity:1},25); | |
| $('#one')[0].play(); } | |
| function two () {$('.two').animate({opacity:.2},50).animate({opacity:1},25); | |
| $('#two')[0].play(); } | |
| function three () {$('.three').animate({opacity:.2},50).animate({opacity:1},25); | |
| $('#three')[0].play(); } | |
| function four () {$('.four').animate({opacity:.2},50).animate({opacity:1},25); | |
| $('#four')[0].play(); } | |
| $('.one').click(function (){ userArr.push(1); | |
| one(); | |
| //continueGame(); | |
| if(JSON.stringify(userArr)=== JSON.stringify(arr)+JSON.stringify(compArr)){ | |
| levelUp(); | |
| continueGame(); | |
| setTimeout(game,1000); | |
| // userArr=[]; | |
| // setTimeout(game,1000); | |
| } | |
| else {$('h1').text('GAME OVER'); | |
| userArr=[]; compArr=[] ; } | |
| }) ; | |
| $('.two').click(function (){ userArr.push(2); | |
| two(); | |
| //continueGame(); | |
| if(JSON.stringify(userArr)=== JSON.stringify(arr)+JSON.stringify(compArr)){ | |
| levelUp(); | |
| continueGame(); | |
| setTimeout(game,1000); | |
| // setTimeout(game,1000) | |
| // userArr=[]; | |
| } | |
| else {$('h1').text('GAME OVER'); | |
| userArr=[]; compArr=[] ; } | |
| }) ; | |
| $('.three').click(function (){userArr.push(3); | |
| three(); | |
| // continueGame(); | |
| if(JSON.stringify(userArr)=== JSON.stringify(arr)+JSON.stringify(compArr)){ | |
| levelUp(); | |
| continueGame(); | |
| setTimeout(game,1000); | |
| // setTimeout(game,1000); | |
| // userArr=[]; | |
| } else {$('h1').text('GAME OVER'); | |
| userArr=[]; compArr=[] ; } | |
| }) ; | |
| $('.four').click(function (){userArr.push(4); | |
| four(); | |
| // continueGame(); | |
| if(JSON.stringify(userArr)=== JSON.stringify(arr)+JSON.stringify(compArr)){levelUp(); | |
| continueGame(); | |
| setTimeout(game,1000); // userArr=[]; | |
| //setTimeout(game,1000) | |
| } | |
| else {$('h1').text('GAME OVER'); | |
| userArr=[]; compArr=[] ; | |
| arr=[]; | |
| } | |
| }) ; | |
| function game (){ | |
| // dfr = $.Deferred(); | |
| var randomNum = Math.floor(Math.random()*4 +1); | |
| if (randomNum == 1) { | |
| compArr=1; | |
| one(); | |
| } | |
| else if (randomNum==2) { | |
| compArr=2; | |
| two();} | |
| else if (randomNum==3) { | |
| compArr=3; | |
| three();} | |
| else if (randomNum==4) { | |
| compArr=4; | |
| four();} | |
| // return true.promise(); } | |
| // return dfr.promise(); | |
| } | |
| $('#play').click(function(){ userArr=[]; compArr=[] ; | |
| arr=[]; | |
| setTimeout(game,1000); | |
| $('h1').html('<span class="fa fa-gamepad"> <p> Simon Game By </p> <a href="http://codepen.io/furball/" target="_blank"> Karthik </a> </span>' + | |
| ' <span class="fa fa-gamepad"> </span>'); | |
| level=1; $('#levelUp').text('Level 1'); | |
| }); | |
| function continueGame () { | |
| //dfr = $.Deferred(); | |
| for (var i =0;i<compArr.length;i++){switch (compArr[i]) { | |
| case 1: | |
| one(); | |
| arr.push(1); | |
| break; | |
| case 2: | |
| arr.push(2); two(); | |
| break; case 3: | |
| arr.push(3); three(); | |
| break; case 4: | |
| arr.push(4); four(); break; } | |
| }// return dfr.promise(); | |
| //return true.promise(); | |
| } | |
| function levelUp(){ | |
| level++; | |
| $('#levelUp').text('Level '+ level); | |
| }; | |
| /* function clear(){ | |
| compArr = []; | |
| compArr = compArr.push.apply(compArr,arr);} */ | |
| // console.log(JSON.stringify(userArr)); | |
| //$(document).ready(main);*/ | |
| //setTimeout(continueGame,1500); | |
| // setTimeout(game,1000); | |
| //FIGURE OUT HOW TO USE PROMISE WHEN DONE | |
| //jQuery.when(continueGame).done(setTimeout(game,1000)); | |
| $(document).ready(function(){ alert('please dont click tiles before starting game ') | |
| var animate=true; | |
| function one (){if(animate===true){$('.one').animate({opacity:.2},25).animate({opacity:1},13); | |
| $('#one')[0].play();} else if(animate===false) {$('#one')[0].play();}} | |
| function two () {if(animate===true){$('.two').animate({opacity:.2},25).animate({opacity:1},13); | |
| $('#two')[0].play();} else if(animate===false) {$('#two')[0].play();}} | |
| function three () {if(animate===true){$('.three').animate({opacity:.2},25).animate({opacity:1},13); | |
| $('#three')[0].play();} else if(animate===false) {$('#three')[0].play();}} | |
| function four () {if(animate===true){$('.four').animate({opacity:.2},25).animate({opacity:1},13); | |
| $('#four')[0].play();} else if(animate===false) {$('#four')[0].play();}} | |
| var compArr=[]; | |
| var userArr=[]; | |
| var level=1; | |
| function generate (){ | |
| var randomNum = Math.floor(Math.random()*4 +1); | |
| compArr.push(randomNum); | |
| console.log('compArr:'+compArr); } | |
| $('#play').click(function(){ | |
| console.log('start'); | |
| generate(); | |
| setTimeout(game,1500); | |
| levelUp();}); | |
| $('.one').click(function (){ userArr.push(1); | |
| one();console.log('userArr:'+userArr);if(userArr.length==compArr.length){checker();}}); | |
| $('.two').click(function (){ userArr.push(2); | |
| two();console.log('userArr:'+userArr);if(userArr.length==compArr.length){checker();}}); | |
| $('.three').click(function (){ userArr.push(3); | |
| three();console.log('userArr:'+userArr);if(userArr.length==compArr.length){checker();}}); | |
| $('.four').click(function (){ userArr.push(4); | |
| four();console.log('userArr:'+userArr);if(userArr.length==compArr.length){checker();}}); | |
| function game () { | |
| for (var i =0;i<compArr.length;i++){ | |
| (function(i){setTimeout(function(){switch (compArr[i]) { | |
| case 1: | |
| one(); | |
| break; | |
| case 2: | |
| two(); | |
| break; | |
| case 3: | |
| three(); | |
| break; | |
| case 4: | |
| four(); | |
| break; } console.log('animate:'+compArr[i]); },1000*i);}(i)); | |
| }} | |
| function levelUp(){$('#levelUp').text('Level '+ level);} | |
| function nxtLevel(){level++;userArr=[];} | |
| function checker(){if(JSON.stringify(userArr)===JSON.stringify(compArr)){ | |
| nxtLevel(); console.log('lvl'+level); levelUp(); generate(); setTimeout(game,1000); } else {$('h1').text('GAME OVER');console.log('game over');}} | |
| $('#reset').click(function(){$('h1').html('<span class="fa fa-gamepad"> <p> Simon Game By </p> <a href="http://codepen.io/furball/" target="_blank"> Karthik </a> </span>' + | |
| ' <span class="fa fa-gamepad"> </span>'); userArr=[];compArr=[];level=1;levelUp();animate=true;$('.fa-toggle-off').toggleClass('fa-toggle-off fa-toggle-on')}); | |
| $('#lights').click(function(){$('#lights').toggleClass('fa-toggle-off fa-toggle-on'); | |
| if (animate===true) {animate=false;} else if (animate===false) {animate=true;} }); | |
| /*function sleep(delay) { | |
| var start = new Date().getTime(); | |
| while (new Date().getTime() < start + delay); | |
| } */ }); | |
| //TIME EVENTS | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| *{margin:0; | |
| padding:0; | |
| box-sizing:border-box;} | |
| body{background-color:black; | |
| font-family:'Permanent Marker',cursive; | |
| } | |
| .container{position: absolute; | |
| left: 50%; | |
| margin-right: -50%; | |
| transform: translate(-50%, -0%); | |
| margin-top:5%; | |
| margin-bottom:5%; | |
| width:auto; | |
| color:white; | |
| } | |
| .btn{height:300px; | |
| width:300px !important; | |
| border:5px solid white; | |
| box-shadow: 0 3px 0 0 #222121, inset -1px -3px 10px 1px #515151; | |
| } | |
| p{display:inline; | |
| color:white; | |
| font-family:'Permanent Marker',cursive;} | |
| a{color:orange; | |
| font-family:'Permanent Marker',cursive; | |
| } | |
| .one{border-top-left-radius:10em; | |
| background-color:green; | |
| } | |
| .two{border-top-right-radius:10em; | |
| background-color:red; | |
| } | |
| .three{border-bottom-left-radius:10em; | |
| background-color:yellow; | |
| } | |
| .four{border-bottom-right-radius:10em; | |
| background-color:darkblue; | |
| } | |
| button:active { | |
| transform: translate(0, 3px); | |
| box-shadow: none; | |
| } | |
| .btn, | |
| .btn:hover, | |
| .btn:active, | |
| .btn:visited { | |
| text-decoration: none !important; | |
| outline: none !important; | |
| } | |
| .fa-gamepad {color:white;} | |
| .play {height:50px; | |
| width:50px; | |
| border-radius:50%; | |
| background-color:#3D9970;} | |
| h4{display:inline; | |
| margin-left:300px;} | |
| .fa-toggle-off{color:white; | |
| font-size:2.6em; | |
| background-color:#3D9970; | |
| border-radius:100%; | |
| } | |
| .fa-toggle-on{color:white; | |
| font-size:2.6em; | |
| background-color:#3D9970; | |
| border-radius:100%;} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> | |
| <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" /> | |
| <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome-animation/0.0.9/font-awesome-animation.min.css" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment