Generic Simon Game

Developer
Bob Sutton
Size
4,475 Kb
Views
26,312
  1. Generic Simon Game Previews
  2. Generic Simon Game HTML Codes
  3. Generic Simon Game CSS Codes
  4. Generic Simon Game JS Codes

How do I make an generic simon game?

A generic Simon Game.. What is a generic simon game? How do you make a generic simon game? This script and codes were developed by Bob Sutton on 11 September 2022, Sunday.

Generic Simon Game Previews
IQ Test

Generic Simon Game - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Generic Simon Game</title> <link rel='stylesheet prefetch' href='https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css'>
<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Geo'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="container"> <div id="reset-area"> <button class="ui-button ui-widget ui-corner-all">Reset</button> </div> <div id="red-area" class="color-button"></div> <div id="count-area"> <div id="count-field">--</div> </div> <div id="green-area" class="color-button"></div> <div id="blue-area" class="color-button"></div> <div id="start-area"> <button class="ui-button ui-widget ui-corner-all">Start</button> </div> <div id="strict-area"> <table> <tr> <td><label>Liberal</label></td> <td><div id="strict-slider"></div></td> <td><label>Strict</label></td> </table> </div> <div id="yellow-area" class="color-button"></div> <div id="brain-area"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/763768/Brain.png" width="90px" height="90px" /> </div>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Generic Simon Game - Script Codes CSS Codes

body
{ background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/763768/wooden-background.jpg"); background-repeat: repeat;
}
#container
{ position: relative; width: 550px; height: 540px; margin-top: 100px; margin-left: auto; margin-right: auto;
}
#reset-area
{ position: absolute; left: 0px; top: 0px; width: 200px; height: 200px; text-align: center;
}
#reset-area button
{ margin-top: 100px;
}
.ui-button
{ height: 30px; border-radius: 5px; border: #3f3f3f groove 1px;
}
.color-button
{ border: black solid 10px; border-radius: 15px;
}
#red-area
{ position: absolute; left: 220px; top: 0px; background: red; width: 100px; height: 200px;
}
#count-area
{ position: absolute; left: 340px; top: 0; width: 200px; height: 200px;
}
#count-field
{ border: #3f3f3f groove 1px; border-radius: 5px; margin-top: 80px; margin-left: auto; margin-right: auto; padding-bottom: 4px; width: 66px; height: 55px; font-family: Share Tech Mono; font-size: 50px; text-align: center; color: red; background-color: white;
}
#blue-area
{ position: absolute; background: blue; left: 0px; top: 220px; width: 200px; height: 100px;
}
#brain-area
{ position: absolute; padding: 5px 5px 5px 5px; left: 230px; top: 230px; width: 100px; height: 100px;
}
#yellow-area
{ position: absolute; background: yellow; left: 340px; top: 220px; width: 200px; height: 100px;
}
#start-area
{ position: absolute; left: 0px; top: 340px; width: 200px; height: 200px; text-align: center;
}
#start-area button
{ margin-top: 100px;
}
#green-area
{ position: absolute; background: green; left: 220px; top: 340px; width: 100px; height: 200px;
}
#strict-area
{ position: absolute; margin-left: 25px; margin-top: 100px; left: 340px; top: 340px; width: 200px; height: 200px;
}
#strict-slider
{ width: 40px; margin-left: 10px; margin-right: 10px; background: gray;
}

Generic Simon Game - Script Codes JS Codes

var maxSequence = 20;
var mousePressed = undefined;
var mouseReleased = undefined;
var readyToBegin = 0;
var playSequence = 1;
var waitForSequence = 2;
var state = readyToBegin;
var sequence = [];
var pausePeriod = 1000;
var userCount = 1;
var clickCount = 0;
var sequenceNdx;
var strict = false;
var wrongButtonClicked = false;
var savedBackgroundColor = {};
var mp3Name = {};
mp3Name["red-area"] = "simonSound1.mp3";
mp3Name["blue-area"] = "simonSound2.mp3";
mp3Name["green-area"] = "simonSound3.mp3";
mp3Name["yellow-area"] = "simonSound4.mp3";
mp3Name["buzzer"] = "Buzzer.mp3";
mp3Name["tada"] = "Tada.mp3";
var animations = ["rubberBand", "bounce", "shake", "wobble"];
function buildNewColorSequence()
{ sequence = []; // Choose color sequence for (var i = 0; i < maxSequence; i++) sequence.push(chooseColorAreaId(Math.floor(Math.random() * 4)));
}
function darken(id)
{ var lum = -0.5; savedBackgroundColor[id] = $("#" + id).css("background-color"); var digits = /(.*?)rgb\((\d+), (\d+), (\d+)\)/.exec(savedBackgroundColor[id]); var rgb = []; for (var i = 2; i <= 4; i++) { var c = parseInt(digits[i]); rgb.push(Math.round(Math.min(Math.max(0, c + c * lum)), 255)); } $("#" + id).css("background-color", "rgb(" + rgb[0] + "," + rgb[1] + "," + rgb[2] + ")");
}
function restore(id)
{ $("#" + id).css("background-color", savedBackgroundColor[id]);
}
function buzzer()
{ play("buzzer"); var animationNdx = Math.floor(Math.random() * animations.length); $("#brain-area").addClass("animated " + animations[animationNdx]); var s = "animated"; animations.forEach(function(method) { s += " " + method }); setTimeout(function() { $("#brain-area").removeClass(s) }, 2000);
}
function tada()
{ play("tada"); $("#brain-area").addClass("animated flash"); setTimeout(function() { $("#brain-area").removeClass("animated flash") }, 2000);
}
function play(id)
{ $("<audio src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/763768/" + mp3Name[id] + "' />")[0].play();
}
function onMouseDown(event)
{ mousePressed = event.target.id; processState();
}
function onMouseUp(event)
{ if (!mousePressed) return; mouseReleased = event.target.id; processState();
}
function resetGame()
{ state = readyToBegin; $("#start-area button").button("enable"); buildNewColorSequence(); sequenceNdx = 0; pausePeriod = 1000; userCount = 0;
}
function processState()
{ // Game initialization if (state === readyToBegin) { // Catch situation where use is pushing buttons he shouldn't be pushing if (mousePressed || mouseReleased) { mousePressed = undefined; mouseReleased = undefined; return; } // Disable start button $("#start-area button").button("disable"); // Start with the first color in the selected sequence sequenceNdx = 0; // Change state to "play sequence" state = playSequence; // Update the user's color count userCount = 0; // Reset pausePeriod to its initial value. pausePeriod = 1000; // Process the state again after a second. setTimeout(function() { processState(); }, 1000); return; } // Play sequence of colors and sounds, with a "pausePeriod" milliseconds interval // between each one after that. When sequence has been finished, change state // to "waitForSequence". if (state === playSequence) { // Catch situation where use is pushing buttons he shouldn't be pushing if (mousePressed || mouseReleased) { mousePressed = undefined; mouseReleased = undefined; return; } // Playing of sequence finished? if (sequenceNdx > userCount)
// if (sequenceNdx > maxSequence) // testing { state = waitForSequence; clickCount = 0; return; } // Display count field $("#count-field").text(userCount + 1); // Play one part of sequence darken(sequence[sequenceNdx]); play(sequence[sequenceNdx]); sequenceNdx++; // Wait "pausePeriod" millis, restore button color, and then wait another // "pausePeriod" millis before processing the state again setTimeout(function() { restore(sequence[sequenceNdx - 1]); setTimeout(function() { processState(); }, pausePeriod); }, pausePeriod); } if (state === waitForSequence) { // Mouse pressed? if (mousePressed && !mouseReleased) { // Light up color button darken(mousePressed); // Color button was pressed? if (mousePressed === sequence[clickCount]) { // Play color button sound play(mousePressed); clickCount++; return; } // Color button pushed out of sequence. Play buzzer buzzer(); // Indicate wrong button was clicked wrongButtonClicked = true; } // Mouse released (or pointer dragged out of the color button)? if (mouseReleased) { restore(mousePressed); mousePressed = undefined; mouseReleased = undefined; if (wrongButtonClicked) { wrongButtonClicked = false; if (strict) { resetGame(); } else { sequenceNdx = 0; clickCount = 0; } state = playSequence; // Update count in display and process current state setTimeout(function() { processState(); }, 3000); return; } if (clickCount >= sequence.length) { tada(); resetGame(); return; } // If at the end of the sequence, change the state so that it will be played // again but with the next sequence added. if (clickCount > userCount) { wrongButtonClicked = false; state = playSequence; sequenceNdx = 0; clickCount = 0; userCount++; // Update count in display and process current state setTimeout(function() { processState(); }, 3000); return; } } }
}
function chooseColorAreaId(n)
{ if (n === 0) return "red-area"; if (n === 1) return "blue-area"; if (n === 2) return "green-area"; return "yellow-area";
}
function startGame()
{ if (state != readyToBegin) return; processState();
}
$(".color-button") .on("mousedown", onMouseDown) .on("mouseup mouseleave", onMouseUp);
$("#reset-area button") .button() .on("click", resetGame);
$("#start-area button") .button() .on("click", startGame);
$("#strict-slider").slider(
{ value: 0, min: 0, max: 100, step: 100, slide: function(event, ui) { strict = (ui.value === 100); }
});
buildNewColorSequence();
Generic Simon Game - Script Codes
Generic Simon Game - Script Codes
Home Page Home
Developer Bob Sutton
Username anischyros
Uploaded September 11, 2022
Rating 3
Size 4,475 Kb
Views 26,312
Do you need developer help for Generic 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!

Bob Sutton (anischyros) Script Codes
Name
Demonstration of Doping in Professional Bicycle Racing
Pomodoro Clock
U.S. Gross Domestic Product of the United States
Winston Churchill
The Recipe Engine
Worldwide Meteor Strikes Map
Life in a Dungeon
The Mark Twain Random Quote Machine
Tic-Tac-Toe
Web calculator
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!