Simon game

Developer
Donald
Size
3,768 Kb
Views
26,312
  1. Simon game Previews
  2. Simon game HTML Codes
  3. Simon game CSS Codes
  4. Simon game JS Codes

How do I make an simon game?

What is a simon game? How do you make a simon game? This script and codes were developed by Donald on 10 September 2022, Saturday.

Simon game Previews
IQ Test

Simon game - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Simon game</title> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <html>
<body> <div class='container-fluid'> <div id='info-box'> <p class='centered' style="color:purple">Win Condition</p> <div class='row'> <div class='col-xs-2'></div> <div class='col-xs-2'><button onclick='adjustWin(-1)' class='btn btn-block circle' id='decrease'>-</button></div> <div class='col-xs-1'></div> <div class='col-xs-2 centered' id='winCount'></div> <div class='col-xs-1'></div> <div class='col-xs-1'><button onclick='adjustWin(1)' class='btn btn-block circle'>+</button></div> </div> <p class='centered' id='record'>Record</p> <p class='centered' id='recordCount'>3</p> </div> <div id='game-circle'> <div id='bigBtns'> <div class='row'> <div class='col-md-6'> <button class='big' id='button1'></button> </div> <button class='big' id='button2'></button> </div> <div class='row'> <div class='col-md-6'> <button class='big' id='button3'></button> </div> <button class='big' id='button4'></button> </div> </div> <div id='inner-circle'> <h1 class='centered'>Simon</h1> <div class='row' id='buttons'> <div class='col-xs-1'></div> <div class='col-xs-3' id='display'> <p class='centered' id='number'>- -</p> </div> <div class='col-xs-1'><button onclick='start()' class='btn btn-circle' id='redBtn'></button></div> <div class='col-xs-1'></div> <div class='col-xs-1'><button onclick='strictOn()' class='btn btn-circle' id='yellowBtn'></button></div> </div> <div class='row' id='labels'> <div class='col-xs-1'></div> <div class='col-xs-3 centered'>Count</div> <div class='col-xs-1 centered'>Start</div> <div class='col-xs-1'></div> <div class='col-xs-1'>Strict</div> </div> </div> </div> </div>
</body>
</html> <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 game - Script Codes CSS Codes

body { background-color: beige;
}
#info-box { position: absolute; margin-left: 930px; border-style: solid; margin-top: 30px; width: 300px; height: 300px; font-size: 30px;
}
.circle { border-radius: 50%; height: 40px; width: 40px; font-weight: bold; background-color: green; color: white; font-size: 20px; margin-top: 12px;
}
#decrease { background: red;
}
#record { margin-top: 20px; color: blue;
}
p { font-size: 40px;
}
#winCount { font-size: 50px; color: maroon;
}
#recordCount { color: red; font-size: 50px;
}
#game-circle { position: relative; border-style: solid; border-radius: 50%; border-width: 20px; height: 500px; width: 500px; margin: auto; margin-top: 15px;
}
#inner-circle { position: absolute; background-color: lightgray; border-style: solid; border-radius: 50%; border-width: 10px; height: 250px; width: 250px; top: 105px; left: 105px;
}
.centered { text-align: center;
}
h1 { font-size: 60px; font-weight: bold; margin-top: 40px;
}
#display { border-style: solid; width: 25%; height: 50px; border-radius: 10px; background-color: black;
}
#number { color: white; font-size: 20px; margin-top: 5px;
}
.btn-circle { height: 30px; width: 30px; border-radius: 50%; background-color: yellow;
}
.big { width: 230px; height: 230px; border-width: 1px;
}
#button1 { border-top-left-radius: 100%; background-color: darkgreen;
}
#button2 { border-top-right-radius: 100%; background-color: darkred;
}
#button3 { border-bottom-left-radius: 100%; background-color: darkorange;
}
#button4 { border-bottom-right-radius: 100%; background-color: darkblue;
}

Simon game - Script Codes JS Codes

var strictBtnOn = false;
var startBtnOn = false;
var count = 0;
var index = 0;
var win = 5;
var prevPattern = [];
var buttonsReady = false;
var record = 0;
var disp = document.getElementById('number');
var winCount = document.getElementById('winCount');
var recordCount = document.getElementById('recordCount');
var audio = [];
audio[1] = new Audio('https://s3.amazonaws.com/freecodecamp/simonSound1.mp3');
audio[2] = new Audio('https://s3.amazonaws.com/freecodecamp/simonSound2.mp3');
audio[3] = new Audio('https://s3.amazonaws.com/freecodecamp/simonSound3.mp3');
audio[4] = new Audio('https://s3.amazonaws.com/freecodecamp/simonSound4.mp3');
document.getElementById('button1').addEventListener('click', function(){ compare(1); });
document.getElementById('button2').addEventListener('click', function(){ compare(2); });
document.getElementById('button3').addEventListener('click', function(){ compare(3); });
document.getElementById('button4').addEventListener('click', function(){ compare(4); });
winCount.innerHTML = win;
var colorTheme = { 'button1': { 'start': 'darkgreen', 'pressed': 'green' }, 'button2': { 'start': 'darkred', 'pressed': 'red' }, 'button3': { 'start': 'darkorange', 'pressed': 'yellow' }, 'button4': { 'start': 'darkblue', 'pressed': 'blue' }
};
function off() { reset(); strictBtnOn = false; startBtnOn = false; document.getElementById('redBtn').style.background = 'yellow'; document.getElementById('yellowBtn').style.background = 'yellow';
}
function reset() { count = 0; index = 0; prevPattern.length = 0; disp.innerHTML = '- -';
}
function strictOn() { var elem = document.getElementById('yellowBtn'); if (strictBtnOn) { elem.style.backgroundColor = 'yellow'; strictBtnOn = false; } else { elem.style.backgroundColor = 'red'; strictBtnOn = true; }
}
function start() { var elem = document.getElementById('redBtn'); if (startBtnOn) { elem.style.backgroundColor = 'yellow'; startBtnOn = false; off(); } else { elem.style.background = 'red'; startBtnOn = true; setTimeout(pattern, 1000); }
}
function randomize() { return Math.floor(Math.random() * 4) + 1;
}
function pattern() { if (count == win) { winner(); return; } count++; var num = randomize(); prevPattern.push(num); displayPattern();
}
function displayPattern() { buttonsReady = false; disp.innerHTML = count; var i = 0; function f() { // had to use iterative approach instead of for loop because of setTimeout issue var num = prevPattern[i]; timedColorChange(num); i++; if( i < count ){ setTimeout( f, 800 ); // function timeouts, without brackets, do not execute rapidly unlike for loop } else { buttonsReady = true; } } f(); /* for (var i = 0; i < count; i++) { // output the prev + curent pattern var num = String(prevPattern[i]); var buttonPress = 'button' + num; timedColorChange(buttonPress); } // this for loop cause alot of timeout trouble */
}
function timedColorChange(num) { var elem = 'button' + String(num); var target = document.getElementById(elem); target.style.background = colorTheme[elem]['pressed']; audio[num].play(); setTimeout(function() {target.style.background = colorTheme[elem]['start']}, 400);
}
function playSound(num) { var audio; switch(num) { case 1: audio = audio1; case 2: audio = audio2; case 3: audio = audio3; case 4: audio = audio4; } audio.play();
}
function compare(b) { if (!buttonsReady) { index = 0; return; } timedColorChange(b); if(prevPattern[index] == b) { // if match index++; } else if (strictBtnOn) { // strict mode and mistake, reset all reset(); strictBtnOn = true; startBtnOn = true; disp.innerHTML = '! !'; setTimeout(pattern, 2000); } else { //if normal mistake, repeat pattern disp.innerHTML = '...'; index = 0; setTimeout(displayPattern, 1500); } if (index >= count) { // level complete, move to next level index = 0; setTimeout(pattern, 1500); }
}
function winner() { if (count > record) { record = count; recordCount.innerHTML = record; } disp.innerHTML = 'WIN!'; setTimeout(reset, 5000); setTimeout(pattern, 5500);
}
function adjustWin(w) { win += w; if (win < count) { win = count; } else if (win < 3) { win = 3; } else if (win > 20) { win = 20; } winCount.innerHTML = win;
}
Simon game - Script Codes
Simon game - Script Codes
Home Page Home
Developer Donald
Username donaldk7
Uploaded September 10, 2022
Rating 3
Size 3,768 Kb
Views 26,312
Do you need developer help for Simon game?

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!

Donald (donaldk7) Script Codes
Name
Code playground
Tic Tack Toe
Show the Local Weather
Timestamp
Calculator
A Pen by Donald
Twitch TV Streamer
Tribute page
Quote of the Day
Pomodoro clock
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!