Simon game
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<div id="container">
<div class="buttons">
<div class="row">
<button id="0" class="button button-red"></button>
<button id="1" class="button button-green"></button>
</div>
<div class="row">
<button id="2" class="button button-blue"></button>
<button id="3" class="button button-yellow"></button>
</div>
</div>
<button id="start">Start</button>
<button id="stop">Stop</button>
</div>
CSS
.button {
width: 150px;
height: 150px;
}
.button-red {
background-color: #B22222;
}
.button-green {
background-color: green;
}
.button-blue {
background-color: #000080;
}
.button-yellow {
background-color: #e5e500;
}
JavaScript
var computer = [];
var check = [];
document.getElementById("0").addEventListener("click", clicked);
document.getElementById("1").addEventListener("click", clicked);
document.getElementById("2").addEventListener("click", clicked);
document.getElementById("3").addEventListener("click", clicked);
function clicked(e) {
var colour = "";
switch (Number(this.id)) {
case 0:
colour = "red";
break;
case 1:
colour = "#7FFF00";
break;
case 2:
colour = "blue";
break;
case 3:
colour = "yellow";
break;
}
highlight(document.getElementById(this.id),colour);
if(e.isTrusted){
alert(computer);
if(check.length > 0 && Number(this.id)===check[0]){
check.shift();
}
if(check.length === 0 ){
check = computer;
play();
}
}
}
function highlight(obj, colour){
var orig = obj.style.backgroundColor;
obj.style.backgroundColor = colour;
setTimeout(function(){
obj.style.backgroundColor = orig;
}, 1000);
}
function play (){
if(computer.length === 0){
next();
} else {
for(var i = 0; i < computer.length; i++){
timer(i);
}
setTimeout(function(){
next();
}, 2000*computer.length);
}
alert(computer);
}
function timer(i){
setTimeout(function(){
document.getElementById(""+computer[i]).click();
}, 2000*i);
}
function next(){
var random = Math.floor(Math.random() * 4);
computer.push(random);
check.push(random);
document.getElementById(""+random).click();
}
document.getElementById("start").addEventListener("click", play);