tamnil/Simon Game.markdown

## index.html
<html lang="en-us">
<head>

</head>
<body>
  <h1> Simon Game </h1>
  <button onclick="start()">start </button>
  <button onclick="reset()">reset </button>
  <div id="counter">
    0
  </div>

  <div id="teste">
    testef
  </div>
  <div id="board">
    <div id="red" onclick="setMove('red')">
      red
    </div>
    <div id="blue" onclick="setMove('blue')">
      blue
    </div>
    <div id="green" onclick="setMove('green')">
      green
    </div>
    <div id="yellow" onclick="setMove('yellow')">
      yellow
    </div>


  </div>

</body>
</html>

## script.js
var hist = [];
var count=0;
var btn =  [
  {index:0,color:"red",
   audio: new Audio('https://s3.amazonaws.com/freecodecamp/simonSound1.mp3')},{index:1,color:"green",
audio: new Audio('https://s3.amazonaws.com/freecodecamp/simonSound2.mp3')},{index:2,color:"yellow",
audio: new Audio('https://s3.amazonaws.com/freecodecamp/simonSound3.mp3')},
  {index:3,color:"blue",
audio: new Audio('https://s3.amazonaws.com/freecodecamp/simonSound4.mp3')}];
var pendingTimeouts={};
var userMoves =[];

function start(){
  count=0;
  updateCounter();
  computerMove();
  console.log("start");
}
function setMove(el){
  var element=getElement(el)
  clearAllTimeouts(); //cancels timer:
  resetToDefault();
  bleepElement(element.color,0);
  userMoves.push(element.index);
  if(userMoves.length<hist.length){

    if(!compareMoves()){
      console.log('perdeu!');
      gameover();
    }
  }else{
    setTimeout(function(){userMoves=[];computerMove();
                         },500);
  }
}
function computerMove(){
  hist.push(randomButton());
  showComputerMove(hist); //show computer moves
  count +=1;
  updateCounter();

}
function updateCounter(){
  document.getElementById('counter').innerHTML=count.toString();
}
function reset(){
  gameover();
  start();
}
function compareMoves(){ //compares user moves vs compute moves, if equal return true
  console.log(hist,userMoves);
  for(var i=0;i < userMoves.length;i++){
    if(hist[i] != userMoves[i]){
      return false;
    }
  }

  return true
}
function gameover(){
  hist=[];
  userMoves=[];
  count=0;
  for(var i=0;i<btn.length;i++){
    btn[i].audio.play();
  }
}
function getElement(el){
    selected={}
  for(var i=0;i<btn.length;i++){
    if(btn[i].color==el){
      selected = btn[i];
    }
  }
  return selected;
}
function showComputerMove(arr){
   for(var i=0; i<arr.length;i++){
     htmlEl=btn[arr[i]].color;
     bleepElement(htmlEl,i);
  }
}
function bleepElement(el,timer){
  //bleep on:
  var element=getElement(el)
  var el= el;
  var computerMoveOn;
  var computerMoveOff;
    computerMoveOn =   setTimeout(function(){
      element.audio.play();
      delete pendingTimeouts[computerMoveOn];
    document.getElementById(el).style.color = el;
    }, 1000 * timer);
  //bleep off
    computerMoveOff =  setTimeout(function(){
      delete pendingTimeouts[computerMoveOff];
    document.getElementById(el).style.color = "black" ;
    }, 1000*timer+500);
  pendingTimeouts[computerMoveOn]=true;
  pendingTimeouts[computerMoveOff]=true;
}
function resetToDefault(){
  //reset all buttons to default color
}
function clearAllTimeouts() {
  var keyNames = Object.keys(pendingTimeouts);
  for (var i=0;i<keyNames.length;i++){
    clearTimeout(keyNames[i]);
  }
}
function randomButton(){
  return Math.round(Math.random()*(btn.length-1))
}

## scripts
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

## Simon Game.markdown

      
    Raw
  

              Simon Game.markdown
            
          
    Simon Game

A Pen by Tamnil Saito Junior on CodePen.
License.

  
## styles
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
	<html lang="en-us">
	<head>

	</head>
	<body>
	<h1> Simon Game </h1>
	<button onclick="start()">start </button>
	<button onclick="reset()">reset </button>
	<div id="counter">
	0
	</div>

	<div id="teste">
	testef
	</div>
	<div id="board">
	<div id="red" onclick="setMove('red')">
	red
	</div>
	<div id="blue" onclick="setMove('blue')">
	blue
	</div>
	<div id="green" onclick="setMove('green')">
	green
	</div>
	<div id="yellow" onclick="setMove('yellow')">
	yellow
	</div>


	</div>

	</body>
	</html>
	var hist = [];
	var count=0;
	var btn = [
	{index:0,color:"red",
	audio: new Audio('https://s3.amazonaws.com/freecodecamp/simonSound1.mp3')},{index:1,color:"green",
	audio: new Audio('https://s3.amazonaws.com/freecodecamp/simonSound2.mp3')},{index:2,color:"yellow",
	audio: new Audio('https://s3.amazonaws.com/freecodecamp/simonSound3.mp3')},
	{index:3,color:"blue",
	audio: new Audio('https://s3.amazonaws.com/freecodecamp/simonSound4.mp3')}];
	var pendingTimeouts={};
	var userMoves =[];

	function start(){
	count=0;
	updateCounter();
	computerMove();
	console.log("start");
	}
	function setMove(el){
	var element=getElement(el)
	clearAllTimeouts(); //cancels timer:
	resetToDefault();
	bleepElement(element.color,0);
	userMoves.push(element.index);
	if(userMoves.length<hist.length){

	if(!compareMoves()){
	console.log('perdeu!');
	gameover();
	}
	}else{
	setTimeout(function(){userMoves=[];computerMove();
	},500);
	}
	}
	function computerMove(){
	hist.push(randomButton());
	showComputerMove(hist); //show computer moves
	count +=1;
	updateCounter();

	}
	function updateCounter(){
	document.getElementById('counter').innerHTML=count.toString();
	}
	function reset(){
	gameover();
	start();
	}
	function compareMoves(){ //compares user moves vs compute moves, if equal return true
	console.log(hist,userMoves);
	for(var i=0;i < userMoves.length;i++){
	if(hist[i] != userMoves[i]){
	return false;
	}
	}

	return true
	}
	function gameover(){
	hist=[];
	userMoves=[];
	count=0;
	for(var i=0;i<btn.length;i++){
	btn[i].audio.play();
	}
	}
	function getElement(el){
	selected={}
	for(var i=0;i<btn.length;i++){
	if(btn[i].color==el){
	selected = btn[i];
	}
	}
	return selected;
	}
	function showComputerMove(arr){
	for(var i=0; i<arr.length;i++){
	htmlEl=btn[arr[i]].color;
	bleepElement(htmlEl,i);
	}
	}
	function bleepElement(el,timer){
	//bleep on:
	var element=getElement(el)
	var el= el;
	var computerMoveOn;
	var computerMoveOff;
	computerMoveOn = setTimeout(function(){
	element.audio.play();
	delete pendingTimeouts[computerMoveOn];
	document.getElementById(el).style.color = el;
	}, 1000 * timer);
	//bleep off
	computerMoveOff = setTimeout(function(){
	delete pendingTimeouts[computerMoveOff];
	document.getElementById(el).style.color = "black" ;
	}, 1000*timer+500);
	pendingTimeouts[computerMoveOn]=true;
	pendingTimeouts[computerMoveOff]=true;
	}
	function resetToDefault(){
	//reset all buttons to default color
	}
	function clearAllTimeouts() {
	var keyNames = Object.keys(pendingTimeouts);
	for (var i=0;i<keyNames.length;i++){
	clearTimeout(keyNames[i]);
	}
	}
	function randomButton(){
	return Math.round(Math.random()*(btn.length-1))
	}
	<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
	<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
	<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>