We finish the DOM Simon Says game.
Class work
Let’s 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
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
1234567891011121314151617181920212223242526272829<!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>
- lib3.js: comparing the input sequence with the stored sequence
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163var SS = {}; // Global object containerfunction 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; // dereferenceSS.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);}
- Our game so far: simon_3.html
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
1234567891011121314151617181920212223242526272829303132<!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>
- lib4.js: finishing touches
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180var SS = {}; // Global object containerfunction 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; // dereferenceSS.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
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106/* 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;}
- The final result (click on the image to play):