Skip to content

Instantly share code, notes, and snippets.

@paulinafischer

paulinafischer/index.html

Created December 27, 2019 11:25
Show Gist options
  • Save paulinafischer/776100eafa2afe8603d72f1d280a94f5 to your computer and use it in GitHub Desktop.
Save paulinafischer/776100eafa2afe8603d72f1d280a94f5 to your computer and use it in GitHub Desktop.
Download ZIP
Simon Game
Raw
index.html
<br>
<div id="con" class="container-fluid">
<div class="row">
<div class="col-sm-4"></div>
<div class="col-sm-4">
<div class="container-fluid animated fadeInDown" id="content">
<h1 class="text-success text-center">Simon Game</h1>
<div id="box1" class="container-fluid">
<h1 id="input" class="text- alert text-center"></h1>
<div class="row text-center" id="box">
<div id = "bt1" class="btn-group text-center">
<button id="start" class="bt btn btn-default"><span class="glyphicon glyphicon-play" aria-hidden="true"></span></button>
<button id="strict" class="bt btn btn-default"><span class="glyphicon glyphicon-step-backward" aria-hidden="true"></span></button>
<button id="on" class="bt btn btn-default"><span class="glyphicon glyphicon-off" aria-hidden="true"></span></button>
<button id="off" class="bt btn btn-default"><span class="glyphicon glyphicon-off" aria-hidden="true"></span></button>
<button id="info" class="bt btn btn-default" data-toggle="tooltip" data-placement="bottom" title="1.- Press the green button on the grey screen to start.
2.- Press the play button.3.- Wait to hear a tone and then try to copy the same. The tones increase with your progress. 4.- You can win the game when your count is 20.5.- When you're wrong this sign *** shows on the screen, so you get a new opportunity to copy the tones."><span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span></button>
<br>
<br><h3>Count</h3>
<form id="count" class="well well-lg"> </form>
</div>
</div>
</div>
<div class="row text-center">
<br>
<div id = "bt2" class="btn-group">
<button id="one" class="dark1 btn btn-default"><i id="g" class="fa fa-bug" aria-hidden="true"></i>
</button>
<button id="two" class="dark2 btn btn-default"><i id="r" class="fa fa-bug" aria-hidden="true"></i>
</button>
</div>
</div>
<div class="row text-center">
<div id = "bt2" class="btn-group">
<button id="three" class="dark3 btn btn-default"><i id="y" class="fa fa-bug" aria-hidden="true"></i>
</button>
<button id="four" class="dark4 btn btn-default"><i id="b" class="fa fa-bug" aria-hidden="true"></i>
</button>
</div>
<br><br>
</div>
</div>
<br><br>
</div>
<div class="col-sm-4"></div>
</div></div>
<audio id="audio1">
<source src="https://s3.amazonaws.com/freecodecamp/simonSound1.mp3" type="audio/mpeg">
</audio>
<audio id="audio2">
<source src="https://s3.amazonaws.com/freecodecamp/simonSound2.mp3" type="audio/mpeg">
</audio>
<audio id="audio3">
<source src="https://s3.amazonaws.com/freecodecamp/simonSound3.mp3" type="audio/mpeg">
</audio>
<audio id="audio4">
<source src="https://s3.amazonaws.com/freecodecamp/simonSound4.mp3" type="audio/mpeg">
</audio>
<div class="panel-footer text-center" id="footer"><p>Created by Paulina Fischer</p><br><p>Library from
<a href="https://www.youtube.com/channel/UCLG_lIjyLPqjN-KtHK_aE-Q" target="_blank">Happy Coder</a> and freeCodeCamp.</p></div>
Raw
script.js
var random = [];
var litID = [];
var lit;
var clicked = [];
var i;
var j=0;
var count = 1;
var on;
var off;
var strict;
var x;
function change1() {
if (count <= 10) {
off = 400;
on = 800;
}
else {
off = 250;
on = 500;
}
x = setInterval(function () {
if (random[j] == 1) {
lit = 'light1';
$('#one').addClass(lit);
$('#audio1')[0].play();
litID.push(1);
setTimeout(function () {
$('#one').removeClass(lit);
}, off);
}
else if (random[j] == 2) {
lit = 'light2';
$('#two').addClass(lit);
$('#audio2')[0].play();
litID.push(2);
setTimeout(function () {
$('#two').removeClass(lit);
}, off);
}
else if (random[j] == 3) {
lit = 'light3';
$('#three').addClass(lit);
$('#audio3')[0].play();
litID.push(3);
setTimeout(function () {
$('#three').removeClass(lit);
}, off);
}
else {
lit = 'light4';
$('#four').addClass(lit);
$('#audio4')[0].play();
litID.push(4);
setTimeout(function () {
$('#four').removeClass(lit);
}, off);
}
j++;
if (j>=count) {
clearInterval(x);
}
}, on);
}
function checking() {
if (litID.length == clicked.length) {
if (litID.join() == clicked.join()) {
if (count == 20) {
setTimeout(function () {
alert("You win!");
location.reload();
}, 1000);
}
else {
setTimeout(function () {
$('#count').text(count + 1);
count++;
litID = [];
clicked = [];
j = 0;
change1();
}, 1000);
}
}
else {
if (strict == 1) {
location.reload();
}
else {
setTimeout(function () {
$('#count').text('***');
litID = [];
clicked = [];
j = 0;
change1();
}, 1000);
}
}
}
}
$('#on').on('click', function () {
$('#count').text('--');
for (i=0; i<20; i++) {
random[i] = Math.ceil((Math.random() * 4));
}
$('#strict').on('click', function () {
strict=1;
});
$('#start').on('click', function () {
$('#count').text(count);
change1();
});
$('#one').on('click', function () {
$('#one').addClass('light1');
$('#audio1')[0].play();
clicked.push(1);
setTimeout(function () {
$('#one').removeClass('light1');
}, 250);
checking();
});
$('#two').on('click', function () {
$('#two').addClass('light2');
$('#audio2')[0].play();
clicked.push(2);
setTimeout(function () {
$('#two').removeClass('light2');
}, 250);
checking();
});
$('#three').on('click', function () {
$('#three').addClass('light3');
$('#audio3')[0].play();
clicked.push(3);
setTimeout(function () {
$('#three').removeClass('light3');
}, 250);
checking();
});
$('#four').on('click', function () {
$('#four').addClass('light4');
$('#audio4')[0].play();
clicked.push(4);
setTimeout(function () {
$('#four').removeClass('light4');
}, 250);
checking();
});
});
$('#off').on('click', function () {
location.reload();
});
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cldup.com/S6Ptkwu_qA.js"></script>
Raw
simon-game.markdown
Raw
style.css
#content {
text-align:center;
}
#box1{background-color:darkgrey;
border:solid 5px #0f0e0f;;
border-radius:60px;
margin:15px 25px 1px 25px;}
#con{
background-color:whitesmoke;
}
#content{background-color:black;
border:solid 5px #0f0e0f;;
border-radius:100px;
box-shadow: 7px 12px 5px #292829;}
.well{
font-size:30px;
width:200px;
border-radius:100px;
background-color:black;
color:darkgreen;
border:solid 5px #0a0a0a;;
}
#one {
height: 100px;
width:100px;
text-align: center;
align-content: center;
border:solid 2px #000000;
border-top-left-radius:28px;
}
#two {
height: 100px;
width: 100px;
text-align: center;
align-content: center;
border:solid 2px #000000;
border-top-right-radius:28px;
}
#three {
height: 100px;
width: 100px;
text-align: center;
align-content: center;
border:solid 2px #000000;
border-bottom-left-radius:28px;
}
#four {
height: 100px;
width: 100px;
text-align: center;
align-content: center;
border:solid 2px #000000;
border-bottom-right-radius:28px;
}
.dark1 {
background-color: #097604;
}
.light1 {
background-color: #61FE5A;
}
.dark2 {
background-color: #7E0506;
}
.light2 {
background-color: #FE585A;
}
.dark3 {
background-color: #8C8606;
}
.light3 {
background-color: #fdff1d;
}
.dark4 {
background-color: #04167B;
}
.light4 {
background-color: #667CFB;
}
.bt {
text-align: center;
align-content: center;
background-color: transparent;
font-size:18px;
border:none;
}
#footer{
margin:auto;
text-align:center;
}
.fa{
font-size:50px;
}
#y{color:#8C8606;}
#g{color:#097604;}
#r{color:#7E0506;}
#b{color:#04167B;}
#on{color:green; }
#off{color:maroon; }
h1, h3{font-family: 'Saira Extra Condensed', sans-serif;}
Raw
styles
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment