FCC: Simon Game (WIP)

Developer
Jeanine
Size
4,712 Kb
Views
26,312
  1. FCC: Simon Game (WIP) Previews
  2. FCC: Simon Game (WIP) HTML Codes
  3. FCC: Simon Game (WIP) CSS Codes
  4. FCC: Simon Game (WIP) JS Codes

How do I make an fcc: simon game (wip)?

What is a fcc: simon game (wip)? How do you make a fcc: simon game (wip)? This script and codes were developed by Jeanine on 12 September 2022, Monday.

FCC: Simon Game (WIP) Previews
IQ Test

FCC: Simon Game (WIP) - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>FCC: Simon Game (WIP)</title> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.min.css'>
<link rel='stylesheet prefetch' href='http://fonts.googleapis.com/css?family=Righteous'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class='losetag'>Oops, try again.</div>
<div class='wintag'>Congratulations. <br>You win!</div>
<div class='container'> <div class='wrapper'> <div class='box'> <div class='title'> <h1>simon</h1> </div> <ul class='game'> <li id='id1'></li> <li id='id2'></li> <li id='id3'></li> <li id='id4'></li> </ul> <a class='play active'>Start</a> </div> <div class='debug'> Playerplays: <span class='playerplays'></span> Correct: <span class='correct'></span> </div> Steps: <span class='correctsteps'>0</span> Strict: <span class='strictmode'>Disabled</span> </div>
</div> <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

FCC: Simon Game (WIP) - Script Codes CSS Codes

.debug { display: none;
}
* { font-family: 'Righteous', cursive; text-transform: uppercase;
}
.box { position: relative; text-align: center;
}
.game { position: relative; top: 0; z-index: 1; padding: 0; margin: 0; border-radius: 50%; border: 0; height: 30vw; width: 30vw; list-style: none; margin: 0 auto;
}
.game li { display: block; width: 50%; height: 14.2vw; float: left; border: 1vw solid #000; list-style: none; margin: 0; padding: 0; cursor: pointer;
}
.game li:nth-of-type(4n+1) { border-right-width: 1px; border-bottom-width: 1px; -webkit-border-top-left-radius: 95%; -moz-border-radius-topleft: 95%; border-top-left-radius: 95%; background: green;
}
.game li:nth-of-type(4n+1).active { background: #0c0;
}
.game li:nth-of-type(4n+2) { border-left-width: 1px; border-bottom-width: 1px; -webkit-border-top-right-radius: 95%; -moz-border-radius-topright: 95%; border-top-right-radius: 95%; background: blue;
}
.game li:nth-of-type(4n+2).active { background: #00c;
}
.game li:nth-of-type(4n+3) { border-top-width: 1px; border-right-width: 1px; -webkit-border-bottom-left-radius: 95%; -moz-border-radius-bottomleft: 95%; border-bottom-left-radius: 95%; background: yellow;
}
.game li:nth-of-type(4n+3).active { background: #cc3;
}
.game li:nth-of-type(4n+4) { border-left-width: 1px; border-top-width: 1px; -webkit-border-bottom-right-radius: 95%; -moz-border-radius-bottomright: 95%; border-bottom-right-radius: 95%; background: red;
}
.game li:nth-of-type(4n+4).active { background: #c00;
}
.strictmode, a.play { border: 1px solid #ccc; padding: 4px 8px; display: inline-block; cursor: pointer; margin-top: 20px;
}
a.play.active { background: #003f7f; color: #fff;
}
.playerplays, .correct, .correctsteps { display: inline;
}
.playerplays:after, .correct:after, .correctsteps:after { clear: both; content: ''; display: block;
}
.losetag, .wintag { position: absolute; top: 0; left: 0; z-index: 333; font-size: 2rem; width: 100%; background: rgba(0, 0, 0, 0.7); margin-top: 10px; padding: 10%; text-align: center; color: #fff;
}
.strictmode.active { color: #f00;
}
.wintag { height: 100%; margin: 0; padding-top: 35%; overflow: hidden; background: rgba(222, 222, 222, 0.7); color: #003f7f; font-size: 4rem;
}

FCC: Simon Game (WIP) - Script Codes JS Codes

var sndlinkroot = "//s3.amazonaws.com/freecodecamp/simonSound";
var snd1 = new Audio(sndlinkroot + "1.mp3"), snd2 = new Audio(sndlinkroot + "2.mp3"), snd3 = new Audio(sndlinkroot + "3.mp3"), snd4 = new Audio(sndlinkroot + "4.mp3");
var strict = false;
var correct = [], playerplays = [];
var delay = 900;
$(function() { $('.losetag').hide(); $('.wintag').hide();
});
/* Check if current plays are correct */
function checkCorrect() { if (playerplays.toString() === correct.toString()) { // good full string, next // Speed up if (correct.length === 5) { delay = 800; } else if (correct.length === 9) { delay = 700; } else if (correct.length === 20) { // 20 good plays, win! $('.wintag').show().fadeOut(4000); $('.play').addClass("active"); setTimeout(function() { playAll(); }, (delay + 1000)); exit; } $('.playerplays').html(""); playerplays = []; setTimeout(function() { playAll(); addPlay(); }, (delay + 1000)); // Loss } else if ((playerplays.length === correct.length) || (correct[(playerplays.length - 1)]) !== (playerplays[(playerplays.length - 1)])) { $('.losetag').show().fadeOut(2000); setTimeout(function() { playerplays = []; $('.playerplays').html(" "); playAll(); }, (1700)); if (strict) $('.play').addClass("active"); }
}
// On game button press
function clickPlay(id) { $('.playerplays').append(" " + id); makePlay(id); playerplays.push(id);
}
// Responsive button push
function makePlay(id) { window[("snd" + id)].play(); $("#id" + id).addClass('active'); setTimeout(function() { $("#id" + id).removeClass('active'); }, 200);
}
// Replay current correct plays
function playAll() { $('.correct').html(" "); for (var i = 0; i < correct.length; i++) { (function(i) { setTimeout(function() { $('.correct').append(" " + correct[i]); makePlay(correct[i]); }, delay * i); })([i]); }
}
// Add additional play
function addPlay() { var random = Math.floor((Math.random() * 4) + 1); setTimeout(function() { makePlay(random); $('.correct').append(" " + random); correct.push(random); $('.correctsteps').html(correct.length); }, (delay * correct.length));
}
$(".game li").click(function() { if (!($('.play').hasClass('active'))) { clickPlay($(this).index(".game li") + 1); checkCorrect(); }
});
function setup() { $('.correctsteps').html("0"); playerplays = []; correct = []; addPlay(); playAll();
}
// Start/restart button press
$(".play").click(function() { setTimeout(function() { $(".play").removeClass('active'); $(".play").text('Restart'); setup(); }, 400);
});
// Toggles on/off Strict mode
$(".strictmode").click(function() { $(this).toggleClass('active'); if ($(this).text() === 'Disabled') { $('.losetag').html('You lost.'); $(this).html('Enabled'); strict = true; } else { $('.losetag').html('Oops, try again.'); $(this).html('Disabled'); strict = false; }
});
FCC: Simon Game (WIP) - Script Codes
FCC: Simon Game (WIP) - Script Codes
Home Page Home
Developer Jeanine
Username virtual
Uploaded September 12, 2022
Rating 3
Size 4,712 Kb
Views 26,312
Do you need developer help for FCC: Simon Game (WIP)?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Jeanine (virtual) Script Codes
Name
Simple React Template
Expanding Info Boxes
Font-Awesome Icon Card with heading
Table Sorter Data
Bootstrap 4
Flexbox
Parallax Cats
Simple Event Box
3 Piece Slider with featured center
3 Piece Slider
Create amazing video scripts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!