ZebGirouard/Simon Game.markdown

## index.html
<html>
  <body>
    <div class="container">
      <div class = 'outer circle container'>
        <div>
          <button class='pushButton quarter-circle' id='green'></button>
          <button class='pushButton quarter-circle' id='red'></button>
          <button class='pushButton quarter-circle' id='yellow'></button>
          <button class='pushButton quarter-circle' id='blue'></button>
        </div>
        <div class='inner circle container'>
          <h2 class='text-center'>Simon&reg;</h2>
          <button class='pushButton circle inner' id='start'>Start</button>
        </div>
      </div>
    </div>
  </body>
</html>

## script.js
$(document).ready(function() {

  //Define what the start button does
  var initialize = function() {
    var game = {
      sequence: [],
      colors: ['green', 'red', 'yellow', 'blue'],
      player: 'computer'
    };
    console.log('Game initialized.');
    return game;
  };

    //Define what clicking a color does
  var waitForClick = function (color) {
    console.log("Waiting for "+color);
    var WinLose;
    WinLose = setTimeout(loseGame(), 5000);
    $( "#"+color ).click(function() {
      console.log( "You clicked the right color!" );
      WinLose= 'win';
    });
    $( "button" ).not( "#"+color ).click(function() {
      console.log( "You clicked the wrong color!" );
      WinLose= 'lose';
    });
    return WinLose;
  };
  //Lose the game
  var loseGame = function() {
    console.log('You lost, buddy.');
    return 'lost';
  };
  var takeComputerTurn = function(game) {
    console.log("It's the computer's turn.");
    var newColor = game.colors[Math.floor(Math.random()*4)]
    console.log(newColor);
    game.sequence.push(newColor);
    console.log(game.sequence);
    game.player = 'human';
    playGame(game);
  }

  var takeHumanTurn = function(game) {
    console.log("It's the human's turn.");
    for (var i = 0; i < game.sequence.length; i++) {
      if (waitForClick(game.sequence[i]) === 'lost') {
        return;
      }
    }
    game.player = 'computer';
    playGame(game);
  }
  var playGame = function(game) {
    if (game.player === 'computer') {
      takeComputerTurn(game);
    }
    else {
      takeHumanTurn(game);
    }
  };
  //Initialize the game
  playGame(initialize());

});

## scripts
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

## Simon Game.markdown

      
    Raw
  

              Simon Game.markdown
            
          
    Simon Game

A Pen by Timothy Zeb Girouard on CodePen.
License.

  
## style.css
body {
  background-color: rgb(210,200,210);
}

h2 {
  font-family: "Times New Roman", Georgia, Serif;
  font-size: 350%;
  font-weight: 900;
}
.circle {
  border-radius: 50%;
  padding: 33%;
}

.outer {
  position: relative;
  width: 75%;
  height: 100%;
  background: rgb(40,40,40);
}

.inner {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50%;
  height: 50%;
  transform: translate(-50%,-50%);
  padding: 2rem;
  background: rgb(200,210,200);
}

#green {
  background: rgb(0,175,0);
  left: 0;
  top: 0;
  -moz-border-radius: 50% 0 0 0;
  border-radius: 50% 0 0 0;
}

#red {
  background: rgb(175,0,0);
  right: 0;
  top: 0;
  -moz-border-radius: 0 50% 0 0;
  border-radius: 0 50% 0 0;
}

#yellow {
  background: rgb(175,200,0);
  left: 0;
  bottom: 0;
  -moz-border-radius: 0 0 0 50%;
  border-radius: 0 0 0 50%;
}

#blue {
  background: rgb(0,0,175);
  right: 0;
  bottom: 0;
  -moz-border-radius: 0 0 50% 0;
  border-radius: 0 0 50% 0;
}

.quarter-circle {
    position: absolute;
    height: 49%;
    width: 49%;
}

#start {
  top: 74%;
  background: rgb(150,0,150);
  color: rgb(200,200,200);
  font-size: 150%;
  font-weight: 900;
}

## styles
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
	<html>
	<body>
	<div class="container">
	<div class = 'outer circle container'>
	<div>
	<button class='pushButton quarter-circle' id='green'></button>
	<button class='pushButton quarter-circle' id='red'></button>
	<button class='pushButton quarter-circle' id='yellow'></button>
	<button class='pushButton quarter-circle' id='blue'></button>
	</div>
	<div class='inner circle container'>
	<h2 class='text-center'>Simon®</h2>
	<button class='pushButton circle inner' id='start'>Start</button>
	</div>
	</div>
	</div>
	</body>
	</html>
	$(document).ready(function() {

	//Define what the start button does
	var initialize = function() {
	var game = {
	sequence: [],
	colors: ['green', 'red', 'yellow', 'blue'],
	player: 'computer'
	};
	console.log('Game initialized.');
	return game;
	};

	//Define what clicking a color does
	var waitForClick = function (color) {
	console.log("Waiting for "+color);
	var WinLose;
	WinLose = setTimeout(loseGame(), 5000);
	$( "#"+color ).click(function() {
	console.log( "You clicked the right color!" );
	WinLose= 'win';
	});
	$( "button" ).not( "#"+color ).click(function() {
	console.log( "You clicked the wrong color!" );
	WinLose= 'lose';
	});
	return WinLose;
	};
	//Lose the game
	var loseGame = function() {
	console.log('You lost, buddy.');
	return 'lost';
	};
	var takeComputerTurn = function(game) {
	console.log("It's the computer's turn.");
	var newColor = game.colors[Math.floor(Math.random()*4)]
	console.log(newColor);
	game.sequence.push(newColor);
	console.log(game.sequence);
	game.player = 'human';
	playGame(game);
	}

	var takeHumanTurn = function(game) {
	console.log("It's the human's turn.");
	for (var i = 0; i < game.sequence.length; i++) {
	if (waitForClick(game.sequence[i]) === 'lost') {
	return;
	}
	}
	game.player = 'computer';
	playGame(game);
	}
	var playGame = function(game) {
	if (game.player === 'computer') {
	takeComputerTurn(game);
	}
	else {
	takeHumanTurn(game);
	}
	};
	//Initialize the game
	playGame(initialize());

	});
	body {
	background-color: rgb(210,200,210);
	}

	h2 {
	font-family: "Times New Roman", Georgia, Serif;
	font-size: 350%;
	font-weight: 900;
	}
	.circle {
	border-radius: 50%;
	padding: 33%;
	}

	.outer {
	position: relative;
	width: 75%;
	height: 100%;
	background: rgb(40,40,40);
	}

	.inner {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 50%;
	height: 50%;
	transform: translate(-50%,-50%);
	padding: 2rem;
	background: rgb(200,210,200);
	}

	#green {
	background: rgb(0,175,0);
	left: 0;
	top: 0;
	-moz-border-radius: 50% 0 0 0;
	border-radius: 50% 0 0 0;
	}

	#red {
	background: rgb(175,0,0);
	right: 0;
	top: 0;
	-moz-border-radius: 0 50% 0 0;
	border-radius: 0 50% 0 0;
	}

	#yellow {
	background: rgb(175,200,0);
	left: 0;
	bottom: 0;
	-moz-border-radius: 0 0 0 50%;
	border-radius: 0 0 0 50%;
	}

	#blue {
	background: rgb(0,0,175);
	right: 0;
	bottom: 0;
	-moz-border-radius: 0 0 50% 0;
	border-radius: 0 0 50% 0;
	}

	.quarter-circle {
	position: absolute;
	height: 49%;
	width: 49%;
	}

	#start {
	top: 74%;
	background: rgb(150,0,150);
	color: rgb(200,200,200);
	font-size: 150%;
	font-weight: 900;
	}