<audio id="gsound" src="https://s3.amazonaws.com/freecodecamp/simonSound1.mp3"></audio>
<audio id="rsound" src="https://s3.amazonaws.com/freecodecamp/simonSound2.mp3"></audio>
<audio id="ysound" src="https://s3.amazonaws.com/freecodecamp/simonSound3.mp3"></audio>
<audio id="bsound" src="https://s3.amazonaws.com/freecodecamp/simonSound4.mp3"></audio>
<audio id="wrongsound" src="http://www.freesound.org/data/previews/331/331912_3248244-lq.mp3"></audio>
<div>
<div class="left">
<div class="score">
<div> score </div>
<div id="score_count"> -- </div>
</div>
</div>
<div class="center">
<a class="active_field" id="g"></a>
<a class="active_field" id="r"></a>
<a class="active_field" id="b"></a>
<a class="active_field" id="y"></a>
</div>
<div class="right">
<div id="start">start</div>
<div id="strict">strict</div>
</div>
</div>
body {
background-color: #E3C4C4;
}
a{
display:inline-block;
border-style: solid;
}
a:hover{
background-color:lightblue;
}
#g{
position:absolute;
top: 50px;
left: 700px;
border-top-left-radius:200px;
height:200px;
width: 200px;
background-color:green;
}
#r{
position:absolute;
top: 50px;
left:900px;
border-top-right-radius:200px;
height:200px;
width: 200px;
background-color: red;
}
#b{
position:absolute;
top:250px;
left:700px;
border-bottom-left-radius:200px;
height:200px;
width: 200px;
background-color: blue;
}
#y{
position:absolute;
top:250px;
left:900px;
border-bottom-right-radius:200px;
height:200px;
width: 200px;
background-color: yellow;
}
.right{
position:absolute;
top: 225px;
left: 1125px;
}
.left{
position:absolute;
top: 225px;
left: 625px;
}
.score {
text-align: center;
}
#strict {
margin-top: 10px;
background-color: #BCC122;
border-style: solid;
border-color: black;
border-radius: 10px;
color: black;
}
#start {
background-color: #AD1D1D;
border-style: solid;
border-radius: 10px;
}
.score {
background-color: lightblue;
border-style: solid;
border-radius: 10px;
}
//copy pasted ben blood audio buttons. No clue about audio.
color_grid = {
"g" : "green",
"b" : "blue",
"y" : "yellow",
"r" : "red"
}
$(document).ready(function() {
strict_mode=0;
game_on=0;
set_up_game();
});
function set_up_game(){
$("#start").on("click", function(){
$("#start").css('background-color','red');
start_game();
});
$("#strict").on("click",function(){
if (strict_mode == 0) {
strict_mode = 1
$("#strict").css('background-color','yellow');
} else {
strict_mode = 0
$("#strict").css('background-color','#BCC122');
}
});
}
function start_game(){
if (game_on == 0 ){
game_on = 1;
colors=[];
alert('starting game!');
computer_turn();
} else {
game_on = 0;
reset_game();
}
}
function color_change(color_value,timeout){
setTimeout(
function(){
$("#" + color_value + "sound").get(0).play();
$("#" + color_value).css('background-color','lightblue');
setTimeout(
function(){
$("#" + color_value).css('background-color',color_grid[color_value]);
},
1000
)
},
timeout
)
}
function computer_turn(){
add_color_sequence();
play_color_sequence(colors);
activate_buttons();
}
function add_color_sequence(){
var possible_colors = ['g','r','y','b']
var new_color_number = Math.floor(Math.random() * 4)
var new_color = possible_colors[new_color_number];
colors.push(new_color);
return 0
}
function play_color_sequence(colors){
setTimeout(function(){
$("#score_count").html(colors.length).css('color','black');
},1000)
for (var i = 0; i < colors.length;i++){
color = colors[i];
timeout=(i+1)*2000
color_change(color,timeout);
}
}
function activate_buttons(){
player_choice=[];
$(".active_field").on("click",function(){
var new_value=$(this).attr('id');
color_change(new_value,250);
if (new_value == colors[player_choice.length]){
player_choice.push(new_value);
} else {
deactivate_buttons();
$("#wrongsound").get(0).play();
$("#score_count").html("!!!").css('color','red');
if (strict_mode==1){
colors=[];
strict_mode_restart();
} else {
play_color_sequence(colors);
activate_buttons();
}
}
if (player_choice.length == 20){
alert("You Win!")
reset_game();
return 0;
}
if (colors.length == player_choice.length){
deactivate_buttons();
computer_turn();
}
return 0
})
}
function deactivate_buttons(){
$(".active_field").off("click");
}
function reset_game(){
deactivate_buttons();
$("#score_count").html('--');
$("#start").css("background-color","#AD1D1D");
player_choice=[];
colors=[];
}
function strict_mode_restart(){
deactivate_buttons();
player_choice=[];
colors=[];
}