Simon Display Random Moves

This JavaScript program shows how to generate random numbers to similate 10 random moves by the computer and light up the corresponding button. The appearance is similar to the classic handheld Simon game.

SimonDisplayRandomMoves.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">
			function FInitialization() {
				var qaFlashLights = [FFlashOnLight0, FFlashOnLight1, FFlashOnLight2, FFlashOnLight3];
				var iMoveCount = 10;
				var iaMove = new Array(iMoveCount);
				for (var i = 0; i < iMoveCount; ++i) {
					iaMove[i] = Math.floor((Math.random() * 4));
				}
				for (var i = 0; i < iMoveCount; ++i) {
					setTimeout(qaFlashLights[iaMove[i]], 1000*(i + 1));
				}
			}
			function FFlashOnLight0() {
				FTurnOnLight0();
				setTimeout(FTurnOffLight0, 500);
			}
			function FTurnOnLight0() {
				document.getElementById("idLight0").style.backgroundColor = "red";
			}
			function FTurnOffLight0() {
				document.getElementById("idLight0").style.backgroundColor = "maroon";
			}
			function FFlashOnLight1() {
				FTurnOnLight1();
				setTimeout(FTurnOffLight1, 500);
			}
			function FTurnOnLight1() {
				document.getElementById("idLight1").style.backgroundColor = "lime";
			}
			function FTurnOffLight1() {
				document.getElementById("idLight1").style.backgroundColor = "green";
			}
			function FFlashOnLight2() {
				FTurnOnLight2();
				setTimeout(FTurnOffLight2, 500);
			}
			function FTurnOnLight2() {
				document.getElementById("idLight2").style.backgroundColor = "yellow";
			}
			function FTurnOffLight2() {
				document.getElementById("idLight2").style.backgroundColor = "olive";
			}
			function FFlashOnLight3() {
				FTurnOnLight3();
				setTimeout(FTurnOffLight3, 500);
			}
			function FTurnOnLight3() {
				document.getElementById("idLight3").style.backgroundColor = "blue";
			}
			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%;"></div>
			<div class="light" id="idLight1" style="background-color: green; left:75%; top:25%;"></div>
			<div class="light" id="idLight2" style="background-color: olive; left:25%; top:75%;"></div>
			<div class="light" id="idLight3" style="background-color: navy; left:75%; top:75%;"></div>
		</div>
	</body>
</html>

Core JavaScript

Simon Display Random Moves

SimonDisplayRandomMoves.html

Output