Simon

Developer
Kevin
Size
5,318 Kb
Views
24,288
  1. Simon Previews
  2. Simon HTML Codes
  3. Simon CSS Codes
  4. Simon JS Codes

How do I make an simon?

In progress. What is a simon? How do you make a simon? This script and codes were developed by Kevin on 27 August 2022, Saturday.

Simon Previews
IQ Test

Simon - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Simon</title> <meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Damion|Russo+One" rel="stylesheet"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="gameContainer"> <div class="center"> <div id="gameBoard"> <div class="color" id="green" value="0"></div> <div class="color" id="red" value="1"></div> <div class="color" id="yellow" value="2"></div> <div class="color" id="blue" value="3"></div> <div id="centerCircle"> <div id="centerContent"> <div class="name-container"> <h1 class="title-text">SIMON</h1> </div> <div class="button-group"> <div> <button id="start" class="push-button"></button> <p>Start</p> </div> <div> <label class="strict-switch"> <input id="strict" type="checkbox"> <div class="strict-slider"></div> </label> <p>Strict</p> </div> <div> <button id="reset" class="push-button"></button> <p>Reset</p> </div> </div> <div id="count">00</div> </div> </div> </div> </div>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Simon - Script Codes CSS Codes

* { box-sizing: border-box; margin: 0;
}
body { background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/542135/stardust.png");
}
.center { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);
}
#gameContainer { height: 100vh; width: 100vw; overflow: visible;
}
#gameBoard { position: relative; height: 500px; width: 500px; padding: 10px; background-color: #1e1e28; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; border-radius: 50%;
}
@media only screen and (max-width: 500px) { #gameBoard { height: 350px; width: 350px; }
}
.color { opacity: .7; height: 45%; width: 45%; margin: 2.5%;
}
#green { background-color: #00ffaa; border-radius: 100% 0 0 0;
}
#red { background-color: #e56797; border-radius: 0 100% 0 0;
}
#yellow { background-color: #ffd139; border-radius: 0 0 0 100%;
}
#blue { background-color: #1a9aff; border-radius: 0 0 100% 0;
}
#centerCircle { width: 50%; height: 50%; background-color: #1e1e28; border: solid 20px #1e1e28; position: absolute; border-radius: 50%; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);
}
.title-text { color: #c8c8c8; font-family: 'Russo One', cursive; font-size: 40px; padding: 10px 0 0 0; text-shadow: 0px 0px 10px #1a9aff, 0px 0px 100px white;
}
@media only screen and (max-width: 500px) { .title-text { font-size: 30px; padding: 0; }
}
#centerContent { position: relative;
}
.button-group { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-pack: distribute; justify-content: space-around; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; height: 70px; padding: 0 0 15px 0;
}
@media only screen and (max-width: 500px) { .button-group { height: 50px; padding: 0; }
}
.button-group div { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center;
}
.push-button { height: 25px; width: 25px; border-radius: 50%;
}
@media only screen and (max-width: 500px) { .push-button { height: 20px; width: 20px; }
}
.strict-switch { position: relative; display: inline-block; width: 51px; height: 24px; background-color: yellow;
}
.strict-slider { position: absolute; color: white; display: inline; top: 0; left: 0; right: 0; bottom: 0; background-color: #1e1e28; font-size: 14px; font-weight: bold;
}
.strict-slider:before { position: absolute; content: ""; height: 20px; width: 20px; left: 3px; top: 2px; background-color: white; box-shadow: 0 0 10px black;
}
#strict { display: none;
}
input:checked + .strict-slider:before { -webkit-transform: translateX(25px); transform: translateX(25px);
}
#reset { background-color: #e56797;
}
#start { background-color: #00ffaa;
}
.name-container { background-color: #1e1e28; margin: -1px 0 0 0; padding: 10px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100%; border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}
@media only screen and (max-width: 500px) { .name-container { padding: 5px; }
}
#count { font-size: 30px; background: #003200; box-shadow: inset 0 0 10px black; padding: 0 10px 0 10px; border-radius: 5px; color: #ff399a; text-shadow: 0 0 6px #ff399a; width: 50px; margin: auto;
}
p { font-family: 'Russo One'; color: #c8c8c8;
}

Simon - Script Codes JS Codes

$(document).ready(function() { var yellowSound = new Audio('https://s3-us-west-2.amazonaws.com/s.cdpn.io/542135/simonYellow.wav'); var greenSound = new Audio('https://s3-us-west-2.amazonaws.com/s.cdpn.io/542135/simonGreen.wav'); var blueSound = new Audio('https://s3-us-west-2.amazonaws.com/s.cdpn.io/542135/simonBlue.wav'); var redSound = new Audio('https://s3-us-west-2.amazonaws.com/s.cdpn.io/542135/simonRed.wav'); var failSound = new Audio('https://s3-us-west-2.amazonaws.com/s.cdpn.io/542135/simonFail.wav'); var colors = ['yellow', 'green', 'blue', 'red']; var strictMode = false; var score, playerTurn, order, turnCount, delay, compSpeed, lastTurn, winAnimationCounter; function initialize() { score = 0; playerTurn = false; order = []; turnCount = 0; compSpeed = 700; lastTurn = false; winAnimationCounter = 1; changeScore(); } /**/ initialize(); function colorOn(id) { eval(id + 'Sound').play(); $('#' + id).css({ 'opacity': '1', 'box-shadow': '0 0 15px ' + $('#' + id).css('background-color') }); } function changeScore() { var displayScore = score; if (score < 10) { displayScore = "0" + score; } $('#count').html(displayScore); } function colorOff(id) { eval(id + 'Sound').pause(); eval(id + 'Sound').currentTime = 0; $('#' + id).css({ 'opacity': '.7', 'box-shadow': '0 0 0' }); } function setComp(){ playerTurn = false; lastTurn = false; turnCount = 0; delay = setInterval(compTurn,compSpeed); } function failure(id) { eval(id + 'Sound').pause(); eval(id + 'Sound').currentTime = 0; failSound.play(); if(strictMode){ initialize(); changeScore(); } else{ setTimeout(setComp, 4000); } } $('.color').on('mousedown touchstart', function() { if (playerTurn) { colorOn($(this).attr('id')); if ($(this).attr('id') !== order[turnCount]) { console.log('fail'); colorOff($(this).attr('id')); failure($(this).attr('id')); } else if (turnCount >= score) { lastTurn = true; return; } turnCount++ } }); $('.color').on('mouseup mouseleave touchend', function() { if (playerTurn) { colorOff($(this).attr('id')); if (lastTurn) { playerTurn = false; lastTurn = false; score = turnCount + 1; if(score == 20){ return youWin(); } changeScore(); turnCount = 0; delay = setInterval(compTurn, compSpeed); } } }); function winAnimation(){ colorOff(colors[(winAnimationCounter-1)%4]); colorOn(colors[winAnimationCounter%4]); winAnimationCounter++; if(winAnimationCounter <27){ setTimeout(winAnimation, 100); } else{ colorOff(colors[(winAnimationCounter-1)%4]); } } function youWin(){ clearInterval(delay); $('#count').html('!!!'); winAnimation(); } $('#start').on('click', function() { initialize(); clearInterval(delay); for (var x = 0; x < 20; x++) { order.push(colors[Math.floor(Math.random() * 4)]); } delay = setInterval(compTurn, compSpeed); }); $('#reset').on('click', function() { initialize(); clearInterval(delay); for (var x = 0; x < 20; x++) { order.push(colors[Math.floor(Math.random() * 4)]); } delay = setInterval(compTurn, compSpeed); }); function compOff() { colorOff(order[turnCount - 1]); if (turnCount > score) { turnCount = 0; playerTurn = true; clearInterval(delay); } } function compTurn() { console.log(turnCount); if (turnCount <= score) { colorOn(order[turnCount]); setTimeout(compOff, compSpeed / 2); } turnCount++; } $('#strict').change(function(){ if(this.checked){ strictMode = true; } else{ strictMode = false; } });
});
Simon - Script Codes
Simon - Script Codes
Home Page Home
Developer Kevin
Username KevinBruland
Uploaded August 27, 2022
Rating 3
Size 5,318 Kb
Views 24,288
Do you need developer help for Simon?

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!

Kevin (KevinBruland) Script Codes
Name
Markdown preview
Local Weather
Canvas Gears
Memory
Canvas Snow
Canvas Mouse Position Radial Gradient
Canvas Spiral Loader
Experimenting1
Pomodoro Clock
Pixel Painter Current
Create amazing captions 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!