Simon

Developer
Sam Koshy
Size
4,744 Kb
Views
16,192
  1. Simon Previews
  2. Simon HTML Codes
  3. Simon CSS Codes
  4. Simon JS Codes

How do I make an simon?

Fulfill the below user stories. User Story: I am presented with a random series of button presses.User Story: Each time I input a series of button presses correctly, I see the same series of button presses but with an additional step.. What is a simon? How do you make a simon? This script and codes were developed by Sam Koshy on 06 November 2022, Sunday.

Simon Previews
IQ Test

Simon - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>simon</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <link href="https://fonts.googleapis.com/css?family=Orbitron|Alfa+Slab+One|Oswald" rel="stylesheet">
<div class="outerContainer"> <div class="green"></div> <div class="red"></div> <div class="yellow"></div> <div class="blue"></div> <div class=greyInner> <h1>Simon</h1> <div class="counterDisplay"><span class="counter">--</span><span class="startButton"></span><span class="strictButton"></span></div> <h6>&nbsp&nbsp&nbspCOUNT &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp START &nbsp&nbsp STRICT</h6> </div> <div class="powerWell"><span class="powerButton"></span></div> <div class="offOn">OFF&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbspON</div>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Simon - Script Codes CSS Codes

body{ background:rgb(250,250,230);
}
.outerContainer { width: 550px; height: 550px; background: black; position: absolute; text-align: center; left: 50%; top: 50%; //background-color:rgb(5,5,5); margin: -275px 0 0 -275px; border-radius: 50%; border: 2px solid black;
}
.green { margin-left: 18px; margin-top: 15px; width: 230px; height: 230px; background: #00AD00;//green; border-radius: 100% 0% 0 0%; padding-left: 20px; padding-bottom: 20px; box-shadow: 0 0 25px rgba(0, 0, 0, 0.9), inset 0px 0px 20px rgba(0, 0, 0, 0.9); cursor:pointer;
}
.red { margin-left: 285px; margin-top: -250px; width: 250px; height: 250px; background: #A30000; border-radius: 0% 100% 0% 0; box-shadow: 0 0 25px rgba(0, 0, 0, 0.9), inset 0px 0px 20px rgba(0, 0, 0, 0.9); cursor:pointer;
}
.greyInner { margin-top: -380px; margin-left: 155px; width: 200px; height: 200px; background: #5E5D57; border-radius: 50%; border: 17px solid black; box-shadow: 0 0 30px rgb(0, 0, 0), inset 0 0 25px #99978E;
}
.greyInner h1 { margin-left: 8px; font-size: 300%; font-family: 'Alfa Slab One', cursive;
}
.counterDisplay { margin-left: 15px; margin-top: -35px; line-height: 30px; width: 60px; height: 40px; background: #4F1717; border: 3px solid rgb(30, 30, 30); border-radius: 10%; box-shadow: inset 0 0 10px rgb(30, 30, 30);
}
.counter { display: inline-block; margin-top: 8px; font-family: 'Orbitron', sans-serif; color: #800002;//#D93616; font-size: 180%;
}
.startButton { display: inline-block; position: relative; margin-left: 76px; top: -22px; width: 30px; height: 30px; margin-top: -150px; border-radius: 50%; border: 3px solid rgb(30, 30, 30); background: #800002;//#A3260D; box-shadow: inset 0 0 0.3em rgb(30,30,30); cursor:pointer;
}
.strictButton { display: inline-block; position: relative; margin-left: 122px; top: -52px; width: 30px; height: 30px; margin-top: -150px; border-radius: 50%; border: 3px solid rgb(30, 30, 30); background: #BABA20; //yellow; box-shadow: inset 0 0 0.3em black; cursor:pointer;
}
.greyInner h6 { margin-top: -1px; font-family: 'Oswald', sans-serif;
}
.offOn { //display:inline-block; margin-top: -80px; margin-left: -3px; font-family: 'Oswald', sans-serif; font-size: 80%;
}
.powerWell { display:inline-block; position:relative; top: -53px; width: 60px; height: 25px; background: rgb(30, 30, 30); box-shadow: inset 0 0 15px black; cursor:pointer;
}
.powerButton { display: inline-block; margin-left: -30px; //29px; width: 23px; height: 19px; background: #207ABA; border: 3px solid rgb(30, 30, 30);
}
.yellow { margin-left: 18px; margin-top: 20px; width: 230px; height: 230px; background: #AD9900;//orange; border-radius: 0% 0 0% 100%; padding-left: 20px; padding-bottom: 20px; box-shadow: 0 0 25px rgba(0, 0, 0, 0.9), inset 0px 0px 20px rgba(0, 0, 0, 0.9); cursor:pointer;
}
.blue { margin-left: 285px; margin-top: -250px; width: 230px; height: 230px; background: #0000A1; border-radius: 0 0% 100% 0%; padding-left: 20px; padding-bottom: 20px; box-shadow: 0 0 25px rgba(0, 0, 0, 0.9), inset 0px 0px 20px rgba(0, 0, 0, 0.9); cursor:pointer;
}

Simon - Script Codes JS Codes

$(document).ready(function() {
var snd1 = new Audio("https://s3.amazonaws.com/freecodecamp/simonSound1.mp3");
var snd2 = new Audio("https://s3.amazonaws.com/freecodecamp/simonSound2.mp3");
var snd3 = new Audio("https://s3.amazonaws.com/freecodecamp/simonSound3.mp3");
var snd4 = new Audio("https://s3.amazonaws.com/freecodecamp/simonSound4.mp3");
var errSnd = new Audio("https://s3-us-west-1.amazonaws.com/audiofilesfcc/Trim_20170703_1713_001.wav");
var powerOff=true;
$("*").css({ "pointer-events": "none" });
$(".powerWell").css({ "pointer-events": "auto" });
var tileNames=["red","blue","yellow","green"];
var simonSequence=[],compTurn=true,userSequence=[],score=0,timeLimitSet=null,strictOn=false;
//.off() removes the event handlers so the click events are only triggered once $(".powerWell").off().on( "click", function() { if(powerOff){ powerOff=false; $('.powerButton').css('margin-left', '29px'); $("*").css({ "pointer-events": "auto" }); }else{ powerOff=true; simonSequence=[]; userSequence=[]; compTurn=true; clearTimeout(timeLimitSet); timeLimitSet=null; strictOn=false; score=0; $('.powerButton').css('margin-left', '-30px'); $('.counter').css('color', '#800002'); $('.counter').text("--"); $('.startButton').css('background', '#800002'); $('.strictButton').css('background', '#BABA20'); $("*").css({ "pointer-events": "none" }); $(".powerWell").css({ "pointer-events": "auto" }); } }); $(".startButton").off().on( "click", function() { if(powerOff===false && compTurn===true){ $('.startButton').css('background', '#D93616'); $('.counter').css('color', '#D93616'); if (score!=-1 && simonSequence.length<4){ simonSequence.push(Math.floor(Math.random() * 4)+1); $('.counter').text(simonSequence.length); }else if(score!=-1 && simonSequence.length===4){ simonSequence=[]; userSequence=[]; clearTimeout(timeLimitSet); timeLimitSet=null; strictOn=false; setTimeout(function() { $('.counter').text('FIN'); lightSeq(1); }, 400); setTimeout(function() { lightSeq(2); }, 800); setTimeout(function() { lightSeq(3); }, 1200); setTimeout(function() { lightSeq(4); }, 1600); setTimeout(function() { lightSeq(4); }, 2000); setTimeout(function() { lightSeq(3); }, 2400); setTimeout(function() { lightSeq(2); }, 2800); setTimeout(function() { lightSeq(1); }, 3200); setTimeout(function() { $('.counter').css('color', '#800002'); $('.counter').text("--"); $('.startButton').css('background', '#800002'); $('.strictButton').css('background', '#BABA20'); compTurn=true; score=0; }, 4000); } for (var j=0;j<simonSequence.length;j++){ dosetTimeout(simonSequence[j],j*1000); //intermediary function used so value of j doesn't end up being same, also setting interval to be a multiple of j ensures that after first interval all calls aren't made in rapid succession if (j===0){ clearTimeout(timeLimitSet); } if(j===simonSequence.length-1 && simonSequence.length>1){ timeLimitSet = setTimeout(function() { score=-1; updateScore(); }, (j*1000)+7000); } if(simonSequence.length===1){ timeLimitSet = setTimeout(function() { score=-1; updateScore(); }, 6000); } } compTurn=false; }
$(".strictButton").off().on( "click", function() { if(!strictOn){ compTurn=true; userSequence=[]; simonSequence=[]; clearTimeout(timeLimitSet); timeLimitSet=null; score=0; $('.strictButton').css('background', 'yellow'); setTimeout(function(){ //setTimeout allows (time) for values to reset before restarting strictOn=true; $('.startButton').click(); },200); }else{ compTurn=true; userSequence=[]; simonSequence.pop(); clearTimeout(timeLimitSet); timeLimitSet=null; score=simonSequence.length; $('.strictButton').css('background', '#BABA20'); setTimeout(function(){ //setTimeout allows (time) for values to reset before restarting strictOn=false; $('.startButton').click(); },200); }
}); function dosetTimeout(num,interval){ setTimeout(function(){ lightSeq(num)},interval); } function lightSeq(order){ switch(order){ case 1: snd1.load(); snd1.play(); $('.red').css('background', '#FF0000'); setTimeout(function() { $('.red').css('background', '#A30000'); }, 300); break; case 2: snd2.load(); snd2.play(); $('.blue').css('background', '#0000FF'); setTimeout(function() { $('.blue').css('background', '#0000A1'); }, 300); break; case 3: snd3.load(); snd3.play(); $('.yellow').css('background', '#FFE100'); setTimeout(function() { $('.yellow').css('background', '#AD9900'); }, 300); break; case 4: snd4.load(); snd4.play(); $('.green').css('background', '#00FF00'); setTimeout(function() { $('.green').css('background', '#00AD00'); }, 300); break; } }
}); $(".red").click(function() { console.log("red"); compTurn=true; $('.red').css('background', '#FF0000'); snd1.load(); snd1.play(); setTimeout(function() { $('.red').css('background', '#A30000'); }, 75); userSequence.push(1); checkSequence(); }); $(".blue").click(function() { console.log("blue"); snd2.load(); snd2.play(); $('.blue').css('background', '#0000FF'); setTimeout(function() { $('.blue').css('background', '#0000A1'); }, 75); userSequence.push(2); checkSequence(); }); $(".yellow").click(function() { console.log("yellow"); snd3.load(); snd3.play(); $('.yellow').css('background', '#FFE100'); setTimeout(function() { $('.yellow').css('background', '#AD9900'); }, 75); userSequence.push(3); checkSequence(); }); $(".green").click(function() { console.log("green"); snd4.load(); snd4.play(); $('.green').css('background', '#00FF00'); setTimeout(function() { $('.green').css('background', '#00AD00'); }, 75); userSequence.push(4); checkSequence(); }); function checkSequence(){ score=simonSequence.length; for (var k=0;k<userSequence.length;k++){ if (userSequence[k]!==simonSequence[k]){ score=-1; updateScore(); break; } } if(simonSequence.length===userSequence.length){ updateScore(); } } function updateScore(){ compTurn=true; userSequence=[]; clearTimeout(timeLimitSet); timeLimitSet=null; if (score!==-1){ setTimeout(function() { $('.startButton').click(); }, 1000); }else if (score===-1 && strictOn===false){ snd1.pause(); snd2.pause(); snd3.pause(); snd4.pause(); snd1.currentTime = 0; snd2.currentTime = 0; snd3.currentTime = 0; snd4.currentTime = 0; errSnd.load(); errSnd.play(); setTimeout(function() { $('.counter').text('! !'); }, 100); setTimeout(function() { $('.counter').text(simonSequence.length); }, 1000); setTimeout(function() { $('.startButton').click(); }, 1500); }else if (score===-1 && strictOn===true){ snd1.pause(); snd2.pause(); snd3.pause(); snd4.pause(); snd1.currentTime = 0; snd2.currentTime = 0; snd3.currentTime = 0; snd4.currentTime = 0; errSnd.load(); errSnd.play(); simonSequence=[]; score=0; setTimeout(function() { $('.counter').text('! !'); }, 100); setTimeout(function() { $('.startButton').click(); }, 1000); } }
});
Simon - Script Codes
Simon - Script Codes
Home Page Home
Developer Sam Koshy
Username codinger
Uploaded November 06, 2022
Rating 3
Size 4,744 Kb
Views 16,192
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!

Sam Koshy (codinger) Script Codes
Name
Tic Tac Toe
Camper News
Tic Tac Toe _ Alternate
Heat Map
Random Quote Machine
Twitchtv Status
Javascript Calculator
Data Visualization - US GDP
Pomodoro Clock
Wikipedia Viewer
Create amazing SEO content 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!