Simon Game

Developer
Mihkel
Size
4,975 Kb
Views
12,144
  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?

Simon game. What is a simon game? How do you make a simon game? This script and codes were developed by Mihkel on 08 December 2022, Thursday.

Simon Game Previews
IQ Test

Simon Game - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Simon Game</title> <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Oswald:400,700"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container"> <button class="game-button" disabled></button> <button class="game-button" disabled></button> <button class="game-button" disabled></button> <button class="game-button" disabled></button> <div class="game-controllers"> <h1 class="hero">simon</h1> <div class="button-group"> <div class="column"> <div class="round">--</div> <span class="meta">round</span> </div> <div class="column"> <div class="btn start-btn"></div> <span class="meta">start</span> </div> <div class="column"> <div class="strict-led"></div> <div class="btn strict-btn"></div> <span class="meta">strict</span> </div> </div> <div class="switch-column"> <span class="meta">off</span> <div class="switch-container"> <div class="switch"></div> </div> <span class="meta">on</span> </div> </div>
</div>
<div class="modal"> <div class="modal-content"> <img src="https://www.upload.ee/image/6129450/close.png" alt="Close" class="close-btn"> <img src="https://www.upload.ee/image/6129449/win.jpg" alt="You beat the game!" class="win-img"> </div>
</div> <script src="js/index.js"></script>
</body>
</html>

Simon Game - Script Codes CSS Codes

*:after,
*:before,
* {	box-sizing: border-box;	-webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
}
html, body {	height: 100vh;
}
body {	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;	margin: 0;	padding: 0;	background-image: url("https://www.upload.ee/image/6129427/background.jpg");	font-family: "Oswald", sans-serif;
}
/* CONTAINER */
.container {	position: relative;	display: -webkit-box;	display: -ms-flexbox;	display: flex;	-webkit-box-orient: horizontal;	-webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row;	-ms-flex-wrap: wrap; flex-wrap: wrap;	background-color: #222;	width: 540px;	border-radius: 50%;	padding: 20px;	box-shadow: 0 0 20px 2px rgba(0,0,0,1);
}
/* GAME BUTTONS */
.game-button {	width: 48%;	height: 250px;	outline: none;	border: none;	cursor: pointer;	opacity: 0.4;
}
.game-button:nth-child(1) {	margin-right: 2%;	background-color: green;	border-top-left-radius: 100%;
}
.game-button:nth-child(2) {	margin-left: 2%;	background-color: red;	border-top-right-radius: 100%;
}
.game-button:nth-child(3) {	margin-top: 20px;	margin-right: 2%;	background-color: yellow;	border-bottom-left-radius: 100%;
}
.game-button:nth-child(4) {	margin-top: 20px;	margin-left: 2%;	background-color: blue;	border-bottom-right-radius: 100%;
}
.game-button.highlighted {	opacity: 1;
}
.game-button:disabled {	cursor: default;
}
.game-button:not(:disabled):active {	opacity: 1;
}
/* CONTROLLERS */
.game-controllers {	position: absolute;	top: 50%;	left: 50%;	-webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);	z-index: 10;	background-color: #eee;	width: 50%;	height: 260px;	border-radius: 50%;	border: 15px solid #222;
}
.hero {	text-align: center;	text-transform: lowercase;	font-size: 62px;	margin: 15px 0;	cursor: default;
}
.button-group {	display: -webkit-box;	display: -ms-flexbox;	display: flex;	-webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
}
.button-group .column {	position: relative;	padding: 0 10px;
}
.round {	background-color: #4c0000;	color: #660000;	padding: 2px 16px;	border: 3px solid #000;	border-radius: 8px;	font-size: 22px;	letter-spacing: 0.8px;	cursor: default;	font-family: monospace;
}
.round.on {	color: #e50000;
}
.game-controllers .meta {	display: block;	text-align: center;	text-transform: uppercase;	font-size: 11px;	cursor: default;
}
.btn {	width: 30px;	height: 30px;	border-radius: 50%;	border: 4px solid #444;	border-bottom: 5px solid #444;	background-color: red;	box-shadow: 0 2px 0 rgba(0,0,0,0.4);	cursor: pointer;
}
.btn:active {	-webkit-transform: translateY(1px); transform: translateY(1px);	box-shadow: none;
}
.start-btn,
.strict-btn {	margin: auto auto 6px auto;
}
.strict-btn {	background-color: yellow;
}
.strict-led {	position: absolute;	left: 50%;	top: -16px;	-webkit-transform: translateX(-50%); transform: translateX(-50%);	background-color: #4c0000;	width: 10px;	height: 10px;	border: 2px solid #444;	border-radius: 50%;
}
.strict-led.on {	background-color: #e50000;
}
.switch-column {	display: -webkit-box;	display: -ms-flexbox;	display: flex;	-webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;	margin-top: 15px;
}
.switch-column .switch-container {	display: -webkit-box;	display: -ms-flexbox;	display: flex;	width: 40px;	height: 20px;	background-color: #555;
}
.switch {	background-color: #000;	width: 50%;	height: 100%;	border: 2px solid transparent;	background-origin: padding-box;	background-clip: padding-box;	cursor: pointer; -webkit-transition: margin 200ms; transition: margin 200ms;
}
.switch.on {	margin-left: 50%;
}
.switch-column .meta {	margin-top: 2.5px;	padding: 0 5px;
}
/* MODAL */
.modal {	position: fixed;	top: 0;	right: 0;	bottom: 0;	left: 0;	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;	background: rgba(50,50,50, 0.4);	opacity: 0;	z-index: -10;	pointer-events: none;
}
.modal.show {	opacity: 1;	pointer-events: all;	z-index: 100;
}
.modal-content {	position: relative;	padding: 0 30px;
}
.modal-content .win-img {	width: 100%;	height: auto;
}
.modal-content .close-btn {	position: absolute;	color: #fafafa;	right: 0;	top: -35px;	width: 30px;	height: auto;	cursor: pointer;
}
/* MEDIA QUERIES */
@media all and (max-width: 550px) {	.container {	width: 300px;	padding: 10px;	}	.game-button,	.game-controllers {	height: 150px;	}	.game-controllers {	border-width: 10px;	}	.game-button:nth-child(3) {	margin-top: 10px;	}	.game-button:nth-child(4) {	margin-top: 10px;	}	.hero {	text-align: center;	text-transform: lowercase;	font-size: 32px;	margin-top: 7.5px;	margin-bottom: 7.5px;	}	.button-group .column {	padding: 0 5px;	}	.btn {	width: 15px;	height: 15px;	border-radius: 50%;	border: 2px solid #444;	border-bottom: 3px solid #444;	box-shadow: 0 1px 0 rgba(0,0,0,0.4);	cursor: pointer;	margin: auto auto 4px auto;	}	.round {	padding: 2px 8px;	border: 1.5px solid #000;	border-radius: 4px;	font-size: 11px;	letter-spacing: 0.4px;	}	.strict-led {	position: absolute;	left: 50%;	top: -8px;	-webkit-transform: translateX(-50%); transform: translateX(-50%);	background-color: #4c0000;	width: 5px;	height: 5px;	border: 1px solid #444;	border-radius: 50%;	}	.game-controllers .meta {	font-size: 8px;	}	.switch-column .switch-container {	display: -ms-flexbox;	display: -webkit-box;	display: flex;	width: 24px;	height: 12px;	background-color: #555;	}	.switch-column .meta {	margin-top: 0;	padding: 0 5px;	}
}

Simon Game - Script Codes JS Codes

var audio = {	init: function () {	this.audioCtx = new (window.AudioContext || window.webkitAudioContext)();	this.gainNode = this.audioCtx.createGain();	this.gainNode.connect(this.audioCtx.destination);	this.gainNode.gain.value = 0.1;	this.frequencies = {	"GREEN": 415,	"RED": 310,	"YELLOW": 252,	"BLUE": 209,	"ERROR": 42	};	},	play: function (color) {	var frequency = this.frequencies[color];	var oscillator = this.audioCtx.createOscillator();	oscillator.connect(this.gainNode);	oscillator.type = "square";	oscillator.frequency.value = frequency;	oscillator.start(this.audioCtx.currentTime);	oscillator.stop(this.audioCtx.currentTime + 0.25);	}
};
var modal = {	init: function () {	this.el = document.querySelector(".modal");	this.closeBtn = document.querySelector(".close-btn");	this.closeBtn.addEventListener("click", this.hide.bind(this));	},	show: function () {	this.el.classList.add("show");	},	hide: function () {	this.el.classList.remove("show");	}
};
var game = {	init: function () {	this.isTurnedOn = false;	this.isPlaying = false;	this.isStrict = false;	this.isPlayerTurn = false;	this.playerClicks = 0;	this.playerInterval = null;	this.colors = ["GREEN", "RED", "YELLOW", "BLUE"];	this.sequence = [];	this.iteration;	this.round = 0;	this.speed = 1250;	this.cacheDom();	this.addEventListeners();	},	cacheDom: function () {	this.switch = document.querySelector(".switch");	this.startBtn = document.querySelector(".start-btn");	this.strictBtn = document.querySelector(".strict-btn");	this.strictLed = document.querySelector(".strict-led");	this.roundEl = document.querySelector(".round");	this.buttons = Array.prototype.slice.call(document.querySelectorAll(".game-button"));	},	addEventListeners: function () {	this.switch.addEventListener("click", this.toggleSwitch.bind(this));	this.startBtn.addEventListener("click", this.start.bind(this));	this.strictBtn.addEventListener("click", this.toggleStrict.bind(this));	this.buttons.forEach(function (button) {	button.addEventListener("click", this.playerClick.bind(this));	}.bind(this));	},	toggleSwitch: function () {	this.isTurnedOn = !this.isTurnedOn;	this.clear();	if (this.roundEl.textContent !== "--") {	this.roundEl.textContent = "--";	}	this.switch.classList.toggle("on");	this.roundEl.classList.toggle("on");	if (!this.isTurnedOn && this.isStrict) {	this.isStrict = false;	this.strictLed.classList.remove("on");	}	},	toggleStrict: function () {	if (this.isPlaying || !this.isTurnedOn) {	return;	}	this.strictLed.classList.toggle("on");	this.isStrict = !this.isStrict;	},	enableButtons: function () {	this.buttons.forEach(function (button) {	button.removeAttribute("disabled");	}.bind(this));	},	disableButtons: function () {	this.buttons.forEach(function (button) {	button.setAttribute("disabled", true);	}.bind(this));	},	playerTimer: function () {	this.wrongButton();	},	setPlayerTimer: function () {	this.playerInterval = setInterval(this.playerTimer.bind(this), this.speed * 6);	},	clearPlayerTimer: function () {	clearInterval(this.playerInterval);	},	clearPlayerClicks: function () {	this.playerClicks = 0;	},	playerClick: function (e) {	if (!this.isPlayerTurn || !this.isTurnedOn) {	return;	}	var idx = Array.prototype.indexOf.call(this.buttons, e.target);	var color = this.colors[idx];	if (this.sequence[this.playerClicks] !== color) {	// player clicks wrong button	this.wrongButton();	return;	}	audio.play(color);	this.clearPlayerTimer();	this.setPlayerTimer();	this.playerClicks += 1;	if (this.playerClicks === this.sequence.length) {	// player wins round	this.isPlayerTurn = false;	this.disableButtons();	this.newRound();	}	},	clear: function () {	this.isPlayerTurn = false;	this.isPlaying = false;	this.sequence = [];	clearTimeout(this.iteration);	this.round = 0;	this.clearPlayerTimer();	this.clearPlayerClicks();	this.disableButtons();	},	start: function () {	if (!this.isTurnedOn) {	return;	}	if (this.isPlaying) {	// restart	this.roundEl.textContent = "--";	this.clear();	this.isPlaying = false;	return;	}	this.isPlaying = true;	this.newRound();	},	flashError: function () {	this.roundEl.textContent = "!!";	},	wrongButton: function () {	this.isPlayerTurn = false;	this.disableButtons();	this.clearPlayerTimer();	this.clearPlayerClicks();	this.flashError();	audio.play("ERROR");	setTimeout(function () {	this.renderRound();	}.bind(this), this.speed);	if (this.isStrict) {	this.clear();	this.newRound();	} else {	this.iterateSeq();	}	},	renderRound: function () {	if (!this.isTurnedOn) {	return;	}	var round = this.round;	round = (round < 10) ? "0" + round : round;	this.roundEl.textContent = round;	},	setGameSpeed: function () {	if (this.round >= 13) {	this.speed = 500;	} else if (this.round >= 9) {	this.speed = 750;	} else if (this.round >= 5) {	this.speed = 1000;	} else {	this.speed = 1250;	}	},	newRound: function () {	if (this.round === 20) {	// game over	// player wins	modal.show();	this.toggleSwitch();	return;	}	this.clearPlayerTimer();	this.clearPlayerClicks();	this.round += 1;	this.setGameSpeed();	var color = this.colors[Math.floor(Math.random() * this.colors.length)];	this.sequence.push(color);	setTimeout(function () {	this.renderRound();	}.bind(this), this.speed);	this.iterateSeq();	},	iterateSeq: function (i) {	var i = i || 0;	if (i === this.sequence.length) {	// let player play	setTimeout(function () {	if (!this.isTurnedOn) {	return;	}	this.enableButtons();	this.isPlayerTurn = true;	this.setPlayerTimer();	}.bind(this), 500);	return;	}	this.iteration = setTimeout(function () {	var color = this.sequence[i];	var el = this.buttons[this.colors.indexOf(color)];	this.highlight(el);	audio.play(color);	this.iterateSeq(++i);	}.bind(this), this.speed);	},	highlight: function (el) {	el.classList.add("highlighted");	setTimeout(function () {	el.classList.remove("highlighted");	}, 250);	}
};
audio.init();
modal.init();
game.init();
Simon Game - Script Codes
Simon Game - Script Codes
Home Page Home
Developer Mihkel
Username Krokodill
Uploaded December 08, 2022
Rating 3
Size 4,975 Kb
Views 12,144
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!

Mihkel (Krokodill) Script Codes
Name
Pomodoro Timer
Local Weather
Dungeon Crawler
Form validation with jQuery
Random Quote Machine
React Markdown Preview
Wikipedia Viewer
Twitch Status 2.0
React Weather Broadcast
Tic-Tac-Toe
Create amazing sales emails 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!