8 – Simon Says – comparing sequences | Programming and Problem Solving

We finish the DOM Simon Says game.

Class work

This week we are going to finish the game. We need to record the sequence that the user plays and compare it with the original sequence. Also, we will apply the style to the page using CSS.

Topics for today

the <form> html tag

Final result: Simon says (click on the image to play it)

Click the image to play

Workfiles

Download in class: simon-says.zip

Individual files:

V3 – Sequence comparison

simon_3.html: the only change is to point to the new js script

<!DOCTYPE html>
<html lang="en-US">
    <head>
        <meta charset="UTF-8">
        <!-- <link rel="stylesheet" type="text/css" href="style.css" /> -->
        <title>Simon Says</title>
    </head>

    <body>
        <div id = "container">
            <div id = "header">
                <h1 id = "title">Record sequence</h1>
            </div>

            <div id = "game">
                <img id="lb_0" onclick="lb_click(0)" src="images/lb_off.png" width="100" height="188">
                <img id="lb_1" onclick="lb_click(1)" src="images/lb_off.png" width="100" height="188">
                <img id="lb_2" onclick="lb_click(2)" src="images/lb_off.png" width="100" height="188">
                <img id="lb_3" onclick="lb_click(3)" src="images/lb_off.png" width="100" height="188">
                <img id="lb_4" onclick="lb_click(4)" src="images/lb_off.png" width="100" height="188">
            </div>

            <div id = "footer">
                <button id="btn_0" type="button" onclick="play_game()">Play!</button>
            </div>
        </div>
        <script type="text/javascript" src="lib3.js"></script>
    </body>
</html>

<!DOCTYPE html>

<head>

<title>Simon Says</title>

</head>

<body>

<h1 id = "title">Record sequence</h1>

</div>

</div>

</div>

</body>

</html>

lib3.js: comparing the input sequence with the stored sequence

var SS = {};  // Global object container

function init_images() {
    SS.img_off = "images/lb_off.png";

    SS.img_on = [ "images/lb_yellow.png",
                  "images/lb_blue.png",
                  "images/lb_green.png",
                  "images/lb_red.png",
                  "images/lb_purple.png"];

    SS.n = SS.img_on.length;

    SS.img_delay = 800;  
}

function init_sounds() {
    var snd_file = [ "sounds/f_sharp.wav",
                     "sounds/g_sharp.wav",
                     "sounds/a_sharp.wav",
                     "sounds/c_sharp.wav",
                     "sounds/d_sharp.wav"]
    var n = SS.n;  // dereference

    SS.lb_snd = new Array(n);
    for (var i = 0; i < n; i++ ) {
        SS.lb_snd[i] = new Audio( snd_file[i] );
    }

    SS.success_snd = new Audio("sounds/applause.wav");
    SS.failure_snd = new Audio("sounds/aww.wav");
}

function init_seq() {
    SS.max_notes = 4;

    SS.seq = new Array(SS.max_notes);
    for (var i = 0; i < SS.max_notes; i++) {
        SS.seq[i] = Math.floor(Math.random() * SS.n);
    }

    SS.seq_delay = SS.img_delay + 160;
    SS.interval_id = 0;
    SS.notes_played;
    SS.notes_clicked;
    SS.seq_length;
}

function init_binds(){
    document.addEventListener("click", onClick);
}

function turn_lb_on(i, image) {
    SS.lb_snd[i].load();
    SS.lb_snd[i].play();
    image.src = SS.img_on[i];
}

function turn_lb_off(image) {
    image.src = SS.img_off;
}

function lb_click(i) {
    var img_id = "lb_" + String(i);
    var image = document.getElementById(img_id);

    turn_lb_on(i, image);
    setTimeout( function(){turn_lb_off(image)}, SS.img_delay);
}

function play_one(){
    if (SS.notes_played < SS.seq_length) {
        lb_click( SS.seq[SS.notes_played] );
        SS.notes_played = SS.notes_played + 1;
    }
    else {
        clearInterval(SS.interval_id);
    }
}

function play_seq(){
    SS.notes_played = 0;
    SS.notes_clicked = 0;
    SS.interval_id = setInterval( function(){play_one()}, SS.seq_delay);
}

function game_over(player_won){
    document.removeEventListener('click', onClick);
    if (player_won) {
        SS.success_snd.play();
    }
    else {
        SS.failure_snd.play();
    }
}

function click_on_image(evt){
    var target_id;

    target_id = evt.target.id;
    if (null == target_id.match("lb_")) {
        return -1;
    }

    for (var i = 0; i < SS.n; i++) {
        lb_id = "lb_" + String(i);
        if (target_id == lb_id) {
            return i;
        }
    }
}

function check_seq_finished() {
    if (SS.notes_clicked != SS.seq_length) {
        return;
    }

    if (SS.notes_clicked < SS.max_notes) {
       SS.seq_length = SS.seq_length + 1;
       play_seq();
    }
    else {/* player won */
       game_over(true);
    }
}

//    if (SS.notes_played == SS.seq_length && SS.notes_played == SS.max_notes) {

function onClick(evt) {
    i = click_on_image(evt);
    if (i == -1) {
        return;
    }

    P("i = " + String(i));
    P("notes_clicked= " + String(SS.notes_clicked));
    lb_click(i);

    SS.notes_clicked = SS.notes_clicked + 1;
    if ( SS.seq[SS.notes_clicked - 1] == i) {
        check_seq_finished();
    } 
    else {     /* player clicked the wrong note */
        game_over(false);
    }
}

function play_game(i) {
    init_seq();
    init_binds();
    P(SS.seq);
    SS.seq_length = 1;
    play_seq();
}

window.onload = function() {
    init_images();
    init_sounds();
}

function P(i){
    console.log(i);
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

var SS = {}; // Global object container

function init_images() {

SS.img_off = "images/lb_off.png";

SS.img_on = [ "images/lb_yellow.png",

"images/lb_blue.png",

"images/lb_green.png",

"images/lb_red.png",

"images/lb_purple.png"];

SS.n = SS.img_on.length;

SS.img_delay = 800;

}

function init_sounds() {

var snd_file = [ "sounds/f_sharp.wav",

"sounds/g_sharp.wav",

"sounds/a_sharp.wav",

"sounds/c_sharp.wav",

"sounds/d_sharp.wav"]

var n = SS.n; // dereference

SS.lb_snd = new Array(n);

for (var i = 0; i < n; i++ ) {

SS.lb_snd[i] = new Audio( snd_file[i] );

}

SS.success_snd = new Audio("sounds/applause.wav");

SS.failure_snd = new Audio("sounds/aww.wav");

}

function init_seq() {

SS.max_notes = 4;

SS.seq = new Array(SS.max_notes);

for (var i = 0; i < SS.max_notes; i++) {

SS.seq[i] = Math.floor(Math.random() * SS.n);

}

SS.seq_delay = SS.img_delay + 160;

SS.interval_id = 0;

SS.notes_played;

SS.notes_clicked;

SS.seq_length;

}

function init_binds(){

document.addEventListener("click", onClick);

}

function turn_lb_on(i, image) {

SS.lb_snd[i].load();

SS.lb_snd[i].play();

image.src = SS.img_on[i];

}

function turn_lb_off(image) {

image.src = SS.img_off;

}

function lb_click(i) {

var img_id = "lb_" + String(i);

var image = document.getElementById(img_id);

turn_lb_on(i, image);

setTimeout( function(){turn_lb_off(image)}, SS.img_delay);

}

function play_one(){

if (SS.notes_played < SS.seq_length) {

lb_click( SS.seq[SS.notes_played] );

SS.notes_played = SS.notes_played + 1;

}

else {

clearInterval(SS.interval_id);

}

function play_seq(){

SS.notes_played = 0;

SS.notes_clicked = 0;

SS.interval_id = setInterval( function(){play_one()}, SS.seq_delay);

}

function game_over(player_won){

document.removeEventListener('click', onClick);

if (player_won) {

SS.success_snd.play();

}

else {

SS.failure_snd.play();

}

function click_on_image(evt){

var target_id;

target_id = evt.target.id;

if (null == target_id.match("lb_")) {

return -1;

}

for (var i = 0; i < SS.n; i++) {

lb_id = "lb_" + String(i);

if (target_id == lb_id) {

return i;

}

function check_seq_finished() {

if (SS.notes_clicked != SS.seq_length) {

return;

}

if (SS.notes_clicked < SS.max_notes) {

SS.seq_length = SS.seq_length + 1;

play_seq();

}

else {/* player won */

game_over(true);

}

// if (SS.notes_played == SS.seq_length && SS.notes_played == SS.max_notes) {

function onClick(evt) {

i = click_on_image(evt);

if (i == -1) {

return;

}

P("i = " + String(i));

P("notes_clicked= " + String(SS.notes_clicked));

lb_click(i);

SS.notes_clicked = SS.notes_clicked + 1;

if ( SS.seq[SS.notes_clicked - 1] == i) {

check_seq_finished();

}

else { /* player clicked the wrong note */

game_over(false);

}

function play_game(i) {

init_seq();

init_binds();

P(SS.seq);

SS.seq_length = 1;

play_seq();

}

window.onload = function() {

init_images();

init_sounds();

}

function P(i){

console.log(i);

}

v4 – Variable sequences and CSS

simon_4.html: adding a field to input a length for the sequence and a link to the style file

<!DOCTYPE html>
<html lang="en-US">
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" type="text/css" href="style.css" />
        <title>Simon Says</title>
    </head>

    <body>
        <div id = "container">
            <div id = "header">
                <h1 id = "title">Simon Says!</h1>
            </div>

            <div id = "game">
                <img id="lb_0" onclick="lb_click(0)" src="images/lb_off.png" width="100" height="188">
                <img id="lb_1" onclick="lb_click(1)" src="images/lb_off.png" width="100" height="188">
                <img id="lb_2" onclick="lb_click(2)" src="images/lb_off.png" width="100" height="188">
                <img id="lb_3" onclick="lb_click(3)" src="images/lb_off.png" width="100" height="188">
                <img id="lb_4" onclick="lb_click(4)" src="images/lb_off.png" width="100" height="188">
            </div>

            <div id = "footer">
                <form id="my_form">
                    Max. sequence length: <input id="seq_len" type="text" size="1">
                </form>
                <button id="btn_0" type="button" onclick="play_game()">Play!</button>
            </div>
        </div>
        <script type="text/javascript" src="lib4.js"></script>
    </body>
</html>

<!DOCTYPE html>

<head>

<title>Simon Says</title>

</head>

<body>

<h1 id = "title">Simon Says!</h1>

</div>

</div>

Max. sequence length: <input id="seq_len" type="text" size="1">

</form>

</div>

</body>

</html>

lib4.js: finishing touches

var SS = {};  // Global object container

function init_images() {
    SS.img_off = "images/lb_off.png";

    SS.img_on = [ "images/lb_yellow.png",
                  "images/lb_blue.png",
                  "images/lb_green.png",
                  "images/lb_red.png",
                  "images/lb_purple.png"];

    SS.n = SS.img_on.length;

    SS.img_delay = 800;  
}

function init_sounds() {
    var snd_file = [ "sounds/f_sharp.wav",
                     "sounds/g_sharp.wav",
                     "sounds/a_sharp.wav",
                     "sounds/c_sharp.wav",
                     "sounds/d_sharp.wav"]
    var n = SS.n;  // dereference

    SS.lb_snd = new Array(n);
    for (var i = 0; i < n; i++ ) {
        SS.lb_snd[i] = new Audio( snd_file[i] );
    }

    SS.success_snd = new Audio("sounds/applause.wav");
    SS.failure_snd = new Audio("sounds/aww.wav");
}

function init_max_notes() {
    SS.max_notes = 5;
    document.getElementById("seq_len").value = SS.max_notes;
}

function set_max_notes(){
    /* simple validation */
    var val = document.getElementById("seq_len").value;
    var n = parseInt(val,10); /* the number and the radix */
    if (n > 0 && n < 100) {
        SS.max_notes = n;
    }
    else {
        document.getElementById("seq_len").value = SS.max_notes;
    }
}

function init_seq() {
    set_max_notes();
    P(SS.max_notes);

    SS.seq = new Array(SS.max_notes);
    for (var i = 0; i < SS.max_notes; i++) {
        SS.seq[i] = Math.floor(Math.random() * SS.n);
    }

    SS.seq_delay = SS.img_delay + 160;
    SS.interval_id = 0;
    SS.notes_played;
    SS.notes_clicked;
    SS.seq_length;
}

function init_binds(){
    document.addEventListener("click", onClick);
}

function turn_lb_on(i, image) {
    SS.lb_snd[i].load();
    SS.lb_snd[i].play();
    image.src = SS.img_on[i];
}

function turn_lb_off(image) {
    image.src = SS.img_off;
}

function lb_click(i) {
    var img_id = "lb_" + String(i);
    var image = document.getElementById(img_id);

    turn_lb_on(i, image);
    setTimeout( function(){turn_lb_off(image)}, SS.img_delay);
}

function play_one(){
    if (SS.notes_played < SS.seq_length) {
        lb_click( SS.seq[SS.notes_played] );
        SS.notes_played = SS.notes_played + 1;
    }
    else {
        clearInterval(SS.interval_id);
    }
}

function play_seq(){
    SS.notes_played = 0;
    SS.notes_clicked = 0;
    SS.interval_id = setInterval( function(){play_one()}, SS.seq_delay);
}

function game_over(player_won){
    document.removeEventListener('click', onClick);
    if (player_won) {
        SS.success_snd.play();
    }
    else {
        SS.failure_snd.play();
    }
}

function click_on_image(evt){
    var target_id;

    target_id = evt.target.id;
    if (null == target_id.match("lb_")) {
        return -1;
    }

    for (var i = 0; i < SS.n; i++) {
        lb_id = "lb_" + String(i);
        if (target_id == lb_id) {
            return i;
        }
    }
}

function check_seq_finished() {
    if (SS.notes_clicked != SS.seq_length) {
        return;
    }

    if (SS.notes_clicked < SS.max_notes) {
       SS.seq_length = SS.seq_length + 1;
       play_seq();
    }
    else {/* player won */
       game_over(true);
    }
}

function onClick(evt) {
    i = click_on_image(evt);
    if (i == -1) {
        return;
    }

    P("i = " + String(i));
    P("notes_clicked= " + String(SS.notes_clicked));
    lb_click(i);

    SS.notes_clicked = SS.notes_clicked + 1;
    if ( SS.seq[SS.notes_clicked - 1] == i) {
        check_seq_finished();
    } 
    else {     /* player clicked the wrong note */
        game_over(false);
    }
}

function play_game(i) {
    init_seq();
    init_binds();
    P(SS.seq);
    SS.seq_length = 1;
    play_seq();
}

window.onload = function() {
    init_images();
    init_sounds();
    init_max_notes();
}

function P(i){
    console.log(i);
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

var SS = {}; // Global object container

function init_images() {

SS.img_off = "images/lb_off.png";

SS.img_on = [ "images/lb_yellow.png",

"images/lb_blue.png",

"images/lb_green.png",

"images/lb_red.png",

"images/lb_purple.png"];

SS.n = SS.img_on.length;

SS.img_delay = 800;

}

function init_sounds() {

var snd_file = [ "sounds/f_sharp.wav",

"sounds/g_sharp.wav",

"sounds/a_sharp.wav",

"sounds/c_sharp.wav",

"sounds/d_sharp.wav"]

var n = SS.n; // dereference

SS.lb_snd = new Array(n);

for (var i = 0; i < n; i++ ) {

SS.lb_snd[i] = new Audio( snd_file[i] );

}

SS.success_snd = new Audio("sounds/applause.wav");

SS.failure_snd = new Audio("sounds/aww.wav");

}

function init_max_notes() {

SS.max_notes = 5;

document.getElementById("seq_len").value = SS.max_notes;

}

function set_max_notes(){

/* simple validation */

var val = document.getElementById("seq_len").value;

var n = parseInt(val,10); /* the number and the radix */

if (n > 0 && n < 100) {

SS.max_notes = n;

}

else {

document.getElementById("seq_len").value = SS.max_notes;

}

function init_seq() {

set_max_notes();

P(SS.max_notes);

SS.seq = new Array(SS.max_notes);

for (var i = 0; i < SS.max_notes; i++) {

SS.seq[i] = Math.floor(Math.random() * SS.n);

}

SS.seq_delay = SS.img_delay + 160;

SS.interval_id = 0;

SS.notes_played;

SS.notes_clicked;

SS.seq_length;

}

function init_binds(){

document.addEventListener("click", onClick);

}

function turn_lb_on(i, image) {

SS.lb_snd[i].load();

SS.lb_snd[i].play();

image.src = SS.img_on[i];

}

function turn_lb_off(image) {

image.src = SS.img_off;

}

function lb_click(i) {

var img_id = "lb_" + String(i);

var image = document.getElementById(img_id);

turn_lb_on(i, image);

setTimeout( function(){turn_lb_off(image)}, SS.img_delay);

}

function play_one(){

if (SS.notes_played < SS.seq_length) {

lb_click( SS.seq[SS.notes_played] );

SS.notes_played = SS.notes_played + 1;

}

else {

clearInterval(SS.interval_id);

}

function play_seq(){

SS.notes_played = 0;

SS.notes_clicked = 0;

SS.interval_id = setInterval( function(){play_one()}, SS.seq_delay);

}

function game_over(player_won){

document.removeEventListener('click', onClick);

if (player_won) {

SS.success_snd.play();

}

else {

SS.failure_snd.play();

}

function click_on_image(evt){

var target_id;

target_id = evt.target.id;

if (null == target_id.match("lb_")) {

return -1;

}

for (var i = 0; i < SS.n; i++) {

lb_id = "lb_" + String(i);

if (target_id == lb_id) {

return i;

}

function check_seq_finished() {

if (SS.notes_clicked != SS.seq_length) {

return;

}

if (SS.notes_clicked < SS.max_notes) {

SS.seq_length = SS.seq_length + 1;

play_seq();

}

else {/* player won */

game_over(true);

}

function onClick(evt) {

i = click_on_image(evt);

if (i == -1) {

return;

}

P("i = " + String(i));

P("notes_clicked= " + String(SS.notes_clicked));

lb_click(i);

SS.notes_clicked = SS.notes_clicked + 1;

if ( SS.seq[SS.notes_clicked - 1] == i) {

check_seq_finished();

}

else { /* player clicked the wrong note */

game_over(false);

}

function play_game(i) {

init_seq();

init_binds();

P(SS.seq);

SS.seq_length = 1;

play_seq();

}

window.onload = function() {

init_images();

init_sounds();

init_max_notes();

}

function P(i){

console.log(i);

}

style.css: the style file

/* tile from http://luisabranches.com/ */
body {
	background-image: url("http://luisabranches.com/wp-content/uploads/2014/07/partiturailus.jpg");
	font-family: Helvetica, Arial, sans-serif;
}

#container {
	width: 700px;
	margin-top:20px;
	margin-left: auto;
	margin-right: auto;
	background: rgba(255,255,255,0.85);
	border-style: solid;
	border-color: #FFAAAA;
	border-width: 3px;
}

#header {
	background: #F2F5A9;
	height: 100px;
	width: 650px;
	margin-left: auto;
	margin-right: auto;
	margin-top:20px;
	margin-bottom:20px;
	border-color:#FFAAAA;;
	border-style:solid;
}

#title {
	color: red;
	font-size:48px;
	text-align: center;
}

#game{
	width:520px;
	height:210px;
	/* border-style:solid; */
	margin-left:auto;
	margin-right:auto;
	margin-bottom:20px;
	background: rgba(255,255,255,0.5);
}

#footer{
	background: #F2F5A9;;
	width:650px;
	height:65px;
	border-color:#FFAAAA;;
	border-style:solid;
	margin-left:auto;
	margin-right:auto;
	margin-bottom:20px;
}

#my_form{
	margin-top:20px;
	margin-left:10px;
	float:left;
	font-size:18px;
}

#seq_len{
	font-size:20px;
	text-align:center;
}

/* button from http://css-tricks.com/examples/ButtonMaker/# */
#btn_0 {
	float:right;
	margin-top:10px;
   	margin-right:10px;
   	text-align: center;
   	border-top: 1px solid #e0828f;
   	background: #de1b3b;
   	background: -webkit-gradient(linear, left top, left bottom, from(#de2846), to(#de1b3b));
   	background: -webkit-linear-gradient(top, #de2846, #de1b3b);
   	background: -moz-linear-gradient(top, #de2846, #de1b3b);
   	background: -ms-linear-gradient(top, #de2846, #de1b3b);
   	background: -o-linear-gradient(top, #de2846, #de1b3b);
   	padding: 10px 20px;
   	-webkit-border-radius: 16px;
   	-moz-border-radius: 16px;
   	border-radius: 16px;
   	-webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
   	-moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
   	box-shadow: rgba(0,0,0,1) 0 1px 0;
   	text-shadow: rgba(0,0,0,.4) 0 1px 0;
   	color: #f7f30d;
   	font-size: 22px;
   	font-family: Helvetica, Arial, Sans-Serif;
   	text-decoration: none;
   	vertical-align: middle;
}

#btn_0:hover {
   border-top-color: #cf97ae;
   background: #cf97ae;
   color: #fcf008;
}

#btn_0:active {
   border-top-color: #f0ca09;
   background: #f0ca09;
}

100

101

102

103

104

105

106

/* tile from http://luisabranches.com/ */

body {

background-image: url("http://luisabranches.com/wp-content/uploads/2014/07/partiturailus.jpg");

font-family: Helvetica, Arial, sans-serif;

}

#container {

width: 700px;

margin-top:20px;

margin-left: auto;

margin-right: auto;

background: rgba(255,255,255,0.85);

border-style: solid;

border-color: #FFAAAA;

border-width: 3px;

}

#header {

background: #F2F5A9;

height: 100px;

width: 650px;

margin-left: auto;

margin-right: auto;

margin-top:20px;

margin-bottom:20px;

border-color:#FFAAAA;;

border-style:solid;

}

#title {

color: red;

font-size:48px;

text-align: center;

}

#game{

width:520px;

height:210px;

/* border-style:solid; */

margin-left:auto;

margin-right:auto;

margin-bottom:20px;

background: rgba(255,255,255,0.5);

}

#footer{

background: #F2F5A9;;

width:650px;

height:65px;

border-color:#FFAAAA;;

border-style:solid;

margin-left:auto;

margin-right:auto;

margin-bottom:20px;

}

#my_form{

margin-top:20px;

margin-left:10px;

float:left;

font-size:18px;

}

#seq_len{

font-size:20px;

text-align:center;

}

/* button from http://css-tricks.com/examples/ButtonMaker/# */

#btn_0 {

float:right;

margin-top:10px;

margin-right:10px;

text-align: center;

border-top: 1px solid #e0828f;

background: #de1b3b;

background: -webkit-gradient(linear, left top, left bottom, from(#de2846), to(#de1b3b));

background: -webkit-linear-gradient(top, #de2846, #de1b3b);

background: -moz-linear-gradient(top, #de2846, #de1b3b);

background: -ms-linear-gradient(top, #de2846, #de1b3b);

background: -o-linear-gradient(top, #de2846, #de1b3b);

padding: 10px 20px;

-webkit-border-radius: 16px;

-moz-border-radius: 16px;

border-radius: 16px;

-webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;

-moz-box-shadow: rgba(0,0,0,1) 0 1px 0;

box-shadow: rgba(0,0,0,1) 0 1px 0;

text-shadow: rgba(0,0,0,.4) 0 1px 0;

color: #f7f30d;

font-size: 22px;

font-family: Helvetica, Arial, Sans-Serif;

text-decoration: none;

vertical-align: middle;

}

#btn_0:hover {

border-top-color: #cf97ae;

background: #cf97ae;

color: #fcf008;

}

#btn_0:active {

border-top-color: #f0ca09;

background: #f0ca09;

}