Simon Record And Play Moves

This JavaScript program shows how to record player moves using the mousedown event to add moves to an array. The set of moves can then be played back via the onkeypress event by pressing the Enter key. Note that every click will be added as an additional event until the page is refreshed. The appearance is similar to the classic handheld Simon game.

SimonRecordMovesAndReplay.html

<!DOCTYPE html>
<html>
	<head>
		<title>XoaX.net's Javascript</title>
		<style type="text/css">
			.light {
				position:absolute;
				width:190px;
				height:190px;
				border:5px solid;
				border-color:#CCCCCC #444444 #222222 #888888;
				margin-left:-100px;
				margin-top:-100px;
			}
		</style>
		<script type="text/javascript">
			var iaPressed = null;
			var qaFlashLights = [FFlashOnLight0, FFlashOnLight1, FFlashOnLight2, FFlashOnLight3];
			function FInitialization() {
				iaPressed = new Array();
				document.onkeypress = function(e) {
					var iEnter = 13;
					if (e.keyCode == iEnter) {
						for (var i = 0; i < iaPressed.length; ++i) {
							setTimeout(qaFlashLights[iaPressed[i]], 1000*(i+1));
						}
					}
				}
			}
			function FFlashOnLight0() {
				FTurnOnLight0();
				setTimeout(FTurnOffLight0, 500);
			}
			function FPressLight0() {
				iaPressed.push(0);
				FTurnOnLight0();
			}
			function FTurnOnLight0() {
				document.getElementById("idLight0").style.backgroundColor = "red";
			}
			function FTurnOffLight0() {
				document.getElementById("idLight0").style.backgroundColor = "maroon";
			}
			function FFlashOnLight1() {
				FTurnOnLight1();
				setTimeout(FTurnOffLight1, 500);
			}
			function FPressLight1() {
				iaPressed.push(1);
				FTurnOnLight1();
			}
			function FTurnOnLight1() {
				document.getElementById("idLight1").style.backgroundColor = "lime";
			}
			function FTurnOffLight1() {
				document.getElementById("idLight1").style.backgroundColor = "green";
			}
			function FFlashOnLight2() {
				FTurnOnLight2();
				setTimeout(FTurnOffLight2, 500);
			}
			function FPressLight2() {
				iaPressed.push(2);
				FTurnOnLight2();
			}
			function FTurnOnLight2() {
				document.getElementById("idLight2").style.backgroundColor = "yellow";
			}
			function FTurnOffLight2() {
				document.getElementById("idLight2").style.backgroundColor = "olive";
			}
			function FFlashOnLight3() {
				FTurnOnLight3();
				setTimeout(FTurnOffLight3, 500);
			}
			function FPressLight3() {
				iaPressed.push(3);
				FTurnOnLight3();
			}
			function FTurnOnLight3() {
				document.getElementById("idLight3").style.backgroundColor = "skyblue";
			}
			function FTurnOffLight3() {
				document.getElementById("idLight3").style.backgroundColor = "navy";
			}
		</script>
	</head>
	<body onload="FInitialization()">
		<div style="position:absolute; background-color:#aaaaaa; width:500px; height:500px;">
			<div class="light" id="idLight0" style="background-color: maroon; left:25%; top:25%;"
				onmousedown="FPressLight0()" onmouseup="FTurnOffLight0()"></div>
			<div class="light" id="idLight1" style="background-color: green; left:75%; top:25%;"
				onmousedown="FPressLight1()" onmouseup="FTurnOffLight1()"></div>
			<div class="light" id="idLight2" style="background-color: olive; left:25%; top:75%;"
				onmousedown="FPressLight2()" onmouseup="FTurnOffLight2()"></div>
			<div class="light" id="idLight3" style="background-color: navy; left:75%; top:75%;"
				onmousedown="FPressLight3()" onmouseup="FTurnOffLight3()"></div>
		</div>
	</body>
</html>

Core JavaScript

Simon Record And Play Moves

SimonRecordMovesAndReplay.html

Output