Skip to content

Instantly share code, notes, and snippets.

@ooade

ooade/Simon Game.markdown

Created September 19, 2015 05:14
Show Gist options
  • Save ooade/0fa560a111e366ae0f01 to your computer and use it in GitHub Desktop.
Save ooade/0fa560a111e366ae0f01 to your computer and use it in GitHub Desktop.
Download ZIP
Simon Game
Raw
index.html
<div class="navbar navbar-default navbar-static-top" id="mynavbar">
<div class="container">
<div class="navbar-header">
<span class="navbar-brand">Simon Game</span>
</div>
</div>
</div>
<div class="container-fluid" style="margin-top:20px">
<div class="row-fluid">
<div class="col-sm-4"></div>
<div class="col-sm-4">
<div class="main-circle">
<div class="circleTop">
<div class="quad c1" data="1"></div>
<div class="quad c2" data="2"></div>
</div>
<div class="circleBottom">
<div class="quad c3" data="3"></div>
<div class="quad c4" data="4"></div>
</div>
<div class="halfCircle">
<div class="control">
<div class="text">Simon<sup>&reg;</sup></div>
<div class="console"></div>
<div class="strict-sign"></div>
<div class="onOff">
ON
<div class="control">
<div class="isOn"></div>
<div class="isOff"></div>
</div>
OFF
</div>
<div class="btn-group actions">
<a class="btn btn-success start">START</a>
<a class="btn btn-danger strict">STRICT</a>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-4"></div>
</div>
</div>
<div id="win" class="modal fade">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Congratulations!!!</h4>
</div>
<div class="modal-body">
<p>You got 20 steps correctly</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary startOver">Start Over again</button>
<button type="button" class="btn btn-danger stopGame" data-dismiss="modal">Stop Playing</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
Raw
script.js
(function(){
var sounds = [
new Audio("https://s3.amazonaws.com/freecodecamp/simonSound1.mp3"),
new Audio("https://s3.amazonaws.com/freecodecamp/simonSound2.mp3"),
new Audio("https://s3.amazonaws.com/freecodecamp/simonSound3.mp3"),
new Audio("https://s3.amazonaws.com/freecodecamp/simonSound4.mp3")
], simonArray = [], userArray = [], strict = [], control = {on:[]};
var errNotif = new Audio("https://www.freesound.org/data/previews/142/142608_1840739-lq.mp3");
var game = {
tempo: function(){
var simonLength = simonArray.length;
if(simonLength >= 13){
return 570;
}
else if(simonLength >= 9){
return 670;
}
else if(simonLength >= 5){
return 770;
}
else{
return 870;
}
},
stopSound: function(num){
switch (num){
case 1:
sounds[0].pause();
break;
case 2:
sounds[1].pause();
break;
case 3:
sounds[2].pause();
break;
case 4:
sounds[3].pause();
break;
}
},
newSimon: function(){
$('.console').text("1");
var randPos = Math.floor(Math.random()*(4-1+1)+1);
sounds[randPos-1].play();
$(".c" + randPos).addClass("d" + randPos);
simonArray.push(randPos);
setTimeout(function(){
$(".c" + randPos).removeClass("d" + randPos);
game.stopSound(randPos);
},500);
},
loopSimon: function(){
var x = 0;
var intVal = setInterval(function(){
sounds[simonArray[x]-1].play();
$(".c" + simonArray[x]).addClass("d" + simonArray[x]);
$('.console').text(simonArray.length);
if(Number(x) === simonArray.length - 1){
clearInterval(intVal);
}
setTimeout(function(){
$(".c" + simonArray[x-1]).removeClass("d" + simonArray[x-1]);
game.stopSound(simonArray[x]);
},500);
x++;
},this.tempo());
},
compSimon: function(){
userArray.length = 0;
if(simonArray.length > 0){
var randPos = Math.floor(Math.random()*(4-1+1)+1);
simonArray.push(randPos);
this.loopSimon();
}
else{
this.newSimon();
}
},
compareSimons: function(){
return this.compareTwoSimons(simonArray,userArray);
},
compareTwoSimons: function(arr1, arr2){
var isEqual = arr1.filter(function(obj1){
return !arr2.some(function(obj2){
return Number(obj1) === Number(obj2);
});
});
return isEqual;
},
userSimon: function(num){
if(userArray.length < simonArray.length && simonArray.length > 0){
userArray.push(Number(num));
$(".c" + num).addClass("d" + num);
sounds[num-1].play();
var myArrayLength = userArray.length;
var slicedSimon = simonArray.slice(0,myArrayLength);
if(this.compareTwoSimons(userArray,slicedSimon).length === 0){
console.log("user "+userArray);
console.log("simon "+simonArray);
if(userArray.length === 20 && this.compareSimons().length === 0){
$('#win').modal('show');
$('.console').text("__");
userArray.length = 0,simonArray.length = 0, strict.length = 0, control.on.length = 0;
}
}
else{
this.error();
}
setTimeout(function(){
$(".c" + num).removeClass("d" + num);
game.stopSound(num);
if(userArray.length === simonArray.length){
if(game.compareSimons().length === 0){
setTimeout(function(){
game.compSimon();
},500);
}
else{
game.error();
}
}
},500);
}
else{
console.log("Cant click this");
}
},
error: function(){
errNotif.play();
if(strict.length > 0){
console.log("Strict mode on. Restarting Game....");
setTimeout(function(){
userArray.length = 0, simonArray.length = 0, game.newSimon();
},1000);
}
else{
userArray.length = 0;
this.loopSimon();
}
}
};
$('.isOn').click(function(){
/** Deactivate all shields **/
$(this).css("background-color","#111");
$('.isOff').css("background-color","#444");
$('.console').text("__");
$('.quad').css("cursor","pointer");
control.on.push("true");
});
$('.start').click(function(){
userArray.length = 0, simonArray.length = 0;
if(control.on.length > 0){
game.compSimon();
}
});
$('.startOver').click(function(){
simonArray.length = 0;
game.compSimon();
$('#win').modal('hide');
});
$('.strict').click(function(){
strict.push(1);
$('.strict-sign').css("background-color","#b41212");
});
$('.quad').click(function(){
var data = $(this).attr("data");
game.userSimon(data);
});
$('.isOff, .stopGame').click(function(){
/** Activate all shields **/
$('.isOff').css("background-color","#111");
$('.isOn').css("background-color","#444");
$('.console').text("");
$('.quad').css("cursor","auto");
userArray.length = 0, simonArray.length = 0, strict.length = 0, control.on.length = 0;
$('.strict-sign').css("background-color","#ddd");
});
})();
Raw
scripts
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
Raw
style.css
body{
background-color:rgb(6, 165, 125);
color: #fff;
font-family: 'ubuntu', cursive;
}
.navbar-default{
background-color: #333;
border-bottom:1px solid #333;
cursor: pointer;
}
.navbar-header .navbar-brand, .navbar-header .navbar-brand:hover{
color: white;
font-weight: bold;
}
.main-circle{
background-color: #333;
width: 450px;
height: 450px;
border-radius: 100%;
box-shadow: 0px 0px 12px #222;
position: relative;
text-align: center;
margin: auto;
}
.strict-sign{
width: 10px;
height: 10px;
display: inline-block;
border:2px solid #333;
border-radius: 5px;
background-color:#ddd;
}
#win{
color: #333;
}
.quad{
width: 205px;
height: 205px;
position: relative;
background-color: #ccc;
display: inline-block;
border: 8px solid #333;
}
.circleTop{
padding-top: 15px;
}
.c1{
border-top-left-radius: 100%;
background-color: rgb(0, 167, 74);
}
.d1{
border-top-left-radius: 100%;
background-color: rgb(0, 227, 101);
}
.c2{
border-top-right-radius: 100%;
background-color: rgb(159, 15, 23);
}
.d2{
border-top-right-radius: 100%;
background-color: rgb(235, 17, 30);
}
.c3{
border-bottom-left-radius: 100%;
background-color: rgb(204, 167, 7);
}
.d3{
border-bottom-left-radius: 100%;
background-color: rgb(248, 204, 8);
}
.c4{
border-bottom-right-radius: 100%;
background-color: #094a8f;
}
.d4{
border-bottom-right-radius: 100%;
background-color: #0e74e2;
}
.halfCircle{
width: 220px;
height: 220px;
background-color: #fff;
border: 14px solid #333;
position: absolute;
top:50%;
left: 50%;
margin: -114px 0 0 -114px;
border-radius: 100%;
}
.control .text{
color: #333;
font-size: 40px;
font-weight: bold;
margin-top: 20px;
}
sup{
font-size: 20px;
}
.console{
border:4px solid rgba(0,0,0,0.7);
background-color: #f5ca6a;
width: 60px;
height: 40px;
border-radius: 5px;
margin: 5px;
display: inline-block;
font-size: 20px;
font-weight: bold;
color: #eb510d;
}
.onOff{
color: #333;
font-weight: bold;
}
.onOff .control{
background-color: #444;
height: 20px;
width: 40px;
display: inline-block;
border-radius: 5px;
}
.isOn, .isOff{
width: 16px;
position: relative;
height: 20px;
background-color: #111;
display: inline-block;
cursor: pointer;
}
.isOff{
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
margin-left: 4px;
margin-right: -4px;
}
.isOn{
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
margin-left: -4px;
margin-right: 4px;
background-color: #444;
}
.start, .strict{
padding: 3px !important;
font-size: 12px;
}
Raw
styles
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment