Skip to content

Instantly share code, notes, and snippets.

@TerryMooreII

TerryMooreII/index.html

Created November 3, 2014 00:25
Show Gist options
  • Save TerryMooreII/9e52ae077c9f2642cd8a to your computer and use it in GitHub Desktop.
Save TerryMooreII/9e52ae077c9f2642cd8a to your computer and use it in GitHub Desktop.
Download ZIP
Simon // source http://jsbin.com/gezef
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Simon" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
<style id="jsbin-css">
#game{
margin:0 auto;
width:240px;
}
#title{
font-size:42px;
text-align:center;
margin-bottom:20px;
}
button{
margin-top:30px;
font-size:22px;
}
#new-game{
width:120px;
margin:0 auto;
}
#message{
margin-top:30px;
font-size:40px;
text-align:center
}
.btn{
width:100px;
height:100px;
border:10px solid black;
float:left;
}
#red{
background-color:red;
border-top-left-radius: 100%
}
#green{
background-color:green;
border-top-right-radius: 100%
}
#blue{
background-color:blue;
border-bottom-left-radius: 100%
}
#yellow{
background-color:yellow;
border-bottom-right-radius: 100%
}
.full-color{
opacity:1
}
.faded{
opacity:.6
}
.clearfix{
clear:both;
}
</style>
</head>
<body>
<div id="title">
Simon
</div>
<div id="game">
<div id="red" class="btn faded"></div>
<div id="green" class="btn faded"></div>
<div class="clearfix"></div>
<div id="blue" class="btn faded"></div>
<div id="yellow" class="btn faded"></div>
</div>
<div class="clearfix"></div>
<div id="message"></div>
<div id="new-game">
<button>New Game</button>
</div>
<script id="jsbin-javascript">
var btns = ['red', 'green', 'blue', 'yellow'];
var level = 1;
var pattern = [];
var userPattern = [];
var isPlaying = true;
var generatePattern = function(){
var num = Math.floor(Math.random() * btns.length);
pattern.push(num);
};
var blink = function(){
$.each(pattern, function(i, v) {
var $self = $('#' + btns[v]);
$('body').delay(700).queue(function(next){
$self
.removeClass('faded')
.addClass('full-color')
.delay(500).queue(function(next){
$self
.removeClass('full-color')
.addClass('faded');
next();
});
next();
});
});
};
var play = function(){
$('button').hide();
$('#message').text('Level ' + level);
generatePattern();
blink();
userPattern = [];
user();
};
var user = function(){
var timeout = setTimeout(function(){
clearInterval(interval);
lose();
}, 4000 * level);
var interval = setInterval(function(){
if (userPattern.length === pattern.length && pattern.equals(userPattern)){
clearInterval(interval);
clearTimeout(timeout);
level++;
play();
}else if (userPattern.length >= pattern.length){
lose();
clearInterval(interval);
clearTimeout(timeout);
}
}, 100);
};
var addClickEvent = function(){
$('#blue').on('mousedown', function(){
$(this)
.removeClass('faded')
.addClass('full-color');
});
$('#red').on('mousedown', function(){
$(this)
.removeClass('faded')
.addClass('full-color');
});
$('#green').on('mousedown', function(){
$(this)
.removeClass('faded')
.addClass('full-color');
});
$('#yellow').on('mousedown', function(){
$(this)
.removeClass('faded')
.addClass('full-color');
});
$('#blue').on('mouseup', function(){
userPattern.push(2);
$(this)
.removeClass('full-color')
.addClass('faded');
});
$('#red').on('mouseup', function(){
userPattern.push(0);
$(this)
.removeClass('full-color')
.addClass('faded');
});
$('#green').on('mouseup', function(){
userPattern.push(1);
$(this)
.removeClass('full-color')
.addClass('faded');
});
$('#yellow').on('mouseup', function(){
userPattern.push(3);
$(this)
.removeClass('full-color')
.addClass('faded');
});
$('button').on('click', function(){
play();
});
};
var lose = function(){
$('button').show();
$('#message').text('You Lose');
pattern = [];
level=1;
};
Array.prototype.equals = function (array) {
// if the other array is a falsy value, return
if (!array)
return false;
// compare lengths - can save a lot of time
if (this.length != array.length)
return false;
for (var i = 0, l=this.length; i < l; i++) {
// Check if we have nested arrays
if (this[i] instanceof Array && array[i] instanceof Array) {
// recurse into the nested arrays
if (!this[i].equals(array[i]))
return false;
}
else if (this[i] != array[i]) {
// Warning - two different object instances will never be equal: {x:20} != {x:20}
return false;
}
}
return true;
};
addClickEvent();
//play()
</script>
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html>
<head>
<meta name="description" content="Simon" />
<script src="//code.jquery.com/jquery-1.11.1.min.js"><\/script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div id="title">
Simon
</div>
<div id="game">
<div id="red" class="btn faded"></div>
<div id="green" class="btn faded"></div>
<div class="clearfix"></div>
<div id="blue" class="btn faded"></div>
<div id="yellow" class="btn faded"></div>
</div>
<div class="clearfix"></div>
<div id="message"></div>
<div id="new-game">
<button>New Game</button>
</div>
</body>
</html></script>
<script id="jsbin-source-css" type="text/css"> #game{
margin:0 auto;
width:240px;
}
#title{
font-size:42px;
text-align:center;
margin-bottom:20px;
}
button{
margin-top:30px;
font-size:22px;
}
#new-game{
width:120px;
margin:0 auto;
}
#message{
margin-top:30px;
font-size:40px;
text-align:center
}
.btn{
width:100px;
height:100px;
border:10px solid black;
float:left;
}
#red{
background-color:red;
border-top-left-radius: 100%
}
#green{
background-color:green;
border-top-right-radius: 100%
}
#blue{
background-color:blue;
border-bottom-left-radius: 100%
}
#yellow{
background-color:yellow;
border-bottom-right-radius: 100%
}
.full-color{
opacity:1
}
.faded{
opacity:.6
}
.clearfix{
clear:both;
}</script>
<script id="jsbin-source-javascript" type="text/javascript"> var btns = ['red', 'green', 'blue', 'yellow'];
var level = 1;
var pattern = [];
var userPattern = [];
var isPlaying = true;
var generatePattern = function(){
var num = Math.floor(Math.random() * btns.length);
pattern.push(num);
};
var blink = function(){
$.each(pattern, function(i, v) {
var $self = $('#' + btns[v]);
$('body').delay(700).queue(function(next){
$self
.removeClass('faded')
.addClass('full-color')
.delay(500).queue(function(next){
$self
.removeClass('full-color')
.addClass('faded');
next();
});
next();
});
});
};
var play = function(){
$('button').hide();
$('#message').text('Level ' + level);
generatePattern();
blink();
userPattern = [];
user();
};
var user = function(){
var timeout = setTimeout(function(){
clearInterval(interval);
lose();
}, 4000 * level);
var interval = setInterval(function(){
if (userPattern.length === pattern.length && pattern.equals(userPattern)){
clearInterval(interval);
clearTimeout(timeout);
level++;
play();
}else if (userPattern.length >= pattern.length){
lose();
clearInterval(interval);
clearTimeout(timeout);
}
}, 100);
};
var addClickEvent = function(){
$('#blue').on('mousedown', function(){
$(this)
.removeClass('faded')
.addClass('full-color');
});
$('#red').on('mousedown', function(){
$(this)
.removeClass('faded')
.addClass('full-color');
});
$('#green').on('mousedown', function(){
$(this)
.removeClass('faded')
.addClass('full-color');
});
$('#yellow').on('mousedown', function(){
$(this)
.removeClass('faded')
.addClass('full-color');
});
$('#blue').on('mouseup', function(){
userPattern.push(2);
$(this)
.removeClass('full-color')
.addClass('faded');
});
$('#red').on('mouseup', function(){
userPattern.push(0);
$(this)
.removeClass('full-color')
.addClass('faded');
});
$('#green').on('mouseup', function(){
userPattern.push(1);
$(this)
.removeClass('full-color')
.addClass('faded');
});
$('#yellow').on('mouseup', function(){
userPattern.push(3);
$(this)
.removeClass('full-color')
.addClass('faded');
});
$('button').on('click', function(){
play();
});
};
var lose = function(){
$('button').show();
$('#message').text('You Lose');
pattern = [];
level=1;
};
Array.prototype.equals = function (array) {
// if the other array is a falsy value, return
if (!array)
return false;
// compare lengths - can save a lot of time
if (this.length != array.length)
return false;
for (var i = 0, l=this.length; i < l; i++) {
// Check if we have nested arrays
if (this[i] instanceof Array && array[i] instanceof Array) {
// recurse into the nested arrays
if (!this[i].equals(array[i]))
return false;
}
else if (this[i] != array[i]) {
// Warning - two different object instances will never be equal: {x:20} != {x:20}
return false;
}
}
return true;
};
addClickEvent();
//play()</script></body>
</html>
Raw
jsbin.gezef.css
#game{
margin:0 auto;
width:240px;
}
#title{
font-size:42px;
text-align:center;
margin-bottom:20px;
}
button{
margin-top:30px;
font-size:22px;
}
#new-game{
width:120px;
margin:0 auto;
}
#message{
margin-top:30px;
font-size:40px;
text-align:center
}
.btn{
width:100px;
height:100px;
border:10px solid black;
float:left;
}
#red{
background-color:red;
border-top-left-radius: 100%
}
#green{
background-color:green;
border-top-right-radius: 100%
}
#blue{
background-color:blue;
border-bottom-left-radius: 100%
}
#yellow{
background-color:yellow;
border-bottom-right-radius: 100%
}
.full-color{
opacity:1
}
.faded{
opacity:.6
}
.clearfix{
clear:both;
}
Raw
jsbin.gezef.js
var btns = ['red', 'green', 'blue', 'yellow'];
var level = 1;
var pattern = [];
var userPattern = [];
var isPlaying = true;
var generatePattern = function(){
var num = Math.floor(Math.random() * btns.length);
pattern.push(num);
};
var blink = function(){
$.each(pattern, function(i, v) {
var $self = $('#' + btns[v]);
$('body').delay(700).queue(function(next){
$self
.removeClass('faded')
.addClass('full-color')
.delay(500).queue(function(next){
$self
.removeClass('full-color')
.addClass('faded');
next();
});
next();
});
});
};
var play = function(){
$('button').hide();
$('#message').text('Level ' + level);
generatePattern();
blink();
userPattern = [];
user();
};
var user = function(){
var timeout = setTimeout(function(){
clearInterval(interval);
lose();
}, 4000 * level);
var interval = setInterval(function(){
if (userPattern.length === pattern.length && pattern.equals(userPattern)){
clearInterval(interval);
clearTimeout(timeout);
level++;
play();
}else if (userPattern.length >= pattern.length){
lose();
clearInterval(interval);
clearTimeout(timeout);
}
}, 100);
};
var addClickEvent = function(){
$('#blue').on('mousedown', function(){
$(this)
.removeClass('faded')
.addClass('full-color');
});
$('#red').on('mousedown', function(){
$(this)
.removeClass('faded')
.addClass('full-color');
});
$('#green').on('mousedown', function(){
$(this)
.removeClass('faded')
.addClass('full-color');
});
$('#yellow').on('mousedown', function(){
$(this)
.removeClass('faded')
.addClass('full-color');
});
$('#blue').on('mouseup', function(){
userPattern.push(2);
$(this)
.removeClass('full-color')
.addClass('faded');
});
$('#red').on('mouseup', function(){
userPattern.push(0);
$(this)
.removeClass('full-color')
.addClass('faded');
});
$('#green').on('mouseup', function(){
userPattern.push(1);
$(this)
.removeClass('full-color')
.addClass('faded');
});
$('#yellow').on('mouseup', function(){
userPattern.push(3);
$(this)
.removeClass('full-color')
.addClass('faded');
});
$('button').on('click', function(){
play();
});
};
var lose = function(){
$('button').show();
$('#message').text('You Lose');
pattern = [];
level=1;
};
Array.prototype.equals = function (array) {
// if the other array is a falsy value, return
if (!array)
return false;
// compare lengths - can save a lot of time
if (this.length != array.length)
return false;
for (var i = 0, l=this.length; i < l; i++) {
// Check if we have nested arrays
if (this[i] instanceof Array && array[i] instanceof Array) {
// recurse into the nested arrays
if (!this[i].equals(array[i]))
return false;
}
else if (this[i] != array[i]) {
// Warning - two different object instances will never be equal: {x:20} != {x:20}
return false;
}
}
return true;
};
addClickEvent();
//play()
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment