ryanorsinger · February 28, 2015 21:29
diff --git a/simple-simon.html b/simple-simon.html
 <!DOCTYPE html>
 <html>
 <head>
    <script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
    <style>
    .board {
        position: relative;
        margin-bottom: 90px;
        margin-left: auto;
        margin-right: auto;
        height: 600px;
        width: 600px;
        text-align: right;
    }
    .square {
        height: 220px;
        width: 220px;
        float: left;
        border: 2px;
        border-style: solid;
        border-color: white;
        opacity: .3;
    }
    .red {
        background-color: red;
    }
    .blue {
        background-color: blue;
    }
    .green {
        background-color: green;
    }
    .yellow {
        background-color: yellow;
    }
    .control-button {
        font-weight: bold;
        width: 90px;
        height: 60px;
    }

    </style>
 </head>
 <body>
    <div class="board">
        <h3>Welcome to Simon</h3>
        <div id="0" class="red square"></div>
        <div id="1" class="green square"></div>
        <div id="2" class="blue square"></div>
        <div id="3" class="yellow square"></div>
        <button id="start" class="control-button">Start</button>
        <button id="round" class="control-button">Round: 0</button>
        <button id="stop" class="control-button">Stop</button>
    </div>
    <script>
        var userSequence = [];
        var simonSequence = [];

        var squares = document.getElementsByClassName('square');

        // The start function resets Simon's sequence and calls the simonMove() function.
        function start() {
            simonSequence = [];
            simonMove();
        }

        // Resets userSequence, calls addRandomSquareToSequence, and begins playback.
        function simonMove() {
            userSequence = [];
            addRandomSquareToSequence();
            playback();
        }

        // Generates a random number between 0 and 3 to match up with the array index of var squares.
        // Pushes the id of the square (which is the same as its index) onto the simonSequence array.
        function addRandomSquareToSequence() {
            var random = Math.floor(Math.random() * 4);
            simonSequence.push(squares[random].id);
        }

        // Initiates playback of Simon's sequence.
        function playback() {

            disableInput();

            // update score
            document.getElementById('round').innerText = "Round: " + simonSequence.length;

            // create the counter variable
            var i = 0;

            // Playback each simon selection in simon's sequence.
            var intervalId = setInterval(function () {

                lightUp(document.getElementById(simonSequence[i]));

                i++;

                // check to see if the counter is equal to the game sequence length
                if (i >= simonSequence.length) {

                    clearInterval(intervalId);

                    enableInput();
                }
            }, 1000);
        }

        function lightUp(element) {
            element.style.opacity = "1";
            var fadeoutTimerId = setTimeout(function() {
                element.style.opacity = "0.3";
            }, 600);
        }

        function compareSequences() {
            var sequenceError = false;

            // loop through the input sequence and perform the following:
            // check it the game sequence and input sequence match for a given offset
            // if they don't match set your error status variable to true and get out of the loop
            for (var i = 0; i < userSequence.length; i++) {
              if (simonSequence[i] == undefined || simonSequence[i] != userSequence[i]) {
                sequenceError = true;
                break;
              }
            }

            // check if there is an error
            // if there is, call gameOver()
            // otherwise, check if the input sequence is the same length as the game sequence
            // if it is, the user has completed the sequence, so clear the input sequence and call simonMove()
            if (sequenceError) {
              gameOver();
            } else if (userSequence.length == simonSequence.length) {
              simonMove();
            }
        }

        function gameOver() {
            // hard reload the page.
            location.reload(true);

            confirm("Game over. Play again?");
            if(confirm) {
                start();
            }
        }

        function stop() {
            alert('User stopped the game');
            location.reload(true);
        }

        function userClick() {
            var userChoice = this.id;

            lightUp(this);

            userSequence.push(userChoice);

            compareSequences();
        }

        function enableInput() {
            document.getElementById('0').addEventListener('click', userClick, false);
            document.getElementById('1').addEventListener('click', userClick, false);
            document.getElementById('2').addEventListener('click', userClick, false);
            document.getElementById('3').addEventListener('click', userClick, false);
        }

        function disableInput() {
            document.getElementById('0').removeEventListener('click', userClick, false);
            document.getElementById('1').removeEventListener('click', userClick, false);
            document.getElementById('2').removeEventListener('click', userClick, false);
            document.getElementById('3').removeEventListener('click', userClick, false);
        }

        document.getElementById('start').addEventListener('click', start, false);
        document.getElementById('stop').addEventListener('click', stop, false);

    </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
	<style>
	.board {
	position: relative;
	margin-bottom: 90px;
	margin-left: auto;
	margin-right: auto;
	height: 600px;
	width: 600px;
	text-align: right;
	}
	.square {
	height: 220px;
	width: 220px;
	float: left;
	border: 2px;
	border-style: solid;
	border-color: white;
	opacity: .3;
	}
	.red {
	background-color: red;
	}
	.blue {
	background-color: blue;
	}
	.green {
	background-color: green;
	}
	.yellow {
	background-color: yellow;
	}
	.control-button {
	font-weight: bold;
	width: 90px;
	height: 60px;
	}

	</style>
	</head>
	<body>
	<div class="board">
	<h3>Welcome to Simon</h3>
	<div id="0" class="red square"></div>
	<div id="1" class="green square"></div>
	<div id="2" class="blue square"></div>
	<div id="3" class="yellow square"></div>
	<button id="start" class="control-button">Start</button>
	<button id="round" class="control-button">Round: 0</button>
	<button id="stop" class="control-button">Stop</button>
	</div>
	<script>
	var userSequence = [];
	var simonSequence = [];

	var squares = document.getElementsByClassName('square');

	// The start function resets Simon's sequence and calls the simonMove() function.
	function start() {
	simonSequence = [];
	simonMove();
	}

	// Resets userSequence, calls addRandomSquareToSequence, and begins playback.
	function simonMove() {
	userSequence = [];
	addRandomSquareToSequence();
	playback();
	}

	// Generates a random number between 0 and 3 to match up with the array index of var squares.
	// Pushes the id of the square (which is the same as its index) onto the simonSequence array.
	function addRandomSquareToSequence() {
	var random = Math.floor(Math.random() * 4);
	simonSequence.push(squares[random].id);
	}

	// Initiates playback of Simon's sequence.
	function playback() {

	disableInput();

	// update score
	document.getElementById('round').innerText = "Round: " + simonSequence.length;

	// create the counter variable
	var i = 0;

	// Playback each simon selection in simon's sequence.
	var intervalId = setInterval(function () {

	lightUp(document.getElementById(simonSequence[i]));

	i++;

	// check to see if the counter is equal to the game sequence length
	if (i >= simonSequence.length) {

	clearInterval(intervalId);

	enableInput();
	}
	}, 1000);
	}

	function lightUp(element) {
	element.style.opacity = "1";
	var fadeoutTimerId = setTimeout(function() {
	element.style.opacity = "0.3";
	}, 600);
	}

	function compareSequences() {
	var sequenceError = false;

	// loop through the input sequence and perform the following:
	// check it the game sequence and input sequence match for a given offset
	// if they don't match set your error status variable to true and get out of the loop
	for (var i = 0; i < userSequence.length; i++) {
	if (simonSequence[i] == undefined \|\| simonSequence[i] != userSequence[i]) {
	sequenceError = true;
	break;
	}
	}

	// check if there is an error
	// if there is, call gameOver()
	// otherwise, check if the input sequence is the same length as the game sequence
	// if it is, the user has completed the sequence, so clear the input sequence and call simonMove()
	if (sequenceError) {
	gameOver();
	} else if (userSequence.length == simonSequence.length) {
	simonMove();
	}
	}

	function gameOver() {
	// hard reload the page.
	location.reload(true);

	confirm("Game over. Play again?");
	if(confirm) {
	start();
	}
	}

	function stop() {
	alert('User stopped the game');
	location.reload(true);
	}

	function userClick() {
	var userChoice = this.id;

	lightUp(this);

	userSequence.push(userChoice);

	compareSequences();
	}

	function enableInput() {
	document.getElementById('0').addEventListener('click', userClick, false);
	document.getElementById('1').addEventListener('click', userClick, false);
	document.getElementById('2').addEventListener('click', userClick, false);
	document.getElementById('3').addEventListener('click', userClick, false);
	}

	function disableInput() {
	document.getElementById('0').removeEventListener('click', userClick, false);
	document.getElementById('1').removeEventListener('click', userClick, false);
	document.getElementById('2').removeEventListener('click', userClick, false);
	document.getElementById('3').removeEventListener('click', userClick, false);
	}

	document.getElementById('start').addEventListener('click', start, false);
	document.getElementById('stop').addEventListener('click', stop, false);

	</script>
	</body>
	</html>