Simon Says

Developer
Tyler Moeller
Size
7,086 Kb
Views
16,192
  1. Simon Says Previews
  2. Simon Says HTML Codes
  3. Simon Says CSS Codes
  4. Simon Says JS Codes

How do I make an simon says?

This was developed for the freeCodeCamp Advanced Front-End Development Project: Build a Simon Game. Details: https://www.freecodecamp.com/challenges/build-a-simon-game. What is a simon says? How do you make a simon says? This script and codes were developed by Tyler Moeller on 06 November 2022, Sunday.

Simon Says Previews
IQ Test

Simon Says - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Simon Says</title> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta property="og:locale" content="en_US">
<meta property="og:type" content="website">
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
<link rel="preconnect" href="https://s3.amazonaws.com/freecodecamp">
<link rel="prefetch" href="https://s3.amazonaws.com/freecodecamp/simonSound1.mp3">
<link rel="prefetch" href="https://s3.amazonaws.com/freecodecamp/simonSound2.mp3">
<link rel="prefetch" href="https://s3.amazonaws.com/freecodecamp/simonSound3.mp3">
<link rel="prefetch" href="https://s3.amazonaws.com/freecodecamp/simonSound4.mp3">
<link rel="stylesheet prefetch" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet prefetch" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!-- **** *** *** *** *** **** * Copyright (C) 2016 Tyler Moeller. All rights reserved. * * All trademarks, product names, and logos on this site * * are the property of their respective owners. * **** *** *** *** *** ****
Assignment Details: - Developed for the freeCodeCamp advanced front-end development project: Build a Simon Game - Details: https://www.freecodecamp.com/challenges/build-a-simon-game
Requirements for this assignment: - Objective: Build a CodePen.io app that is functionally similar to this: https://codepen.io/FreeCodeCamp/full/obYBjE. - Rule #1: Don't look at the example project's code. Figure it out for yourself. - Rule #2: Fulfill the below user stories. Use whichever libraries or APIs you need. Give it your own personal style. - 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. - User Story: I hear a sound that corresponds to each button both when the series of button presses plays, and when I personally press a button. - User Story: If I press the wrong button, I am notified that I have done so, and that series of button presses starts again to remind me of the pattern so I can try again. - User Story: I can see how many steps are in the current series of button presses. - User Story: If I want to restart, I can hit a button to do so, and the game will return to a single step. - User Story: I can play in strict mode where if I get a button press wrong, it notifies me that I have done so, and the game restarts at a new random series of button presses. - User Story: I can win the game by getting a series of 20 steps correct. I am notified of my victory, then the game starts over.
Assignment Completed. v1.0 03/17/2016: - Responsive deisgn using JavaScript, jQuery, jQuery Mobile, HTML5, and Bootstrap + Font Awesome CSS libraries. - Mobile view, giving better touch-enabled access to game controls. - All user stories fulfilled in desktop environments. Mobile works too, but has .mp3 file caching issues. - Due to performance issues with remotely-hosted .mp3 files, this app has also been deployed to a location where resources can be loaded locally: https://tylermoeller.github.io/simonsays. Mobile .mp3 file playback	will not work until after the first time a user presses a color button in the game. Investigation ongoing.
To Do (not required for this assignment): - Cancel all animation queues and completely turn off Simon when power is switched off or when start button is pressed.	Power switch and the start button both ignore ongoing animation. - Investigate .mp3 file caching on mobile. Can't play on mobile because of .mp3 file transfer delays. -->
<audio id="greenSound" preload="auto" src="https://tylermoeller.github.io/simonsays/audio/simonSound1.mp3" type="audio/mpeg"></audio>
<audio id="redSound" preload="auto" src="https://tylermoeller.github.io/simonsays/audio/simonSound2.mp3" type="audio/mpeg"></audio>
<audio id="yellowSound" preload="auto" src="https://tylermoeller.github.io/simonsays/audio/simonSound3.mp3" type="audio/mpeg"></audio>
<audio id="blueSound" preload="auto" src="https://tylermoeller.github.io/simonsays/audio/simonSound4.mp3" type="audio/mpeg"></audio>
<main>	<div class="container main">	<div class="gameboard">	<div class="color-buttons">	<div class="top">	<span class="color-button" id="green"></span>	<span class="color-button" id="red"></span>	</div>	<div class="bottom">	<span class="color-button" id="yellow"></span>	<span class="color-button" id="blue"></span>	</div>	</div>	<div class="center">	<p class="title">simon<sup class="trademark">&reg;</sup></p>	<div class="mobile-wrapper row">	<div class="center-controls">	<div class="score-display">	<p class="score">--</p>	<p class="control-label">Score</p>	</div>	<div class="btn-control text-center">	<div class="btn-game btn-start" id="start"></div>	<p class="control-label">Start</p>	</div>	<div class="btn-control text-center">	<div class="btn-game btn-strict" id="strict"></div>	<p class="control-label strict-label">Strict</p>	</div>	</div>	<div class="power">	<p class="control-label">OFF</p>	<div class="power-toggle-box text-left">	<div class="power-toggle"></div>	</div>	<p class="control-label">On</p>	<div class="warning text-center"><p>Sorry...Simon doesn't work reliably on mobile yet.</p></div>	</div>	</div>	</div>	</div>	</div>
</main>
<footer class="footer">	<div class="container-fluid text-center">	<div class="footer-text text-muted row">Copyright &copy;	<script>	document.write(new Date().getFullYear());	</script> Tyler Moeller. All rights reserved. Developed for the freeCodeCamp Front-end Development Challenge: <a href="https://www.freecodecamp.com/challenges/build-a-simon-game" target="_blank">Build a Simon Game</a>.</div>	<div class="footer-logos row">	<a href="https://twitter.com/Tyler_Moeller" target="_blank"><i class="fa fa-twitter"></i></a>	<a href="https://www.linkedin.com/in/tylermoeller" target="_blank"><i class="fa fa-linkedin"></i></a>	<a href="https://github.com/TylerMoeller" target="_blank"><i class="fa fa-github"></i></a>	<a href="https://freecodecamp.com/tylermoeller" target="_blank"><i class="fa fa-fire"></i></a>	<a href="https://codepen.io/TylerMoeller/pens/public" target="_blank"><i class="fa fa-codepen"></i></a>	<a href="https://tylermoeller.net" target="_blank"><i class="fa fa-wordpress"></i></a>	</div>	</div>
</footer>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> <script src="js/index.js"></script>
</body>
</html>

Simon Says - Script Codes CSS Codes

@font-face { font-family: 'alarm-clock'; font-style: normal; font-weight: normal;	src: url('https://tylermoeller.github.io/js-calculator/assets/font/alarm-clock.ttf.woff') format('woff'), url('https://tylermoeller.github.io/js-calculator/assets/font/alarm-clock.ttf.svg#alarm-clock') format('svg'), url('https://tylermoeller.github.io/js-calculator/assets/font/alarm-clock.ttf.eot'), url('https://tylermoeller.github.io/js-calculator/assets/font/alarm-clock.ttf.eot?#iefix') format('embedded-opentype');
}
body {	background-color: #222222; background-image: url('https://tylermoeller.github.io/simonsays/img/bamboo.jpg');	display: flex;	min-height: 100vh;	flex-direction: column;	font-size: 16px;	-webkit-user-select: none;	-moz-user-select: -moz-none;	-ms-user-select: none;	user-select: none;
}
main {	flex: 1 0 auto;
}
.ui-page-active:focus { outline: none;
}
@media (min-width:768px) {	.main {	margin-top: 5%;	}
}
.main {	margin-bottom: .5em;
}
.disabled {	pointer-events: none;
}
.gameboard {	background-color: #222222;	border: 1.6rem solid #222222;	border-radius: 50%;	left: 0;	margin: .25em auto;	max-width: 550px;	min-width: 300px;	text-align: center;	top: 0;	-moz-transform: scale(1, .88);	-ms-transform: scale(1, .88);	-o-transform: scale(1, .88);	-webkit-transform: scale(1, .88);	transform: scale(1, .88);	width: 100%;
}
.bottom {	margin-top: -1rem;
}
.color-button {	border: .8rem solid #333333;	display: inline-block;	margin: 2% auto 0 auto;	padding: 0 0 49% 0;	width: 49%;
}
.active {	opacity: 1!important;
}
#blue {	background-color: blue;	border-bottom-right-radius: 100%;	opacity: .6;
}
#yellow {	background-color: yellow;	border-bottom-left-radius: 100%;	opacity: .6;
}
#green {	background-color: green;	border-top-left-radius: 100%;	opacity: .6;
}
#red {	background-color: red;	border-top-right-radius: 100%;	opacity: .6;
}
.center {	background-color: #e5e5e5;	border: .8rem solid #222222;	border-radius: 100%;	height: 49%;	left: 25%;	position: absolute;	top: 25%;	width: 49%;
}
.title {	font-family: Impact, Charcoal, sans-serif;	font-size: 2.4em;	font-weight: bold;	margin-top: 7%;
}
.trademark {	font-size: .5em;	font-weight: normal;
}
.center-controls {	margin-top: 7%;
}
.center-controls div {	display: inline-block;
}
.color-button:active {	transform: scale(1.02);
}
.score {	background-color: black;	border: 4px solid #222222;	border-radius: 15%;	color: red;	cursor: default;	font-family: 'alarm-clock', sans-serif;	font-size: 1.5em;	height: 2em;	margin-top: .5em;	position: relative;	text-align: center;	top: 7px;	width: 2em;
}
.btn-control {	width: 20%;
}
.btn-game {	background-color: yellow;	border: 4px solid #000000;	border-radius: 100%;	box-shadow: 0 0 .4em #222222;	cursor: pointer;	height: 1.6em;	width: 1.5em;
}
.btn-game:active {	background-color: red;	transform: scale(0.9);
}
.control-label {	cursor: default;	display: inline-block;	font-size: 0.8em;	margin-top: .5em;	text-align: center;	text-transform: uppercase;
}
.power-toggle-box {	background-color: #222222;	border-radius: 5%;	cursor: pointer;	display: inline-block;	height: 1.25em;	vertical-align: text-top;	width: 2.5em;
}
.power-toggle {	background-color: blue;	border: 1px solid #222222;	display: inline-block;	height: 1em;	margin: 0 2px;	vertical-align: text-top;	width: 1em;
}
.power-toggle-box:active {	transform: scale(1.03);
}
.warning {	display: none;
}
/* Mobile View */
@media screen and (max-width: 500px) {	.warning {	display: inline;	font-weight: bold;	position: relative;	top: 1.5em;	}	.gameboard {	width: 300px;	}	.gameboard,	.power {	margin: 8.6em auto 0 auto;	}	.score {	margin: .25em .25em .25em 0;	width: 90%;	}	.title {	font-size: 2em;	padding-top: 1.1em;	}	.mobile-wrapper {	background-color: #ffffff;	background-color: rgba(255, 255, 255, .1);	border: 1px solid #222222;	border-radius: 1em;	height: 8em;	left: 10px;	margin: 0 auto;	position: fixed;	top: -190px;	width: 15em;	z-index: 1;	}	.center-controls {	margin: 0;	}	.btn-control,	.control-label {	margin: 0 .25em;	text-align: right;	}	.btn-game {	margin-right: .75em;	}	.power {	position: relative;	top: -8.5em;	}
}
/* footer formatting */
.footer {	background-color: #222222;	border-top: 1px solid black;	font-family: arial;	font-size: 12px;	font-weight: 300;	margin-top: 4em;	min-width: 300px;	padding: 1em 1em 0 1em;	width: 100%;
}
.footer-logos {	font-size: 14px;	margin-top: -1em;
}
.footer-logos a {	text-decoration: none;
}
.footer-logos i {	border: 1px solid #646464;	border: 1px solid rgba(100, 100, 100, .3);	border-radius: 25%;	color: #777777;	margin: 0 0 1em 1em;	padding-top: .25em;	text-align: center;	vertical-align: -1.5em;
}
.footer-logos .genericon {	height: 1.6em;	width: 1.6em;
}
.footer-logos .fa {	height: 1.75em;	width: 1.75em;
}
.footer .container-fluid {	max-width: 480px;
}
/* jQuery Mobile */
.ui-loader {	display: none;
}

Simon Says - Script Codes JS Codes

$(document).ready(function () { $('.center-controls').addClass('disabled'); $('.color-button').addClass('disabled'); gameMode = 'normal';	// Mobile browsers have audio caching issues, warn the user. if (typeof window.orientation !== 'undefined')	alert('Sorry...due to audio caching issues, this game is not (fully) supported on mobile devices yet.');
});
// Default game settings
function resetGame() { turnCount = 0, computerMoves = [], humanMoves = []; $('.main').removeAttr('style'); // remove jQuery animation styles $('.score').text('--');
}
// Power Switch
$('.power-toggle-box').click(() => { resetGame(); if ($('.power-toggle-box').hasClass('text-left')) { $('.power-toggle-box').removeClass('text-left'); $('.power-toggle-box').addClass('text-right'); $('.center-controls').removeClass('disabled'); } else { $('.power-toggle-box').removeClass('text-right'); $('.power-toggle-box').addClass('text-left'); $('.center-controls').addClass('disabled'); $('.color-button').addClass('disabled'); $('#strict').css('background-color', 'yellow'); }
});
// Start Button: Reset the game and play an opening animation sequence
$('#start').click(() => { resetGame(); var delay = 250, colors = ['green', 'red', 'blue', 'yellow', 'green', 'yellow', 'red', 'blue', 'green', 'red', 'green', 'yellow', 'blue', 'yellow', 'green', 'blue', 'red', 'yellow', ]; $('.color-button').removeClass('disabled'); playAnimation(colors, delay); $('.score').delay((colors.length * (delay + 100))) .fadeOut(delay).fadeIn(delay).fadeOut(delay).fadeIn(delay) .promise() .done(() => { $('.score').text('0'); computerMove(); });
});
// Strict Button - end game on first error or repeat required sequence
$('#strict').click(e => {	$this = e.currentTarget if ($this.css('background-color') === 'rgb(255, 255, 0)') { $this.css('background-color', 'red'); gameMode = 'strict'; } else { $this.css('background-color', 'yellow'); gameMode = 'normal'; }
});
$('.color-button').on('mousedown', function (e) { if (humanMoves.length >= turnCount) { return; // prevent accidental double-click } else { $(this).addClass('active'); $('#' + this.id + 'Sound').get(0).play(); }
}).on('mouseup ', function (e) { if (humanMoves.length >= turnCount) { return; } $(this).removeClass('active'); humanMoves.push(this.id); if (computerMoves[clickCount] !== humanMoves[clickCount]) { clickCount = 0; if (gameMode === 'strict') { $('.score').text(':('); return; } else { $('.score').text('!!') .fadeIn(200).fadeOut(200).fadeIn(200).fadeOut(200).fadeIn(200) .promise() .done(function () { $('.score').text(((turnCount > 9) ? turnCount : '0' + turnCount)); humanMoves = []; setTimeout(playAnimation(computerMoves, timeDelay), 1000); }); return; } } clickCount++; if (humanMoves.length === turnCount) { setTimeout(computerMove, 1000); // 1 second delay before computer plays }
});
// Highlight colors played by the computer
function computerClick(color, delay) { $('.color-button').addClass('disabled'); $('#' + color + 'Sound').get(0).play(); return $('#' + color).addClass('active') .delay(delay, '_fx') .dequeue('_fx') .promise('_fx') .done(function () { $('#' + color).removeClass('active'); $('.color-button').removeClass('disabled'); });
}
// Takes an array of colors and a delay time to dynamically build
// a jQuery .queue, calling computerClick() to animate one element at a time.
function playAnimation(colors, delay) { $({}).queue('_fx', $.map(colors, function (color) { return function (next) { computerClick(color, delay).then(function () { return $({}).delay(100, '_fx').dequeue('_fx').promise('_fx'); }).then(next); }; })).dequeue('_fx');
}
// Computer move: Checks for win, increases speed every five turns
// and shows the human what moves they will need to repeat.
function computerMove() { // Check for Win if (turnCount === 20) { $('.score').text(':)'); $('.main').show('slow').rotate(1080); return; } // Increase game speed by 250ms per move every 5 turns if (turnCount < 20 && turnCount % 5 === 0) { timeDelay = 1000 - (250 * turnCount / 5); } // Pick a random new color for this turn and reset the human moves from last turn var colors = ['green', 'red', 'blue', 'yellow']; var randomColor = colors[Math.floor(Math.random() * colors.length)]; humanMoves = []; clickCount = 0; // Play the colors and update the turnCount / score computerMoves.push(randomColor); playAnimation(computerMoves, timeDelay); turnCount++; $('.score').text(((turnCount > 9) ? turnCount : '0' + turnCount));
}
// Rotation animation used for the game board
$.fn.rotate = function (degrees, step, current) { $self = $(this); current = current || 0, step = step || 5, current += step; $self.css({ '-webkit-transform': 'rotate(' + current + 'deg)', '-moz-transform': 'rotate(' + current + 'deg)', '-ms-transform': 'rotate(' + current + 'deg)', transform: 'rotate(' + current + 'deg)', }); if (current != degrees) { setTimeout(function () { $self.rotate(degrees, step, current); }, 5); }
};
Simon Says - Script Codes
Simon Says - Script Codes
Home Page Home
Developer Tyler Moeller
Username TylerMoeller
Uploaded November 06, 2022
Rating 3
Size 7,086 Kb
Views 16,192
Do you need developer help for Simon Says?

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!

Tyler Moeller (TylerMoeller) Script Codes
Name
JavaScript Calculator
Local Weather App v1.0
React Markdown Previewer
Tic Tac Toe
Random Quote Machine
CSS Waves
Navigator.geolocation fallback to ip-based location
Wikipedia Search Engine
Show the Local Weather v2
Social Media Icons Animated on Hover
Create amazing art & images 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!