Skip to content

Instantly share code, notes, and snippets.

@mrcreel

mrcreel/fcc-simon-0-3-0.markdown

Created March 14, 2018 00:14
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mrcreel/07b2d6e2f8d37581c3c8bbd051f42cc9 to your computer and use it in GitHub Desktop.
Save mrcreel/07b2d6e2f8d37581c3c8bbd051f42cc9 to your computer and use it in GitHub Desktop.
Download ZIP
FCC-Simon 0.3.0
Raw
fcc-simon-0-3-0.markdown
Raw
index.html
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>simon</title>
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
</head>
<body>
<div class="container">
<h1>Simon</h1>
<div class='game'>
<div class="layout"></div>
<div class="btn quad quad--1" onclick = "returnId(this.id)" id="1"></div>
<div class="btn quad quad--2" onclick = "returnId(this.id)" id="2"></div>
<div class="btn quad quad--3" onclick = "returnId(this.id)" id="3"></div>
<div class="btn quad quad--4" onclick = "returnId(this.id)" id="4"></div>
<div class="divider divider-horizontal"></div>
<div class="divider divider-horizontal_2"></div>
<div class="divider divider-vertical"></div>
<div class="divider divider-vertical_2"></div>
<div class="console grid">
<div class="display" id = "display">--</div>
<div class="buttonPanel">
<button class="btn btnPanel btnStart" id = "btnStart">Start</button>
<button class="btn btnPanel btnStrict" id = "btnStrict">Strict</button>
</div>
</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>
</body>
</html>
Raw
script.js
const display = document.getElementById("display");
let playerPicks = [];
let computerPicks = [];
let strict = false;
const streak = 20;
$(".btnStart").click(function() {
display.innerHTML = 0;
computerPicks = [];
randomPick();
});
$(".btnStrict").click(function() {
if(strict){
strict = false;
$(".btnStrict").toggleClass("selected");
} else {
strict = true;
$(".btnStrict").toggleClass("selected");
}
});
function randNumber(max, min) {
return Math.floor(Math.random() * max) + min;
}
function showComputerPicks(computerPicks) {
$(".btn").prop("disabled", true);
computerPicks.forEach(function(ele, id) {
const chosenOne = document.getElementById(computerPicks[id]);
setTimeout(function() {
displayPick(id, chosenOne);
}, 500 + 1000 * id);
});
setTimeout(function() {
playersTurn();
}, 1000 * (computerPicks.length + 1));
}
function playersTurn() {
playerPicks = [];
$(".btn").prop("disabled", false);
alert("Your Turn");
}
function returnId(buttonId) {
playerPicks.push(parseInt(buttonId));
displayPick(playerPicks.length - 1, document.getElementById(buttonId));
comparePicks();
}
function displayPick(id, choice) {
document.getElementById("audio" + computerPicks[id]).play();
$(choice)
.toggleClass("selected", parseInt(250))
.toggleClass("selected", parseInt(1000));
display.innerHTML = id + 1;
}
function comparePicks() {
for (let i = 0; i < playerPicks.length; i++) {
if (computerPicks[i] != playerPicks[i]) {
if (strict) {
alert("Game Over!");
location.reload(true);
return;
} else {
setTimeout(function(){
alert("TRY AGAIN!");
showComputerPicks(computerPicks);
}, 1000);
}
}
}
if (computerPicks.length == playerPicks.length) {
setTimeout(function() {
if (playerPicks.length == streak) {
alert("YOU WON!");
location.reload(true);
} else {
alert("My Turn");
randomPick();
}
}, 1000);
}
}
function randomPick() {
const compPick = randNumber(4, 1);
computerPicks.push(compPick);
showComputerPicks(computerPicks);
}
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/jqueryui/1.12.1/jquery-ui.min.js"></script>
Raw
style.css
body {
background: #fafafa;
font-family: "Montserrat", Helvetica, Arial, sans-serif;
color: #333;
}
.container {
max-width: 450px;
min-width: 200px;
margin: 0 auto;
padding: 20px;
width: 90%;
text-align: center;
background-color: #eee;
border-radius: 6px;
}
.game {
display: grid;
width: 95%;
height: auto;
grid-template-columns: 2fr 3fr 3fr 2fr;
grid-template-rows: 2fr 3fr 3fr 2fr;
}
.layout {
grid-column: 1/5;
grid-row: 1/5;
border-radius: 100%;
padding-top: 100%;
background-color: black;
}
.quad{
width:90%;
height:90%;
}
.quad--1{
margin-left:10%;
margin-top:10%;
grid-area: 1/1/3/3;
border-radius: 100% 0 0 0;
background-color: green;
}
.quad--2{
grid-area: 1/3/3/6;
margin-top:10%;
border-radius: 0 100% 0 0;
background-color: red;
}
.quad--3{
grid-area: 3/3/6/6;
border-radius: 0 0 100% 0;
background-color: blue;
}
.quad--4{
grid-area: 3/1/6/3;
margin-left:10%;
border-radius: 0 0 0 100%;
background-color: yellow;
}
.quad--1.selected{
background-color : lightgreen;
}
.quad--2.selected{
background-color : pink;
}
.quad--3.selected{
background-color : lightblue;
}
.quad--4.selected{
background-color : lightyellow;
}
.divider{
background-color: black;
}
.divider-horizontal{
width: 5%;
grid-area: 1/3/6/6;
}
.divider-horizontal_2{
width: 5%;
grid-area: 1/1/6/3;
margin-left: auto;
margin-right: 0;
}
.divider-vertical{
height: 10%;
grid-area: 3/1/3/6;
}
.divider-vertical_2{
height: 5%;
grid-area: 1/1/3/6;
margin-top: auto;
margin-bottom: 0;
}
.console{
background-color: black;
grid-area:2/2/4/4;
height: 100%;
border-radius:100%;
}
.display{
cursor: default;
pointer-events: none;
margin:auto;
margin-top: 15%;
font-size: 40px;
line-height:80px;
font-weight: bolder;
width:50%;
height: 30%;
background-color: orange;
}
.buttonPanel{
margin-top: 10%;
align-content: justify;
}
.btn{
font-size: 18px;
cursor:pointer;
}
.btnStart{
grid-area:2/2/4/4;
}
.btnStrict.selected{
background-color:green;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment