Simon

Developer
Tom Brodhead
Size
5,807 Kb
Views
8,096
  1. Simon Previews
  2. Simon HTML Codes
  3. Simon CSS Codes
  4. Simon JS Codes

How do I make an simon?

A reproduction of the Simon game. Play it by turning it on and pressing the start button. Simon will beep a series of 20 randomly generated button presses starting with the first press, each succession of which the player must reproduce. If the player presses an incorrect button, then a "razz" buzzer will sound and Simon will reproduce the current series of steps again for the player to observe and attempt to reproduce. At any point during game play, the player may activate "Strict" mode by pressing the "Strict" button. This causes the game to start afresh with a newly generated random sequence of button presses rather than continue with the current step of the existing series. At any point, the player may turn the game off with the On/Off switch.. What is a simon? How do you make a simon? This script and codes were developed by Tom Brodhead on 19 January 2023, Thursday.

Simon Previews
IQ Test

Simon - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Simon</title> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Simon</title> <link rel='stylesheet prefetch' href='https://cdn.jsdelivr.net/meyer-reset/2.0/reset.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="container" class="flex"> <div class="circle foreground" id="quadrants"> <div class="arc noSelect" id="q1"></div> <div class="arc noSelect" id="q2"></div> <div class="arc noSelect" id="q3"></div> <div class="arc noSelect" id="q4"></div> </div> <div class="circle prevent-blue-highlighting-on-select" id="cross"> <div id="cross-vertical"></div> <div id="cross-horizontal"></div> </div> <div class="circle background" id="circle-background"> </div> <div class="circle prevent-blue-highlighting-on-select" id="circle-controls"> <div id="game-title">Simon</div> <div id="controls-top-row"> <div class="count"> <div id="count-display"> <div id="count-text"></div> </div> <div id="count-label">Count</div> </div> <div class="start"> <div id="start-button"></div> <div id="start-label">Start</div> </div> <div class="strict"> <div id="strict-light"></div> <div id="strict-button"></div> <div id="strict-label">Strict</div> </div> </div> <div id="controls-bottom-row"> <div class="on-off"> <div id="on-label">On&nbsp;</div> <div id="on-off-switch"> <div id="on"></div> <div id="off"></div> </div> <div id="off-label">&nbsp;Off</div> </div> </div> </div>
</div>
<audio id="beep-1" src="https://bmt-systems.com/codecamp/audio_files/simon/1.mp3"></audio>
<audio id="beep-2" src="https://bmt-systems.com/codecamp/audio_files/simon/2.mp3"></audio>
<audio id="beep-3" src="https://bmt-systems.com/codecamp/audio_files/simon/3.mp3"></audio>
<audio id="beep-4" src="https://bmt-systems.com/codecamp/audio_files/simon/4.mp3"></audio>
<audio id="beep-bad" src="https://bmt-systems.com/codecamp/audio_files/simon/beep_bad.mp3"></audio>
<audio id="beep-win" src="https://bmt-systems.com/codecamp/audio_files/simon/TaDa.mp3"></audio>
<audio id="beep-time-is-up" src="https://bmt-systems.com/codecamp/audio_files/simon/TimeIsUp.mp3"></audio> <script src="js/index.js"></script>
</body>
</html>

Simon - Script Codes CSS Codes

@font-face { font-family: 'Bevan'; font-weight: 400; font-style: normal; src: url('https://fonts.gstatic.com/s/bevan/v7/ZRUOnkoGzgM5n00L6uhVOg.eot'); src: url('https://fonts.gstatic.com/s/bevan/v7/ZRUOnkoGzgM5n00L6uhVOg.eot?#iefix') format('embedded-opentype'), local('Bevan'), local('Bevan-regular'), url('https://fonts.gstatic.com/s/bevan/v7/Fc36VMDxmk7bwCF8XDJdKaCWcynf_cDxXwCLxiixG1c.woff2') format('woff2'), url('https://fonts.gstatic.com/s/bevan/v7/EJh9uh2wkQP9ayreC3xPZaCWcynf_cDxXwCLxiixG1c.woff') format('woff'), url('https://fonts.gstatic.com/s/bevan/v7/tUrrMQoBrJbKyZFfX9xzeQ.ttf') format('truetype'), url('https://fonts.gstatic.com/l/font?kit=m619AKwEDmn_WiI-vs6t0g&skey=7503fb07de04c1e8&v=v7#Bevan') format('svg');
}
@font-face { font-family: 'Inconsolata'; font-weight: 400; font-style: normal; src: url('https://fonts.gstatic.com/s/inconsolata/v12/BjAYBlHtW3CJxDcjzrnZCGfQcKutQXcIrRfyR5jdjY8.eot'); src: url('https://fonts.gstatic.com/s/inconsolata/v12/BjAYBlHtW3CJxDcjzrnZCGfQcKutQXcIrRfyR5jdjY8.eot?#iefix') format('embedded-opentype'), local('Inconsolata'), local('Inconsolata-regular'), url('https://fonts.gstatic.com/s/inconsolata/v12/BjAYBlHtW3CJxDcjzrnZCIgp9Q8gbYrhqGlRav_IXfk.woff2') format('woff2'), url('https://fonts.gstatic.com/s/inconsolata/v12/BjAYBlHtW3CJxDcjzrnZCLrIa-7acMAeDBVuclsi6Gc.woff') format('woff'), url('https://fonts.gstatic.com/s/inconsolata/v12/BjAYBlHtW3CJxDcjzrnZCJ0EAVxt0G0biEntp43Qt6E.ttf') format('truetype'), url('https://fonts.gstatic.com/l/font?kit=BjAYBlHtW3CJxDcjzrnZCHNsigHlcrQGNV8nkUSFQfc&skey=20fa6569a31c71ee&v=v12#Inconsolata') format('svg');
}
@font-face { font-family:'Share Tech Mono'; font-weight:400; font-style:normal; src: url('https://fonts.gstatic.com/s/sharetechmono/v6/RQxK-3RA0Lnf3gnnnNrAsTwtzT4qNq-faudv5qbO9-U.eot'); src: url('https://fonts.gstatic.com/s/sharetechmono/v6/RQxK-3RA0Lnf3gnnnNrAsTwtzT4qNq-faudv5qbO9-U.eot?#iefix') format('embedded-opentype'), local('Share Tech Mono'), local('Share-Tech-Mono-regular'), url('https://fonts.gstatic.com/s/sharetechmono/v6/RQxK-3RA0Lnf3gnnnNrAsVlgUn8GogvcKKzoM9Dh-4E.woff2') format('woff2'), url('https://fonts.gstatic.com/s/sharetechmono/v6/RQxK-3RA0Lnf3gnnnNrAsaH0X__W3S3MJL29bc5CWfs.woff') format('woff'), url('https://fonts.gstatic.com/s/sharetechmono/v6/RQxK-3RA0Lnf3gnnnNrAsYW_AySPyikQrZReizgrnuw.ttf') format('truetype'), url('https://fonts.gstatic.com/l/font?kit=RQxK-3RA0Lnf3gnnnNrAsaCLXEu0wbeKjKdJPgQe1G4&skey=241741910c57ea83&v=v6#ShareTechMono') format('svg');
}
* { -webkit-box-sizing: border-box; moz-box-sizing: border-box; box-sizing: border-box;
}
body { margin:0em auto 0em auto; border:0px solid DarkSlateGray; padding:0em 0em 0em 0em; max-width:62.5em; font-size:1.375em; font-weight:normal; min-height:100vh; color:#000; background-color:Tan;
}
.flex { width:100vw; height:100%; display:-ms-flexbox; display:-webkit-flex; display:flex; -ms-flex-align: center; -webkit-align-items: center; -webkit-box-align: center; align-items:center; flex-direction:column; justify-content:center; text-align:center;
}
.circle { position:absolute; top:50%; left:50%; transform: translate(-50%, -50%); width:20em; height:20em; border-radius:50%;
}
.background { width:22em; height:22em; background-color:DarkSlateGray; z-index:-1; box-shadow:10px 25px 25px #233227;
}
.arc { position:absolute; top: 0em; left: 0em; width:20em; height:20em; border:75px solid DarkSlateGray; display:inline-block; border-radius: 50%; border-color: transparent; -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); -webkit-transform: rotate(-45deg);
}
#cross div { position:absolute; background:DarkSlateGray;
}
#cross-vertical { margin-top:-2%; left: 48%; width: 4%; height: 104%;
}
#cross-horizontal { margin-left:-2%; top: 48%; width: 104%; height: 4%;
}
/*
top-left: MediumSeaGreen
top-right: FireBrick
bottom-left: GoldenRod
bottom-right: MediumBlue
*/
#q1 { border-top-color:MediumSeaGreen
}
#q2 { border-right-color:FireBrick
}
#q3 { border-bottom-color:MediumBlue
}
#q4 { border-left-color:GoldenRod
}
#circle-controls { display:inline-block; font-family:'Share Tech Mono'; font-weight:bold; color:black; /* position:fixed; */ top:50%; left:50%; transform:translate(-50%, -50%); width:13.5em; height:13.5em; border-radius:50%; border:15px solid DarkSlateGray; background-color:white; z-index:10;
}
div#cross.circle:hover { cursor:pointer;
}
#game-title { font-family:'Bevan'; font-weight:normal; color:black; font-size:2.25em; margin:1em 0em -.25em 0em; padding:0em;
}
#controls-top-row { margin:1em; padding:0em;
}
#controls-bottom-row { margin:0em; padding:0em;
}
.count { display:inline-block; margin:0em; padding:0em; border:0px solid black;
}
#count-label { position:relative; font-size:.825em; margin:.1em;
}
#count-display { display:inline-block; border:2px solid DarkSlateGray; border-radius:10%; max-width:10px; max-height:10px; background:black; margin:0em 0em 0em 0em; padding:.6em 1.2em;
}
#count-text { position:absolute; font-size:1.2em; font-weight:bold; color:red; display:inline-block; margin:-.45em 0em 0em -.55em; padding:0em; visibility:visible;
}
.start { display:inline-block; margin:0em; padding:0em; border:0px solid black;
}
#start-button { display:inline-block; border:4px solid DarkSlateGray; border-radius:50%; max-width:10px; max-height:10px; background:red; margin:0em; padding:.4em;
}
#start-button:hover { cursor: pointer;
}
#start-button:active{ box-shadow:0px 2.666px 2.666px #233227; top:-5px;
}
#start-label { font-size:.825em; margin-top:.3em;
}
.strict { display:inline-block; margin:0em 0em 0em 0em; padding:0em 0em 0em 0em; border:0px solid black;
}
#strict-label { font-size:.825em; margin-top:.3em; padding:0em;
}
#strict-button { display:inline-block; border:4px solid DarkSlateGray; border-radius:50%; max-width:10px; max-height:10px; background:yellow; margin:.3em 0.0125em 0em 0em; padding:.4em;
}
#strict-button:active{ box-shadow:0px 2px 2px #233227; top:-5px;
}
#strict-button:hover { cursor:pointer;
}
#strict-light { display:block; border:2px solid DarkSlateGray; border-radius:50%; max-width:1px; max-height:1px; background: black; margin:0em 0em 0em 1.1em; padding:.135em;
}
.on-off { display:inline-block; margin:0em; padding:0em; border:0px solid black;
}
#on-off-switch:hover { cursor: pointer;
}
#on-label { float:left; font-size:.825em; margin-top:.4em;
}
#on-off-switch { display:inline-block; float:left; border:2px solid DarkSlateGray; border-radius:5%; max-width:10px; max-height:10px; background:black; margin:0em; padding:.6em 1.2em;
}
#off-label { float:left; font-size:.825em; margin-top:.4em;
}
#on { position:absolute; background:black; margin:-.6em 0em 0em -1.2em; padding:.6em;
}
#off { position:absolute; background:DeepSkyBlue; padding:.6em; margin:-.6em 0em 0em 0em;
}
@media screen and (max-width: 600px){ #container { -moz-transform: scale(0.6); -ms-transform: scale(0.6); -o-transform: scale(0.6); -webkit-transform: scale(0.6); transform: scale(0.6); margin-top: 60%; }
}
.prevent-blue-highlighting-on-select { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}

Simon - Script Codes JS Codes

var G;G=function(){var u,r,H,t,v,n,I,A,l,B,b,w,C,k,J,K,L,D,e,x,p,y,z,E,m,F,h,q;Number.isNaN=Number.isNaN||function(a){return"number"===typeof a&&isNaN(a)};r=m=l=e=!1;u=function(a){a=document.getElementById(a);window.Promise?J(a.src):a.play()};H=function(){b("#count-text").innerHTML=":-)";t();u("beep-win")};t=function(){var a,c,f;a=0;c=b("#count-text");f=window.setInterval(function(){"visible"===c.style.visibility||""===c.style.visibility?c.style.visibility="hidden":(c.style.visibility="visible",a+=1,2===a&&window.clearInterval(f))},250)};v=function(a){var c,f,d,g,e;f=function(a,c,d){1===a?b(c).style.borderTopColor=d:2===a?b(c).style.borderRightColor=d:3===a?b(c).style.borderBottomColor=d:4===a&&(b(c).style.borderLeftColor=d)};g="#q"+a;c="beep-"+a;!0===r&&(c="beep-bad");1===a?(d=b(g).style.borderTopColor,e="Green"):2===a?(d=b(g).style.borderRightColor,e="Red"):3===a?(d=b(g).style.borderBottomColor,e="DodgerBlue"):4===a&&(d=b(g).style.borderLeftColor,e="Gold");f(a,g,e);u(c);E();window.setTimeout(function(){f(a,g,d)},250)};n=function(){b("div#cross.circle").style.pointerEvents="none"};I=function(){b("div#cross.circle").style.pointerEvents="auto"};A=function(){var a;y=[];for(a=0;a<C;)a+=1,y.push(K(1,4))};b=function(a){return document.querySelector(a)};J=function(a){new Promise(function(b,f){var d;d=new Audio;d.a="auto";d.autoplay=!0;d.onerror=f;d.onended=b;d.src=a})};K=function(a,b){var c;void 0===w?c=Math.floor(Math.random()*(b-a+1))+a:(c=Math.floor(Math.random()*(b-a))+a,c>=w&&(c+=1));return w=c};L=function(){var a;a=!0;!0===e&&!0===l&&(n(),u("beep-time-is-up"),b("#count-text").innerHTML="!!",t(),!0===m?(z(),a=!1):(--h,q=0),!0===a&&(window.setTimeout(p,2E3),k=0));return a};D=function(a){a=Number(Math.round(a+"e7")+"e-7");isNaN(a)&&(a=0);return a};p=function(){if(!0===e&&!0===l){var a;0===q&&(x=0,q=-1,r=!1,a=10>h?"0"+h.toString(10):h.toString(10),b("#count-text").innerHTML=a);v(y[x]);x+=1;x<h?window.setTimeout(p,750):(h+=1,k=q=0,I())}};z=function(){B=!1;w=void 0;n();k=0;C=20;!0===e&&(b("#count-text").innerHTML="&ndash;&ndash;",t(),A(),h=1,q=0,window.setTimeout(p,1500))};E=function(){!0===e&&!0===l&&(void 0!==F&&window.clearTimeout(F),F=window.setTimeout(L,6E3))};b("div#cross.circle").addEventListener("click",function(a){var c,f,d,g;g=!0;!0===e&&!0===l&&(d=a.target,c=d.getBoundingClientRect(),d=d.offsetLeft,d=a.pageX-d,a=-1*(a.pageY-c.bottom+.5*c.height),d=D(d/(.5*c.width)*100).toFixed(),c=D(a/(.5*c.height)*100).toFixed(),0>d&&0<c&&(f=1),0<d&&0<c&&(f=2),0<d&&0>c&&(f=3),0>d&&0>c&&(f=4),r=!1,f!==y[k]?(n(),r=!0,v(f),b("#count-text").innerHTML="!!",t(),!0===m?(A(),h=1):(--h,q=0),window.setTimeout(p,1500),k=0,g=!1):(v(f),k+=1,k===C&&(n(),window.setTimeout(H,750),window.setTimeout(z,3E3),B=!0)),!0===g&&k===h-1&&!1===B&&(window.setTimeout(p,1500),n()));return g},!1);b("div#cross.circle").addEventListener("click",E,!1);b("#start-button").addEventListener("click",function(){l=!0;z()},!1);b("#strict-button").addEventListener("click",function(){!1===m?(b("#strict-light").style.background="red",m=!0):(b("#strict-light").style.background="black",m=!1)},!1);b("#on").addEventListener("click",function(){!1===e&&(b("#on").style.background="DeepSkyBlue",b("#off").style.background="black",b("#count-text").innerHTML="&ndash;&ndash;",e=!0,b("#strict-light").style.background="black")},!1);b("#off").addEventListener("click",function(){!0===e&&(b("#off").style.background="DeepSkyBlue",b("#on").style.background="black",b("#count-text").innerHTML="",m=l=e=!1,b("#strict-light").style.background="black")},!1)};document.addEventListener("DOMContentLoaded",function(){G()});
Simon - Script Codes
Simon - Script Codes
Home Page Home
Developer Tom Brodhead
Username TomCodeCamp
Uploaded January 19, 2023
Rating 3
Size 5,807 Kb
Views 8,096
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!

Tom Brodhead (TomCodeCamp) Script Codes
Name
Wikipedia Search Engine
Pomodoro Clock
Portfolio
Random Quote Generator
Twitch TV Streamers
Tribute Page
Calculator
A Pen by Tom Brodhead
Local Weather
Tic Tac Toe
Create amazing love letters 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!