Impiccato javascript!

Ho trovato questa discussione per caso e, nonostante risalga a mesi fa e l'utente risulti pure un po' inattiva, ho deciso di avventurarmi in questa sessione di approfondimento JavaScript impegnandomi e sviluppando il mio lavoro in questi 2 giorni. Non potendo allegare file ZIP o HTML o altri simili, posto tutto qui, con anche una piccola guida in testa e le immagini dell'impiccato in coda.

Have fun!

script.js
Righe dalla 1 alla 7: vengono definite le variabili globali, alcune costanti, altre vuote;
Func. INIT: chiama tutte le funzioni di inizializzazione;
Func. INIT_IMAGE: crea l'handler per l'obj DOM del box dell'impiccato e lo setta allo step 0;
Func. INIT_WORD: crea l'handler per l'obj DOM del box della parola misteriosa e lo popola con <span> contenenti le lettere della parola, sostituendone le interne con simbolo + per vocale e - per consonante;
Func. INIT_KEYBOARD: crea l'handler per l'obj DOM del box tastiera e lo popola con le lettere dell'alfabeto (terminando anche con un punto "." per questioni di stile); ogni <a> ha un evento onclick che chiama la successiva funzione;
Func. CHECK_KEY: chiamata all'evento onclick sul box tastiera, chiede conferma della lettera scelta, dunque chiama la funzione CHECK_CHAR; a result positivo incrementa la variabile che tiene conto dei caratteri giusti e visualizza un alert con messaggio positivo, altrimenti il messaggio sarà negativo e verrà chiamata la funzione IMPICCATO; in ogni caso, vengono chiamate le funzioni DISABLE_KEY e CHECK_ENDGAME;
Func. CHECK_CHAR: verifica se la lettera specificata è contenuta nella parola misteriosa, dando come valore di ritorno il numero di occorrenze trovate e chiamando la funzione REVEAL_CHAR ad ogni occorrenza; viene anche aggiunta la lettera in questione ad una stringa, insieme a tutte le altre già scelte;
Func. DISABLE_KEY: disabilita il pulsante della lettera scelta, assegnando al pulsante inattivo una classe CSS (lettera giusta, lettera errata);
Func. REVEAL_CHAR: svela la lettera alla posizione indicata nel box della parola misteriosa;
Func. IMPICCATO: assegna una nuova classe CSS al box dell'impiccato ed aumenta la variabile image, che controlla il numero di errori;
Func. CHECK_ENDGAME: verifica se il gioco è terminato tramite due if, dei quali il primo confronta il numero di errori con il loro limite massimo, mentre il secondo confronta il numero di lettere giuste con il numero di lettere della parola misteriosa; se nessuna delle condizioni è verificata, la funzione rimane inerte, altrimenti viene visualizzato un alert con messaggio di vittoria o sconfitta ed eventuali altre istruzioni.

init.js
Func. RAND: estrae un numero intero casuale fra un massimo e un limite specificati
Righe dalla 12 alla 23: viene definito l'array words, contenente varie parole (settabili lato server, volendo), dunque tramite funzione RAND si prende un indice a caso che sia chiave dell'array precedente e dopodichè se ne estrae il valore, settando la corrente parola misteriosa nella stringa word; infine viene chiamata la funzione di inizializzazione INIT, definita nel file script.js.
ATTENZIONE: evitare accuratamente caratteri e simboli estranei al semplice alfabeto (escludere anche le lettere accentate)!

SCRIPT.JS

var word = "";
var vowels = "aeiou", alphabet = "abcdefghijklmnopqrstuvwxyz";
var chosen = "", image = 0, rightChars = 2;
var imageBox, wordBox, keyboardBox;
var a_start = '<a href="#" onclick="check_key(\'', a_mid = '\')">', a_end = '</a>';
var span_start = '<span>', span_end = '</span>';
var span_ok = span_start.replace ('>', ' class="ok">'), span_ko = span_start.replace ('>', ' class="ko">');

function init () {
  word = word.toLowerCase ();
  init_image ();
  init_word ();
  init_keyboard ();
}

function init_image () {
  imageBox = document.getElementById ("impiccato");
  imageBox.className = "";
}

function init_word () {
  wordBox = document.getElementById ("word");
  for (i = 0; i < word.length; i++) {
    var chr = word.charAt (i);
    var reveal = (i == 0 || i == word.length -1) ? chr : (vowels.indexOf (chr) == -1) ? "&ndash;" : "+";
    wordBox.innerHTML += "<span>" + reveal + "</span>\n";
  }
}

function init_keyboard () {
  keyboardBox = document.getElementById ("keyboard");
  var keyboardContent = "";
  for (i = 0; i < alphabet.length; i++) {
	keyboardContent += a_start + alphabet.charAt (i) + a_mid + alphabet.charAt (i) + a_end + "\n";
  }
  keyboardContent += span_start + '.' + span_end;
  keyboardBox.innerHTML = keyboardContent;
}

function check_key (key) {
  if (confirm ("La tua scelta è " + key.toUpperCase () + "?")) {
    if ((num = check_char (key)) > 0) {
	rightChars++;
	alert ("Sono stati trovate " + num + " occorrenze di " + key.toUpperCase () + " !");
	var span_type = 'ok';
    } else {
	alert ("Il carattere scelto non è contenuto nella parola misteriosa!");
	impiccato ();
	var span_type = 'ko';
    }
    disable_key (key, span_type);
    check_endgame ();
  }
  return false;
}

function check_char (chr) {
  var result = 0;
  for (i = 0; i < word.length; i++) {
    if (i != 0 && i != word.length -1 && chr == word.charAt (i)) {
	reveal_char (i);
	result++;
	chosen += chr;
    }
  }
  return result;
}

function disable_key (key, type) {
  var search = a_start + key + a_mid + key + a_end;
  var replace = window ["span_" + type] + key + span_end;
  keyboardBox.innerHTML = keyboardBox.innerHTML.replace (search, replace);
}

function reveal_char (i) { document.getElementById ("word").getElementsByTagName ("span")[i].innerHTML = word.charAt (i); }

function impiccato () {
  imageBox.className = "x" + image;
  image++;
}

function check_endgame () {
  if (image > 6) {
    alert ("Peccato, hai perso!");
    alert ("La parola misteriosa era:\n\t" + word.toUpperCase ());
    // SOMETHING ON-LOOSE
  } else if (rightChars == word.length) {
    alert ("Yeah, hai vinto!");
    alert ("La parola misteriosa è:\n\t" + word.toUpperCase ());
    // SOMETHING ON-WIN
  }
}

INIT.JS

function rand (min, max) {
  var argc = arguments.length;
  if (argc === 0) {
      min = 0;
      max = 2147483647;
  } else if (argc === 1) {
      throw new Error('Warning: rand() expects exactly 2 parameters, 1 given');
  }
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

words = new Array (
	"Parola",
	"Novantamila",
	"Octagonapus",
	"Settebello",
	"Lungopalo"
	);

var x = rand (0, words.length -1);

word = words [x];
window.setTimeout ("init()", 100);

INDEX.HTML

<html>

<head>
  <!-- TIPO DI CONTENUTO E CHARSET -->
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <!-- TITOLO DELLA PAGINA -->
    <title>L'impiccato</title>
  <!-- COLLEGAMENTO A FOGLIO DI STILE STYLE.CSS -->
    <link rel="stylesheet" type="text/css" href="style.css" />

  <!-- INCLUSIONE DEL FILE SCRIPT.JS -->
    <script type="text/javascript" src="script.js"></script>

  <!-- INCLUSIONE DEL FILE INIT.JS -->
    <script type="text/javascript" src="init.js"></script>
</head>

<body>
  <div id="impiccato">
   <!-- IL BOX DELL'IMPICCATO, JS CAMBIERà SOLO LA CLASSE -->
  </div>

  <div id="word">
   <!-- IL BOX DELLA PAROLA MISTERIOSA, POPOLATO DA JS -->
  </div>

  <div id="keyboard">
   <!-- IL BOX DELLA TASTIERA, POPOLATO DA JS -->
  </div>
</body>

</html>

STYLE.CSS

/* PICCOLI ACCORGIMENTI DI IMPAGINAZIONE E STILE */
body {
	margin: 35px 10px;
	text-align: center;
	font: 16px sans-serif;
	}

div { margin: auto }

#word {
	margin-bottom: 30px;
	text-transform: uppercase;
	font-size: 24px;
	}

#word span { text-decoration: underline }

#keyboard {
	border: 1px solid #ccc;
	padding: 1px;
	width: 288px !important; height: 96px !important;
	width: 292px; height: 100px;
	}

#keyboard a, #keyboard span {
	float: left;
	margin: 1px;
	border: 1px solid #03f;
	width: 28px !important; height: 28px !important;
	width: 30px; height: 30px;
	background: #cdf;
	color: #03f;
	text-decoration: none;
	line-height: 24px;
	}

#keyboard a:hover {
	border-color: #09f;
	background: #fff;
	color: #06f;
	font-weight: bold;
	font-size: larger;
	}

#keyboard a:active {
	border-color: gold;
	background: #ffc;
	color: orange;
	}

/* BOX DELL'IMPICCATO, SENZA IMMAGINE DI SFONDO */
#impiccato {
	margin-bottom: 30px;
	border: 1px solid #ccc;
	width: 300px !important; height: 300px !important;
	width: 302px; height: 302px;
	background-color: #fff;
	}

/* CLASSI APPLICABILI AL BOX PRECEDENTE, CON LE IMMAGINI DELLA SEQUENZA */
.x0 { background-image: url('Steps/00.gif') }
.x1 { background-image: url('Steps/01.gif') }
.x2 { background-image: url('Steps/02.gif') }
.x3 { background-image: url('Steps/03.gif') }
.x4 { background-image: url('Steps/04.gif') }
.x5 { background-image: url('Steps/05.gif') }
.x6 { background-image: url('Steps/06.gif') }

/* PULSANTE INATTIVO DEL BOX TASTIERA (GRIGIO) */
#keyboard span {
	border-color: #999;
	background: #eee;
	color: #999;
	}

/* PULSANTE INATTIVO CON LETTERA GIUSTA (VERDE) */
#keyboard span.ok {
	border-color: #6f6;
	background: #efe;
	color: #6f6;
	}

/* PULSANTE INATTIVO CON LETTERA ERRATA (ROSSO) */
#keyboard span.ko {
	border-color: #f99;
	background: #fee;
	color: #f99;
	}

IMMAGINI cartella Steps/ files da 00 a 06 .gif

Impiccato javascript!

1 Risposte

Re: Impiccato javascript!