Skip to content

Instantly share code, notes, and snippets.

@amjohnson38

amjohnson38/easy-simon-game.markdown

Created September 3, 2016 14:06
Show Gist options
  • Save amjohnson38/9846e1b4a836ee75832a9787c26dc1c9 to your computer and use it in GitHub Desktop.
Save amjohnson38/9846e1b4a836ee75832a9787c26dc1c9 to your computer and use it in GitHub Desktop.
Download ZIP
Easy Simon Game
Raw
easy-simon-game.markdown

Easy Simon Game

This is an easier version of the classic game Simon where the computer plays a sequence of colors and the player has to repeat the sequence in order to move on to the next round. The player wins the game when they can successfully complete 5 rounds. There are two modes of play: General: if the player misses a color in the sequence, the computer will repeat the last sequence until the player gets it right. Strict: the player has to be perfect in repeating the computer's color sequence. If the player misses any part of the sequence, the game is over.

A Pen by Angela Johnson on CodePen.

License.

Raw
index.html
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Simon Game</title>
</head>
<body>
<div id="resetContainer" class="popupContainer">
<div id="gameStatementBox" class="loserPopUp">
<h3 id="gameStatement"></h3>
</div>
</div>
<div id="gameTitle">SIMON</div>
<div id="centeringFlexBox">
<div class="middleCircle">
<div id="gameOptions">
<div id="count" class="centeredRow">Level</div>
<div class="centeredRow">
<div id="countWindow">&nbsp</div>
</div>
<div id="gameControlButtons" class="centeredRow">
<div id="start" class='gameControlButton'>
<div id="startButtonLabel">Start</div>
<button id="startButton" class="btn"></button>
</div>
<div class="led-box" class='gameControlButton'>
<div id="led" class="led-clear"></div>
</div>
<div id="strict" class='gameControlButton'>
<div id="strictButtonLabel">Strict</div>
<button id="strictButton" class="btn"></button>
</div>
</div>
<div id="powerSwitch" class="centeredRow">
<div id="off">
<span>Off</span>
</div>
<div id="on-off-mark"><span id="mark-toggle"></span></div>
<div id="on">
<span>On</span>
</div>
</div>
</div>
</div>
<div id="simonContainer">
<div class="flexContainerColumns">
<div class="flexContainerRows">
<div id="greenPad" class="green circle greenPadTurnOff"></div>
<div id="redPad" class="red circle redPadTurnOff"></div>
</div>
<div class="flexContainerRows">
<div id="bluePad" class="blue circle bluePadTurnOff"></div>
<div id="yellowPad" class="yellow circle yellowPadTurnOff"></div>
</div>
</div>
</div>
</div>
<footer>
<div class="social text-center center-block">
<ul>
<li><a href="https://www.facebook.com/reggirl38"><i class="fa fa-lg fa-facebook"></i></a></li>
<li><a href="http://twitter.com/reggirl32"><i class="fa fa-lg fa-twitter"></i></a></li>
<li><a href="https://github.com/amjohnson38"><i class="fa fa-lg fa-github"></i></a></li>
<li><a href="https://www.linkedin.com/in/angelamjohnson95"><i class="fa fa-lg fa-linkedin"></i></a></li>
<li>
<a href="https://www.freecodecamp.com/amjohnson38" target="_blank" title="See my Free Code Camp profile!">
<i class="fa fa-fire fa-lg"></i></li>
</a>
</ul>
</div>
<p>Created and Coded by Angela Johnson 2016</p>
</footer>
</body>
</html>
Raw
script.js
var gameSequence = [];
var playerResponse;
var playerResponsesCounter = 0;
var strictMode = false;
var levelCount = 0;
var roundsToWin = 5;
var powerState = "off";
var gameState = "notPlaying";
var turnState = "computer";
var colors = ["greenPad", "redPad", "bluePad", "yellowPad"];
var lightUpDuration;
var lightUpStep = 50;
var lightGap;
var lightGapStep = 2;
var yellowPadSound;
var greenPadSound;
var redPadSound;
var bluePadSound;
var setTimeOutLightUp;
var setTimeOutDarken;
var timeOutArray = [];
var wrongAnswerBuzzer;
var winnerCheer;
var losingMessage = "You Lose! Press Start To Play Again.";
var winningMessage = "You Won! Press Start To Play Again";
var boolFirstPlay = true;
$(function() {
loadSounds(); //
W = window.innerWidth;
H = window.innerHeight;
$("#powerSwitch").on("click", function() {
if (powerState === "off") {
$("#mark-toggle").animate({
left: "26px"
}, 50);
$("#countWindow").html("--");
$("#led").addClass("led-green");
$("#led").removeClass("led-clear");
powerState = "on";
} else if (powerState === "on") {
$("#mark-toggle").animate({
left: "0px"
}, 50);
powerState = "off";
$("#countWindow").html("&nbsp");
$("#led").removeClass("led-green");
$("#led").removeClass("led-red");
$("#led").addClass("led-clear");
if ($("#resetContainer").hasClass('slideDown')) {
$("#resetContainer").removeClass('slideDown');
$("#resetContainer").addClass('slideUp');
}
init();
//clears the setTimeout method that were set for the lightUpPad function
for (var i = 0; i < timeOutArray.length; i++) {
clearTimeout(timeOutArray[i]);
}
//clears the setTimeout method for the darkenGamePad function
for (var i = 0; i < colors.length; i++) {
clearTimeout(darkenGamePad(colors[i]));
}
}
});
$(".circle").mousedown(function(event) {
if ((powerState === "on") &&
(turnState === "player")) {
lightUpPad(event.currentTarget.id);
}
});
$(".circle").mouseup(function(event) {
if ((powerState === "on") &&
(turnState === "player")) {
playerPlays(event.currentTarget.id);
darkenGamePad(event.currentTarget.id);
}
});
$("#startButton").on("click", function() {
if (powerState === "on") {
$(".circle").removeClass("winningAnimation");
$(".middleCircle").removeClass("winningAnimation");
$("#simonContainer").removeClass("losingAnimation");
if ($("#resetContainer").hasClass('slideDown')) {
$("#resetContainer").removeClass('slideDown');
$("#resetContainer").addClass('slideUp');
}
gameState = "playing";
computerPlays(true);
}
});
$("#strictButton").on("click", function() {
if ((powerState === "on") &&
((turnState !== "computer") && (turnState !== "player"))) {
strictMode = !strictMode;
if (strictMode === true) {
$("#led").addClass("led-red");
} else {
$("#led").removeClass("led-red");
$("#led").addClass("led-clear");
}
}
});
});
//chooses a random color out of the 4 colors
function chooseRandomColor() {
var randomNumber = Math.floor(Math.random() * 4);
/*console.log(randomNumber);*/
var randomColor = colors[randomNumber];
/*console.log(randomColor);*/
return randomColor;
}
//initializes the game upon starting
function init() {
levelCount = 1;
console.log(levelCount);
/*if (powerState === "on") {
$("#countWindow").html(levelCount);
}*/
gameState = "notPlaying";
turnState = undefined; // allows the player to turn on the strict button prior to the game starting.
darkenGamePad();
gameSequence = [];
playerResponsesCounter = 0;
lightUpDuration = 1400;
lightGap = 75;
}
function computerPlays(addNew) {
if (levelCount > roundsToWin) {
gameState = "playerWon";
playerWins();
return;
}
if (gameState === "playing") {
/*console.log("*** starting Round ***");*/
turnState = "computer";
$("#countWindow").html(levelCount);
//adds a new color to the sequence
if (addNew === true) {
color = chooseRandomColor(); //the random color that has been choosen
gameSequence.push(color); //the color is pushed into the game sequence array
console.log(gameSequence);
}
if (addNew === false) {
$("#simonContainer").removeClass("losingAnimation");
}
lightUpDuration = lightUpDuration - lightUpStep; //the length of time the pad stays illuminated
lightGap = lightGap - lightGapStep; //the time between a light turning off and the next light turning on
timeOutArray = []; //emptying of the timeOutArray
//the gameSequence array is looped through and the current color to be animated is selected.
for (var i = 0; i < gameSequence.length; i++) {
var currentColor = gameSequence[i];
var setTimeOutLightUp = setTimeout(lightUpPad.bind(null, gameSequence[i]), lightUpDuration * i);
var setTimeOutDarken = setTimeout(darkenGamePad.bind(null, gameSequence[i]),
lightUpDuration * (i + 1) - lightGap);
timeOutArray.push(setTimeOutLightUp, setTimeOutDarken);
}
setTimeout(function() {
turnState = "player";
},
gameSequence.length * lightUpDuration);
}
}
//darkens the game pad after the lightUpPad function has done it's job
function darkenGamePad(color) {
//console.log("darkenGamePad " + color);
$("#" + color).removeClass(color + "TurnOn");
$("#" + color).addClass(color + "TurnOff");
}
function playerPlays(playerResponse) {
turnState = "player";
if (gameSequence[playerResponsesCounter] !== playerResponse) {
loseRound();
} else {
playerResponsesCounter++;
if (gameSequence.length === playerResponsesCounter) {
setTimeout(function() {
computerPlays(true);
}, 750); //keeps the computer from immediately doing it's sequence before the player has fully responded
playerResponsesCounter = 0;
levelCount++;
}
}
}
function lightUpPad(color) {
/*console.log("lightUpPad " + color);*/
$("#" + color).removeClass(color + "TurnOff");
$("#" + color).addClass(color + "TurnOn");
if (color === "yellowPad") {
yellowPadSound = context.createBufferSource(); //creates a sound source
yellowPadSound.buffer = bufferList[3]; //tells the source which sound to play
yellowPadSound.connect(context.destination); //connects the sound to the speakers
yellowPadSound.start(0); //plays the source innediately. (time)=equals the amount of time before the source is played
} else if (color === "greenPad") {
greenPadSound = context.createBufferSource();
greenPadSound.buffer = bufferList[0];
greenPadSound.connect(context.destination);
greenPadSound.start(0);
} else if (color === "redPad") {
redPadSound = context.createBufferSource();
redPadSound.buffer = bufferList[1];
redPadSound.connect(context.destination);
redPadSound.start(0);
} else if (color === "bluePad") {
bluePadSound = context.createBufferSource();
bluePadSound.buffer = bufferList[2];
bluePadSound.connect(context.destination);
bluePadSound.start(0);
}
}
//Using a bufferLoader class through web audio api to create, load audio buffers
var context;
var bufferLoader;
var bufferList;
function loadSounds() {
window.AudioContext = window.AudioContext || window.webkitAudioContext;
//AudioContext is used for managing and playing all sounds.
context = new AudioContext();
bufferLoader = new BufferLoader(
context, ["http://res.cloudinary.com/angiemjohnson/video/upload/v1471888207/simonSound1_ajce3m.mp3",
"http://res.cloudinary.com/angiemjohnson/video/upload/v1471888220/simonSound2_khpatu.mp3",
"http://res.cloudinary.com/angiemjohnson/video/upload/v1471888236/simonSound3_gmfhys.mp3",
"http://res.cloudinary.com/angiemjohnson/video/upload/v1471888253/simonSound4_wqvp1p.mp3",
"http://res.cloudinary.com/angiemjohnson/video/upload/v1472237645/164089__hypocore__buzzer2_gkt1l5.wav",
"http://res.cloudinary.com/angiemjohnson/video/upload/v1472241093/333404__jayfrosting__cheer-2_wq0edx.wav"
],
finishedLoading
);
bufferLoader.load();
}
function finishedLoading(bList) {
bufferList = bList;
init();
}
function loseRound() {
if (strictMode === true) {
loserNotification();
$("#countWindow").html("--");
$("#resetContainer").removeClass('slideUp');
$("#gameStatement").text(losingMessage);
$("#resetContainer").addClass('slideDown');
$("#simonContainer").addClass("losingAnimation");
init();
} else {
$("#simonContainer").addClass("losingAnimation");
loserNotification();
playerResponsesCounter = 0;
setTimeout(function() {
computerPlays(false);
}, 3250);
}
}
function loserNotification() {
wrongAnswerBuzzer = context.createBufferSource();
wrongAnswerBuzzer.buffer = bufferList[4];
wrongAnswerBuzzer.connect(context.destination);
wrongAnswerBuzzer.start(0);
}
function playerWins() {
$("#resetContainer").removeClass('slideUp');
$("#gameStatement").text(winningMessage);
$("#resetContainer").addClass('slideDown');
winnerCheer = context.createBufferSource();
winnerCheer.buffer = bufferList[5];
winnerCheer.connect(context.destination);
winnerCheer.start(0);
$(".circle").addClass("winningAnimation");
$(".middleCircle").addClass("winningAnimation");
init();
}
Raw
scripts
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="http://res.cloudinary.com/angiemjohnson/raw/upload/v1472778458/buffer-loader_bsqit1.js"></script>
Raw
style.css
* {
margin: 0;
padding: 0;
}
body {
background-color: gray;
background-image: url("https://www.transparenttextures.com/patterns/fancy-deboss.png");
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.flexContainerColumns {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.flexContainerRows {
display: flex;
flex-direction: row;
}
.circle {
height: 35vmin;
width: 35vmin;
border: solid black;
box-shadow: 3px 3px 146px -8px rgba(0, 0, 0, 0.75);
cursor: pointer;
max-width: 360px;
max-height: 360px;
min-width: 150px;
min-height: 150px;
}
.red {
background: #B90000;
border-top-right-radius: 100%;
border-bottom-left-radius: 25%;
border-width: 1.5em 1.5em .75em .75em;
}
.green {
background: #008000;
border-top-left-radius: 100%;
border-bottom-right-radius: 25%;
border-width: 1.5em .75em .75em 1.5em;
}
.blue {
background: blue;
border-bottom-left-radius: 100%;
border-top-right-radius: 25%;
border-width: .75em .75em 1.5em 1.5em;
}
.yellow {
background: #F3B521;
border-bottom-right-radius: 100%;
border-top-left-radius: 25%;
border-width: .75em 1.5em 1.5em .75em;
}
.redPadTurnOn {
animation: redkeyframe 0.1s;
animation-fill-mode: forwards;
}
.greenPadTurnOn {
animation: greenkeyframe 0.1s;
animation-fill-mode: forwards;
}
.bluePadTurnOn {
animation: bluekeyframe .1s;
animation-fill-mode: forwards;
}
.yellowPadTurnOn {
animation: yellowkeyframe 0.1s;
animation-fill-mode: forwards;
}
@keyframes redkeyframe {
0% {
background: #B90000;
border-width: 1.5em 1.5em .75em .75em;
}
100% {
background: #FF5050;
border-width: 1em 1em .5em .5em;
}
}
@keyframes greenkeyframe {
0% {
background: #008000;
border-width: 1.5em .75em .75em 1.5em;
}
100% {
background: #00FF00;
border-width: 1em 0.5em 0.5em 1em;
}
}
@keyframes bluekeyframe {
0% {
background: blue;
border-width: .75em .75em 1.5em 1.5em;
}
100% {
background: #1E90FF;
border-width: 0.5em 0.5em 1em 1em;
}
}
@keyframes yellowkeyframe {
0% {
background: #F3B521;
border-width: .75em 1.5em 1.5em .75em;
}
100% {
background: #FFFF00;
border-width: 0.5em 1em 1em .5em;
}
}
.redPadTurnOff {
animation: redturnoffkeyframe 0.005s;
animation-fill-mode: forwards;
}
.greenPadTurnOff {
animation: greenturnoffkeyframe 0.005s;
animation-fill-mode: forwards;
}
.bluePadTurnOff {
animation: blueturnoffkeyframe 0.005s;
animation-fill-mode: forwards;
}
.yellowPadTurnOff {
animation: yellowturnoffkeyframe 0.005s;
animation-fill-mode: forwards;
}
@keyframes redturnoffkeyframe {
0% {
background: #FF5050;
border-width: 1em 1em 0.5em 0.5em;
}
100% {
background: #B90000;
border-width: 1.5em 1.5em .75em .75em;
}
}
@keyframes greenturnoffkeyframe {
0% {
background: #00FF00;
border-width: 1em 0.5em 0.5em 1em;
}
100% {
background: #008000;
border-width: 1.5em .75em .75em 1.5em;
}
}
@keyframes blueturnoffkeyframe {
0% {
background: #1E90FF;
border-width: 0.5em 0.5em 1em 1em;
}
100% {
background: blue;
border-width: .75em .75em 1.5em 1.5em;
}
}
@keyframes yellowturnoffkeyframe {
0% {
background: #FFFF00;
border-width: 0.5em 1em 1em 0.5em;
}
100% {
background: #F3B521;
border-width: .75em 1.5em 1.5em .75em;
}
}
#centeringFlexBox {
display: flex;
justify-content: center;
align-items: center;
}
.middleCircle {
display: flex;
align-content: center;
justify-content: center;
position: absolute;
z-index: 5;
background: #a9aaab;
border-radius: 50%;
height: 40vmin;
width: 40vmin;
border: solid .5vh black;
max-width: 215px;
max-height: 215px;
min-height: 170px;
min-width: 170px;
}
#simonContainer {
position: relative;
max-width: 580px;
}
#gameTitle {
text-align: center;
margin-bottom: 60px;
padding-bottom: 20px;
color: black;
font-size: 80px;
font-family: 'Orbitron', sans-serif;
font-weight: 400px;
animation-name: rollIn;
-webkit-animation-duration: 2s;
animation-duration: 2s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
@keyframes rollIn {
from {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
}
to {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
#gameOptions {
display: flex;
flex-direction: column;
justify-content: center;
}
#count {
font-weight: bold;
font-size: 2em;
}
#countWindow {
background: black;
max-width: 50px;
max-height: 50px;
width: 33%;
height: 33%;
border: solid 3px white;
color: darkorange;
text-align: center;
font-size: 20px;
}
@media only screen and (max-width: 500px) {
#count {
font-size: 1em;
}
}
.centeredRow {
display: flex;
flex-direction: row;
justify-content: center;
margin: .5em 0 0 0;
}
.gameControlButton {
padding: 0 .75em 0 .75em;
}
.centeredRow {
display: flex;
flex-direction: row;
justify-content: center;
align-content: center;
margin: .25em 0 0 0;
}
#startButton {
background: red;
background-image: -webkit-linear-gradient(top, red, darkred);
background-image: -moz-linear-gradient(top, red, darkred);
background-image: -ms-linear-gradient(top, red, darkred);
background-image: -o-linear-gradient(top, red, darkred);
background-image: linear-gradient(to bottom, red, darkred);
-webkit-border-radius: 28;
-moz-border-radius: 28;
border-radius: 50px;
font-family: Arial;
color: #ffffff;
font-size: 12px;
text-decoration: none;
width: 27px;
height: 27px;
}
#strictButton {
background: yellow;
background-image: -webkit-linear-gradient(top, yellow, greenyellow);
background-image: -moz-linear-gradient(top, yellow, greenyellow);
background-image: -ms-linear-gradient(top, yellow, greenyellow);
background-image: -o-linear-gradient(top, yellow, greenyellow);
background-image: linear-gradient(to bottom, yellow, greenyellow);
-webkit-border-radius: 28;
-moz-border-radius: 28;
border-radius: 50px;
font-family: Arial;
color: #ffffff;
font-size: 12px;
text-decoration: none;
width: 27px;
height: 27px;
}
#startButton:hover {
background: darkred;
background-image: -webkit-linear-gradient(top, red, darkred);
background-image: -moz-linear-gradient(top, red, darkred);
background-image: -ms-linear-gradient(top, red, darkred);
background-image: -o-linear-gradient(top, red, darkred);
background-image: linear-gradient(to bottom, red, darkred);
text-decoration: none;
}
#strictButton:hover {
background: red;
background-image: -webkit-linear-gradient(top, yellow, greenyellow);
background-image: -moz-linear-gradient(top, yellow, greenyellow);
background-image: -ms-linear-gradient(top, yellow, greenyellow);
background-image: -o-linear-gradient(top, yellow, greenyellow);
background-image: linear-gradient(to bottom, yellow, greenyellow);
text-decoration: none;
}
.led-box {
height: 20px;
}
#led {
margin: 0 auto;
width: 12px;
height: 12px;
border-radius: 50%;
box-shadow: rgba(0, 0, 0, 0.4) 0 -1px 7px 1px, inset #D3D3D3 0 -1px 9px, rgba(169, 169, 169, 0.5) 0 2px 12px;
}
.led-clear {
background-color: #C0C0C0;
}
.led-green {
background-color: lawngreen;
}
.led-red {
margin: 0 auto;
width: 12px;
height: 12px;
background-color: #600;
border-radius: 50%;
box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #441313 0 -1px 9px, rgba(255, 0, 0, 0.5) 0 2px 12px;
-webkit-animation: blinkRed 0.5s infinite;
-moz-animation: blinkRed 0.5s infinite;
-ms-animation: blinkRed 0.5s infinite;
-o-animation: blinkRed 0.5s infinite;
animation: blinkRed 0.5s infinite;
}
@-webkit-keyframes blinkRed {
from {
background-color: #F00;
}
50% {
background-color: #A00;
box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #441313 0 -1px 9px, rgba(255, 0, 0, 0.5) 0 2px 0;
}
to {
background-color: #F00;
}
}
@-moz-keyframes blinkRed {
from {
background-color: #F00;
}
50% {
background-color: #A00;
box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #441313 0 -1px 9px, rgba(255, 0, 0, 0.5) 0 2px 0;
}
to {
background-color: #F00;
}
}
@-ms-keyframes blinkRed {
from {
background-color: #F00;
}
50% {
background-color: #A00;
box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #441313 0 -1px 9px, rgba(255, 0, 0, 0.5) 0 2px 0;
}
to {
background-color: #F00;
}
}
@-o-keyframes blinkRed {
from {
background-color: #F00;
}
50% {
background-color: #A00;
box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #441313 0 -1px 9px, rgba(255, 0, 0, 0.5) 0 2px 0;
}
to {
background-color: #F00;
}
}
@keyframes blinkRed {
from {
background-color: #F00;
}
50% {
background-color: #A00;
box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #441313 0 -1px 9px, rgba(255, 0, 0, 0.5) 0 2px 0;
}
to {
background-color: #F00;
}
}
#powerSwitch {}
#on-off {
float: left;
margin: 10 5px;
position: relative;
font-size: .75em;
margin: 25px 30px;
line-height: 20px;
}
#on-off-mark {
float: left;
width: 50px;
height: 20px;
background-color: #222222;
margin: 0 6px;
border-radius: 3px;
}
#on,
#off {
float: left;
}
#mark-toggle {
display: block;
position: relative;
width: 20px;
height: 16px;
margin: 2px;
background-color: #3193DE;
}
footer {
padding-top: 100px;
font-size: 20px;
font-weight: 400px;
text-align: center;
color: black;
font-family: 'Playfair Display', serif;
}
.social {
margin: 0;
padding: 0;
}
.social ul {
margin: 0;
padding: 5px;
}
.social ul li {
margin: 5px;
list-style: none outside none;
display: inline-block;
}
.social i {
width: 40px;
height: 40px;
color: #FFF;
background-color: #909AA0;
font-size: 22px;
text-align: center;
padding-top: 12px;
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
-o-border-radius: 50%;
transition: all ease 0.3s;
-moz-transition: all ease 0.3s;
-webkit-transition: all ease 0.3s;
-o-transition: all ease 0.3s;
-ms-transition: all ease 0.3s;
}
.social i:hover {
color: #FFF;
text-decoration: none;
transition: all ease 0.3s;
-moz-transition: all ease 0.3s;
-webkit-transition: all ease 0.3s;
-o-transition: all ease 0.3s;
-ms-transition: all ease 0.3s;
}
.social .fa-facebook:hover {
/* round facebook icon*/
background: #4060A5;
}
.social .fa-twitter:hover {
/* round twitter icon*/
background: #00ABE3;
}
.social .fa-linkedin:hover {
/* round linkedin icon*/
background: #0094BC;
}
.social .fa-github:hover {
/* round github icon*/
background: #343434;
}
.social .fa-fire:hover {
/* round github icon*/
background: #008000;
}
.popupContainer {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
margin: 0;
position: fixed;
overflow: hidden;
pointer-events: none;
z-index: 10;
width: 400px;
height: 100%;
top: -100%;
}
.loserPopUp {
background: rgba(255, 255, 255, 0.7);
padding: 1em 5em;
-webkit-border-radius: 5px;
-moz-border-radius-: 5px;
border-radius: 5px;
z-index: 10;
width: 300px;
}
#gameStatementBox {
flex-direction: column;
display: flex;
}
h3 {
color: black;
font-weight: bold;
font-size: 25px;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
}
.slideDown {
animation: slideDown 4s;
animation-fill-mode: forwards;
}
.slideUp {
animation: slideUp 3s;
animation-fill-mode: forwards;
}
@keyframes slideDown {
from {
top: -100%;
}
to {
top: 0%;
}
}
@keyframes slideUp {
from {
top: 0%;
}
to {
top: -100%;
}
}
.winningAnimation {
animation: winningAnimation 1s linear;
animation-iteration-count: 2;
}
@keyframes winningAnimation {
100% {
transform: rotate(360deg);
}
}
.losingAnimation {
animation: losingAnimation 1.5s linear;
animation-iteration-count: 2;
}
@keyframes losingAnimation {
0% {
transform: rotateY(0deg)
}
25% {
transform: rotateY(60deg)
}
50% {
transform: rotateY(0deg)
}
75% {
transform: rotateY(-60deg)
}
100% {
transform: rotateY(0deg)
}
}
Raw
styles
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-social/4.12.0/bootstrap-social.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/css-toggle-switch/latest/toggle-switch-px.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Orbitron" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment