A Pen by Timothy Zeb Girouard on CodePen.
Created
October 7, 2015 01:00
-
-
Save ZebGirouard/4489e8ffea838e789ec6 to your computer and use it in GitHub Desktop.
Simon Game
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
$(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()); | |
}); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; | |
} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment