Created
January 12, 2020 02:04
-
-
Save lukenetti3/c9dfd02a8f3a3907e31a7057ca568f60 to your computer and use it in GitHub Desktop.
Simon Game
This file contains 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> | |
<link href="https://fonts.googleapis.com/css?family=Roboto+Mono:400,500,700,700i" rel="stylesheet"> | |
<body> | |
<audio id="greenSound"> | |
<source src="https://s3.amazonaws.com/freecodecamp/simonSound1.mp3"></source> | |
</audio> | |
<audio id="redSound"> | |
<source src="https://s3.amazonaws.com/freecodecamp/simonSound2.mp3"></source> | |
</audio> | |
<audio id="yellowSound"> | |
<source src="https://s3.amazonaws.com/freecodecamp/simonSound3.mp3"></source> | |
</audio> | |
<audio id="blueSound"> | |
<source src="https://s3.amazonaws.com/freecodecamp/simonSound4.mp3"></source> | |
</audio> | |
<h1>Simon Game</h1> | |
<br> | |
<hr class="style11"> | |
<div class="radio-inline"> | |
<label><input type="radio" name="optradio" id="opt1">on</label> | |
</div> | |
<div class="radio-inline"> | |
<label><input type="radio" name="optradio" id="opt2">off</label> | |
</div> | |
<button class="btn btn-primary">start</button> | |
<div class="counter"> | |
<h4>Count: <span id="count"></span></h4> | |
</div> | |
<div class="container"> | |
<div class="row"> | |
<div class="green colors topLeft col-xs-6"><span>green</span></div> | |
<div class="red colors topRight col-xs-6"><span>red</span></div> | |
</div> | |
<div class="row"> | |
<div class="yellow colors bottomLeft col-xs-6"><span>yellow</span></div> | |
<div class="blue colors bottomRight col-xs-6"><span>blue</span></div> | |
</div> | |
</div> | |
</body> | |
</html> |
This file contains 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
// Initialize all variable | |
var randNum; | |
var compArr = []; | |
var userArr = []; | |
var colorsArr = ["green","red","yellow","blue"]; | |
var selColor; | |
var audioGreen = $("#greenSound")[0]; | |
var audioRed = $("#redSound")[0]; | |
var audioYellow = $("#yellowSound")[0]; | |
var audioBlue = $("#blueSound")[0]; | |
var startButton = false; | |
var userTurn = false; | |
var max=1; | |
// Start can only be clicked if "on" is selected | |
$("button").on("click", function() { | |
if($("#opt1").is(":checked")) { | |
startButton = true; | |
// Once Start is clicked begin game | |
fillCompArr(); | |
// This function contains the beginning of the game and will | |
// go through the compArr | |
startGame(); | |
} else { stopGame(); } | |
}); | |
// When off is selected | |
$("#opt2").click(function(){ | |
stopGame(); | |
}); | |
// Fill computer array | |
function fillCompArr() { | |
for(var i = 0; i < 20; i++) { | |
selColor = grabColors(); | |
compArr.push(selColor); | |
} | |
} | |
function grabColors() { | |
var num = randNumGen(); | |
return colorsArr[num]; | |
} | |
function randNumGen() { | |
// Grabs number between 0-3 | |
randNum = Math.floor(Math.random() * 4); | |
return randNum; | |
} | |
function startGame() { | |
startButton = true; | |
$("h1").text("Simon Game"); | |
$("#count").text(max.toString()).fadeIn(); | |
for (var j = 0; j < max; j++) { | |
(function (j) { | |
setTimeout(function () { | |
playComp(compArr[j]); | |
}, 1000*j); | |
})(j); | |
}; | |
} | |
// Send user to soundFlash function and update array | |
$(".green").on("click", function() { | |
if(startButton === true) { | |
userArr.push($(this).text()); | |
soundFlashGreen(); | |
compareArrs(); | |
} | |
}); | |
$(".red").on("click", function() { | |
if(startButton === true) { | |
userArr.push($(this).text()); | |
soundFlashRed(); | |
compareArrs(); | |
} | |
}); | |
$(".yellow").on("click", function() { | |
if(startButton === true) { | |
userArr.push($(this).text()); | |
soundFlashYellow(); | |
compareArrs(); | |
} | |
}); | |
$(".blue").on("click", function() { | |
if(startButton === true) { | |
userArr.push($(this).text()); | |
soundFlashBlue(); | |
compareArrs(); | |
} | |
}); | |
function compareArrs() { | |
for(var x = 0; x < userArr.length; x++) { | |
if(userArr[x] === compArr[x]) { | |
if(userArr.length === 20) { | |
$("h1").text("You WIN!!!"); | |
stopGame(); | |
return; | |
} | |
} else { | |
$("h1").fadeOut("slow", function() { | |
$("h1").text("Try Again").fadeIn(); | |
}); | |
startButton = false; | |
userArr=[]; | |
setTimeout(startGame,2500); | |
//stopGame(); | |
//break; | |
return; | |
} | |
} | |
if(startButton === false) { | |
return; | |
} | |
if(userArr.length === max) { | |
userArr = []; | |
max++; | |
setTimeout(startGame,1500); | |
} | |
} | |
// Determine next color in array and set off flash and sound | |
// ***Change selColor to position in array*** | |
function playComp(color) { | |
switch (color) { | |
case "green": | |
soundFlashGreen(); | |
break; | |
case "red": | |
soundFlashRed(); | |
break; | |
case "yellow": | |
soundFlashYellow(); | |
break; | |
case "blue": | |
soundFlashBlue(); | |
} | |
} | |
// These functions set off the sound and flash once the colors are | |
// pressed or computer selects them | |
function soundFlashGreen() { | |
setTimeout(function(){ | |
audioGreen.load(); | |
},500); | |
audioGreen.play(); | |
$(".green").addClass("highlightGreen"); | |
setTimeout(function() { | |
$(".green").removeClass("highlightGreen"); | |
},500); | |
} | |
function soundFlashRed() { | |
setTimeout(function(){ | |
audioRed.load(); | |
},500); | |
audioRed.play(); | |
$(".red").addClass("highlightRed"); | |
setTimeout(function() { | |
$(".red").removeClass("highlightRed"); | |
},500); | |
} | |
function soundFlashYellow() { | |
setTimeout(function(){ | |
audioYellow.load(); | |
},500); | |
audioYellow.play(); | |
$(".yellow").addClass("highlightYellow"); | |
setTimeout(function() { | |
$(".yellow").removeClass("highlightYellow"); | |
},500); | |
} | |
function soundFlashBlue() { | |
setTimeout(function(){ | |
audioBlue.load(); | |
},500); | |
audioBlue.play(); | |
$(".blue").addClass("highlightBlue"); | |
setTimeout(function() { | |
$(".blue").removeClass("highlightBlue"); | |
},500); | |
} | |
function stopGame() { | |
compArr = []; | |
userArr = []; | |
startButton = false; | |
} | |
This file contains 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="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> |
This file contains 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: #FFAFBD; /* fallback for old browsers */ | |
background: -webkit-linear-gradient(to right, #ffc3a0, #FFAFBD); /* Chrome 10-25, Safari 5.1-6 */ | |
background: linear-gradient(to right, #ffc3a0, #FFAFBD); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ | |
font-family: 'Roboto Mono', monospace; | |
} | |
.container { | |
border: 7px solid black; | |
margin-top: 10px; | |
width: 410px; | |
height: 410px; | |
border-radius: 200px; | |
} | |
h1 { | |
text-align: center; | |
margin-top: 10px; | |
font-weight: 700; | |
font-size: 45px; | |
letter-spacing: 3px; | |
} | |
button { | |
text-transform: uppercase; | |
margin-left: 10px; | |
letter-spacing: 1px; | |
} | |
.counter { | |
text-align: center; | |
} | |
.radio-inline { | |
text-align: center; | |
margin-left: 43%; | |
text-transform: uppercase; | |
} | |
.colors { | |
width: 198px; | |
height: 198px; | |
border: 1px solid black; | |
text-align: center; | |
} | |
.topLeft { | |
border-radius: 400px 5px 5px 5px; | |
background-color: #309b1d; | |
} | |
.highlightGreen { | |
background-color: #36db2e; | |
} | |
.topRight { | |
border-radius: 5px 400px 5px 5px; | |
background-color: #cc3033; | |
} | |
.highlightRed { | |
background-color: #ff1919; | |
} | |
.bottomLeft { | |
border-radius: 5px 5px 5px 400px; | |
background-color: #e6e600; | |
} | |
.highlightYellow { | |
background-color: #ffff66; | |
} | |
.bottomRight { | |
border-radius: 5px 5px 400px 5px; | |
background-color: #000099; | |
} | |
.highlightBlue { | |
background-color: #1a1aff; | |
} | |
hr.style11 { | |
height: 6px; | |
background: url(http://ibrahimjabbari.com/english/images/hr-11.png) repeat-x 0 0; | |
border: 0; | |
margin-top: -10px; | |
width: 500px; | |
} | |
span { | |
display: none; | |
} | |
#count { | |
display: inline; | |
} |
This file contains 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="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment