Skip to content

Instantly share code, notes, and snippets.

@Liight

Liight/index.html

Created November 27, 2018 19:41
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save Liight/b55c6e58cbc165ab190ec6bf1a876171 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save Liight/b55c6e58cbc165ab190ec6bf1a876171 to your computer and use it in GitHub Desktop.
Download ZIP
Simon Game (JQuery /JavaScript, Bootstrap)
Raw
index.html
<div class="container">
<div class="container-content">
<div class="container-row">
<div class="left-button" id="green" onclick="makeSelection(1)">
</div>
<div class="right-button" id="red" onclick="makeSelection(2)">
</div>
</div>
<div class="container-row">
<div class="left-button" id="yellow" onclick="makeSelection(3)">
</div>
<div class="right-button" id="blue" onclick="makeSelection(4)">
</div>
</div>
<div class="container-center">
<div id="name">
<h1>Simon</h1></div>
<div class="menu-row" id="">
<div id="counter">
<div id="counter_count">--</div>
<div id="counter_label">Count</div>
</div>
<div id="start">
<div id="start_button" class="up-down-button" onclick="startGame()"></div>
<div id="start_label">Start</div>
</div>
<div id="strict">
<div id="strict_led"></div>
<div id="strict_button" class="up-down-button" onclick="strictMode()"></div>
<div id="strict_label">Strict</div>
</div>
</div>
<div id="off-on-container">
<div class="off-on-label">Off</div>
<div id="switch" onclick="onOff()">
<div id="button"></div>
</div>
<div class="off-on-label">On</div>
</div>
</div>
</div>
</div>
Raw
script.js
var col_green = "#00CC00",
col_red = "#FF0000",
col_yellow = "#FFFF00",
col_blue = "#0000FF",
col_lg = "#80ff80",
col_lr = "#ff8080",
col_ly = "#ffff80",
col_lb = "#8080ff",
green = document.getElementById("green"),
red = document.getElementById("red"),
yellow = document.getElementById("yellow"),
blue = document.getElementById("blue"),
start = document.getElementById("start_button"),
strict = document.getElementById("strict_button"),
counter = document.getElementById("counter_count"),
strict_led = document.getElementById("strict_led"),
mySwitch = document.getElementById("switch"),
btn = document.getElementById("button"),
gAudio = new Audio("https://s3.amazonaws.com/freecodecamp/simonSound1.mp3"),
rAudio = new Audio("https://s3.amazonaws.com/freecodecamp/simonSound2.mp3"),
yAudio = new Audio("https://s3.amazonaws.com/freecodecamp/simonSound3.mp3"),
bAudio = new Audio("https://s3.amazonaws.com/freecodecamp/simonSound4.mp3"),
isOn = false,
isStrict = false,
loopNumber = 0,
canStrict = true,
colors = [green, red, yellow, blue],
list = [],
colorsPressed = [],
isPlayable = false,
getWrong = false,
timer = 1500,
revTimer = 1000;
function onOff() { // control function for btn switch
if (isOn) {
btn.style.float = "left";
isOn = false;
ClearAll();
if (isStrict) {
strict_led.style.backgroundColor = "black";
isStrict = false;
}
} else {
btn.style.float = "right";
isOn = true;
chooseColors();
}
}
function strictMode() { // no errors allowed
if (isOn && canStrict) {
if (isStrict) {
strict_led.style.backgroundColor = "black";
isStrict = false;
} else {
strict_led.style.backgroundColor = "#F3F781";
isStrict = true;
}
} else if (!canStrict && isOn && !isStrict) {
alert("You can't play in Strict Mode if you already win the 1st turn.");
} else if (!canStrict && isOn && isStrict) {
alert("You can't play in Normal Mode if you already win the 1st turn in Strict Mode.");
}
}
function playGame() { // play the game
isPlayable = false;
if (!getWrong) {
loopNumber++;
if (loopNumber > 20) { // winning condition
alert("YOU WIN!!!");
startGame();
return;
}
chooseColors();
}
if (loopNumber < 10) {
counter.textContent = "0" + loopNumber;
} else {
counter.textContent = loopNumber;
}
if (loopNumber > 1) {
canStrict = false;
} else {
canStrict = true;
}
var i = 0;
var time = 0;
colorsPressed = [];
loop = window.setInterval(function() { // select a color, highlight and play sound
var id = list[i].id;
switch (id) {
case "green":
list[i].style.backgroundColor = col_lg;
gAudio.play();
break;
case "red":
list[i].style.backgroundColor = col_lr;
rAudio.play();
break;
case "yellow":
list[i].style.backgroundColor = col_ly;
yAudio.play();
break;
case "blue":
list[i].style.backgroundColor = col_lb;
bAudio.play();
break;
}
revertColor(i);
i++;
if (i >= loopNumber) { // sets an incremental mechanic to the speed at which colors are shown
window.clearInterval(loop);
setTimeout(function() {
getWrong = false;
colorsPressed = [];
isPlayable = true;
}, timer - 150);
if (loopNumber == 4) {
timer = 1250;
revTimer = 900
} else if (loopNumber == 8) {
timer = 950;
revTimer = 750
} else if (loopNumber == 12) {
timer = 650;
revTimer = 450
}
}
}, timer);
}
function chooseColors() { // chooses random colours for the colours array
var num = Math.floor((Math.random() * 4));
list.push(colors[num]);
}
function startGame() { // starts the game
if (isOn) {
console.log("touch start on");
ClearAll();
playGame();
}
}
function revertColor(i) { // reverts all panels to their original colors
setTimeout(function() {
switch (list[i].id) {
case "green":
list[i].style.backgroundColor = col_green;
break;
case "red":
list[i].style.backgroundColor = col_red;
break;
case "yellow":
list[i].style.backgroundColor = col_yellow;
break;
case "blue":
list[i].style.backgroundColor = col_blue;
break;
}
}, revTimer);
}
function makeSelection(value) { // handles the logic when a player makes a selection
var equals = false;
if (isOn) {
if (isPlayable) {
switch (value) {
case 1:
colorsPressed.push(green);
green.style.backgroundColor = col_lg;
gAudio.play();
setTimeout(function() {
green.style.backgroundColor = col_green;
}, 500);
break;
case 2:
colorsPressed.push(red);
red.style.backgroundColor = col_lr;
rAudio.play();
setTimeout(function() {
red.style.backgroundColor = col_red;
}, 500);
break;
case 3:
colorsPressed.push(yellow);
yellow.style.backgroundColor = col_ly;
yAudio.play();
setTimeout(function() {
yellow.style.backgroundColor = col_yellow;
}, 500);
break;
case 4:
colorsPressed.push(blue);
blue.style.backgroundColor = col_lb;
bAudio.play();
setTimeout(function() {
blue.style.backgroundColor = col_blue;
}, 500);
break;
}
for (var i = 0; i < colorsPressed.length; i++) { // runs logic when a panel is pressed
if (colorsPressed[i] != list[i]) {
counter.textContent = "!!";
isPlayable = false;
setTimeout(function() {
if (isStrict) {
startGame();
} else {
getWrong = true;
playGame();
}
}, 2000);
}
}
for (var i = 0; i < list.length; i++) { // checks for correct color selection
if (colorsPressed[i] == list[i]) {
equals = true;
} else {
equals = false
}
}
if (equals) { // continues if no errors are made
playGame()
}
}
}
}
function ClearAll() { // Resets colours and variables for a new game
if (typeof loop !== "undefined") {
window.clearInterval(loop);
}
green.style.backgroundColor = col_green;
red.style.backgroundColor = col_red;
yellow.style.backgroundColor = col_yellow;
blue.style.backgroundColor = col_blue;
list = [];
colorsPressed = [];
loopNumber = 0;
counter.textContent = "--";
isPlayable = false;
timer = 1500;
revTimer = 1000;
canStrict = true;
}
Raw
scripts
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
Raw
simon-game-jquery-javascript-bootstrap.markdown
Raw
style.css
html {
background-image: url("http://i63.tinypic.com/55m07b.jpg");
}
body {
background-color: transparent !important;
}
.container {
margin: 5% auto 0 auto;
}
.container-content {
width: 500px;
height: 500px;
margin: auto;
}
.container-row {
position: relative;
margin: 0px;
width: 100%;
height: 50%;
display: inline;
}
.container-center {
position: relative;
width: 55%;
height: 55%;
background-color: #fff;
border: 20px solid #222;
border-radius: 100%;
left: 22.5%;
top: 22.5%;
}
#name {
position: absolute;
width: 100%;
text-align: center;
padding-top: 10px;
}
#name h1 {
font-weight: 600;
font-size: 3.6em;
}
.menu-row {
position: absolute;
margin: 0 8% 0 8%;
top: 100px;
width: 100%;
height: 70px;
}
#off-on-container {
position: absolute;
top: 165px;
width: 100%;
height: 50px;
text-align: center;
margin: auto;
padding: 12px 0 0 28%;
/*background-color: brown;*/
font-size: 1em;
font-weight: 600;
}
/* COLOR AUDIO BUTTONS */
.left-button,
.right-button {
position: relative;
height: 50%;
width: 50%;
float: left;
}
.left-button:hover {
cursor: pointer;
}
.right-button:hover {
cursor: pointer;
}
#green {
background-color: #00CC00;
border: 20px solid #222;
border-bottom-width: 10px;
border-right-width: 10px;
border-top-left-radius: 100%;
}
#red {
background-color: #FF0000;
border: 20px solid #222;
border-bottom-width: 10px;
border-left-width: 10px;
border-top-right-radius: 100%;
}
#yellow {
background-color: #FFFF00;
border: 20px solid #222;
border-top-width: 10px;
border-right-width: 10px;
border-bottom-left-radius: 100%;
}
#blue {
background-color: #0000FF;
border: 20px solid #222;
border-top-width: 10px;
border-left-width: 10px;
border-bottom-right-radius: 100%;
}
/* CONTROL BUTTONS */
#counter {
width: 28%;
margin: 0 2% 0 2%;
height: 100%;
float: left;
text-align: center;
font-size: 1em;
border-radius: 10px;
}
#counter_count {
background-color: #420420;
height: 40px;
line-height: 33px;
font-size: 40px;
border-radius: 5px;
border: 2px solid black;
color: #d3d3d3;
}
.counter_highlight {
color: red !important;
}
#counter_label {
padding-top: 3px;
font-size: 1em;
font-weight: 600;
}
#start {
width: 28%;
height: 100%;
padding-top: 10px;
/*background-color: violet;*/
float: left;
text-align: center;
}
#start_button {
float: none;
position: relative;
width: 25px;
height: 25px;
background-color: red;
border: 2px solid black;
border-radius: 15px;
text-align: center;
margin: auto;
box-shadow: 0px 2px 2px grey;
}
#start_label {
font-weight: 600;
padding-top: 8px;
}
#strict {
padding-top: 0px;
width: 28%;
height: 100%;
/*background-color: yellow;*/
float: left;
text-align: center;
}
#strict_led {
float: none;
position: relative;
width: 10px;
height: 10px;
background-color: #444444;
border: 1px solid #222;
border-radius: 15px;
text-align: center;
margin: 0 auto 0 auto;
top: -5px;
}
#strict_button {
float: none;
position: relative;
width: 25px;
height: 25px;
background-color: yellow;
border: 2px solid #222;
border-radius: 15px;
text-align: center;
margin: auto;
box-shadow: 0px 2px 2px grey;
}
#strict_label {
font-weight: 600;
padding-top: 8px;
}
#switch {
margin: 0 5px 0 5px;
height: 25px;
width: 50px;
float: left;
background-color: #222;
}
#button {
position: relative;
float: left;
height: 100%;
background-color: #3388FF;
width: 50%;
border: 2px solid #333;
border-radius: 4px;
}
.off-on-label {
float: left;
}
/* Usefull Classes */
.float_right {
float: right !important;
}
Raw
styles
<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