Skip to content

Instantly share code, notes, and snippets.

@marcuszierke

marcuszierke/simonGame.html

Created October 29, 2017 21:08
Show Gist options
  • Save marcuszierke/3471c994bece0d6bd89034df62faf999 to your computer and use it in GitHub Desktop.
Save marcuszierke/3471c994bece0d6bd89034df62faf999 to your computer and use it in GitHub Desktop.
Download ZIP
FCC Simon Game
Raw
simonGame.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>FCC Simon Game</title>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<style type="text/css">
body {
background-color: beige;
text-align: center;
margin-top: 25px;
}
.container {
margin: 0 auto;
text-align: center;
}
.simonBoard {
margin: 0 auto;
margin-top: 50px;
width: 600px;
height: 600px;
border: solid 5px black;
border-radius: 600px;
}
.pad {
margin: 0;
float: left;
position: relative;
width: 295px;
height: 295px;
border: solid 3px black;
z-index: 8;
}
.green {
background-color: green;
border-radius: 300px 0 0 0;
}
.green-active {
background-color: darkgreen !important;
}
.red {
background-color: red;
border-radius: 0 300px 0 0;
}
.red-active {
background-color: darkred !important;
}
.blue {
background-color: blue ;
border-radius: 0 0 300px 0;
}
.blue-active {
background-color: darkblue !important;
}
.yellow {
background-color: yellow;
border-radius: 0 0 0 300px;
}
.yellow-active {
background-color: #e6d47e !important;
}
.controls {
width: 245px;
height: 245px;
margin-left: 170px;
margin-top: 170px;
background-color: white;
border: solid 10px black;
border-radius: 150px;
position: absolute;
z-index: 10;
}
.title {
margin-top: 30px;
font-size: 45px;
font-weight: bold;
margin-bottom: 10px;
}
.inline {
display: inline-block;
vertical-align: middle;
}
.display {
width: 60px;
height: 45px;
border: solid 2px black;
border-radius: 10px;
color: white;
font-size: 30px;
background-color: #342626;
}
.start, .strict {
margin: 0px;
margin-left: 12px;
text-align: center;
width: 55px;
height: 55px;
border: solid 2px black;
border-radius: 30px;
color: black;
font-size: 10px;
line-height: 55px;
}
.start {
background-color: red;
}
.strict {
background-color: yellow;
}
.outer-switch {
width: 60px;
height: 31px;
border: solid 1px black;
background-color: black;
}
.inner-switch {
width: 30px;
height: 29px;
background-color: #4b97ed;
}
</style>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="simonGameCode.js"></script>
</head>
<body>
<h1>Free Code Camp Simon Game</h1>
<div class="container">
<div class="simonBoard">
<div id="0" class="pad green"></div>
<div id="1" class="pad red"></div>
<div id="2" class="pad yellow"></div>
<div id="3" class="pad blue"></div>
<div class="controls">
<div class="title">SIMON</div>
<div class="display inline">00</div>
<div class="start inline">START</div>
<div class="strict inline">STRICT</div>
<p class="switchContainer">
<p class="off inline">OFF</p>
<div class="outer-switch inline">
<div class="inner-switch"></div>
</div>
<p class="on inline">ON</p>
</div>
</div>
</div>
</div>
</body>
</html>
Raw
simonGameCode.js
//variables
userSeq = [];
simonSeq = [];
const NUM_OF_LEVELS = 20;
var id, color, level = 0;
var isOn = false;
var strictOn = false;
var boardSound = [
"https://s3.amazonaws.com/freecodecamp/simonSound1.mp3", //green
"https://s3.amazonaws.com/freecodecamp/simonSound2.mp3", //red
"https://s3.amazonaws.com/freecodecamp/simonSound3.mp3", //yellow
"https://s3.amazonaws.com/freecodecamp/simonSound4.mp3" //blue
];
//1. - starts the game sequence
$(document).ready(function() {
//sets the game mode to strict
$(".strict").click(function() {
if (!strictOn) {
strictOn = true;
$(".strict").css({
'background-color' : 'green',
'line-height' : '2',
'padding-top' : '8px'});
$(".strict").html("STRICT<br>ON");
}
else {
strictOn = false;
$(".strict").css({
'background-color' : 'yellow',
'padding-top' : '15px'});
$(".strict").html("STRICT");
}
});
//sets the game status to ON
$(".outer-switch").click(function() {
if (!isOn) {
isOn = true;
$(".outer-switch").css({'background-color' : '#4b97ed'});
$(".inner-switch").css({'background-color' : 'black'});
}
else {
isOn = false;
$(".outer-switch").css({'background-color' : 'black'});
$(".inner-switch").css({'background-color' : '#4b97ed'});
}
});
//starts the game
$(".start").click(function() {
if (isOn) {
level++;
startSequence();
}
});
//2. - user pad listener
$(".pad").click(function() {
id = $(this).attr("id");
color = $(this).attr("class").split(" ")[1];
userSeq.push(id);
addClassSound(id,color);
//checking user sequence
if (!checkUserSeq()) {
if (strictOn) {
displayError();
level = 0;
$(".display").html(level);
userSeq = [];
simonSeq = [];
isOn = false;
strictOn = false;
return;
}
else {
displayError();
userSeq = [];
}
}
//checking end of sequene
if (userSeq.length == simonSeq.length && userSeq.length < NUM_OF_LEVELS) {
level++;
userSeq = [];
startSequence();
}
//checking for a winner
if (userSeq.length == NUM_OF_LEVELS) {
$(".display").html("WIN");
}
});
});
//checking user sequence against Simon's = function
function checkUserSeq() {
for (var i = 0; i < userSeq.length; i++) {
if(userSeq[i] != simonSeq[i]) {
return false;
}
}
return true;
}
//display error - function
function displayError() {
console.log("Error!");
var counter = 0;
var myError = setInterval(function() {
$(".display").html("ERR");
counter++;
if (counter == 3) {
$(".display").html(level);
clearInterval(myError);
userSeq = [];
counter = 0;
}
}, 500);
}
//helper function - start sequence
function startSequence() {
console.log("Current Level: " + level);
$(".display").html(level);
getRandomNum();
var i = 0;
var myInterval = setInterval(function() {
id = simonSeq[i];
color = $("#" + id).attr("class").split(" ")[1];
addClassSound(id, color);
i++;
console.log(i, simonSeq.length);
if (i == simonSeq.length) {
clearInterval(myInterval);
}
}, 750);
}
//generate random number
function getRandomNum() {
var random = Math.floor(Math.random() * 4);
simonSeq.push(random);
}
//adds temporary class and sound
function addClassSound(id, color) {
$("#" + id).addClass(color + "-active");
playSound(id);
setTimeout(function() {
$("#" + id).removeClass(color + "-active");
}, 500);
}
//plays the sound for the requested pad
function playSound(id) {
var sound = new Audio(boardSound[id]);
sound.play();
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment