Gioco javascript aiuti?

**BlackFenix06** · 01-07-2013, 12:21

Da principiante, quale sono, di javascript ho voluto iniaze a impararlo. Prendendo spunto da un altro piccolo codice sono riuscito a creare questo:

codice:

<script type="text/javascript">
<!--
//Ciclo
function color() {
setTimeout("t1.style.backgroundColor = 'pink';", document.selector.interval.value * 1); setTimeout("t2.style.backgroundColor = 'pink';", document.selector.interval.value * 2); setTimeout("t3.style.backgroundColor = 'pink';", document.selector.interval.value * 3); setTimeout("t4.style.backgroundColor = 'pink';", document.selector.interval.value * 4); setTimeout("t5.style.backgroundColor = 'pink';", document.selector.interval.value * 5); setTimeout("t6.style.backgroundColor = 'pink';", document.selector.interval.value * 6); setTimeout("t7.style.backgroundColor = 'pink';", document.selector.interval.value * 7); setTimeout("t8.style.backgroundColor = 'pink';", document.selector.interval.value * 8); setTimeout("t9.style.backgroundColor = 'pink';", document.selector.interval.value * 9); setTimeout("t9.style.backgroundColor = 'red';", document.selector.interval.value * 10); setTimeout("t8.style.backgroundColor = 'red';", document.selector.interval.value * 11); setTimeout("t7.style.backgroundColor = 'red';", document.selector.interval.value * 12); setTimeout("t6.style.backgroundColor = 'red';", document.selector.interval.value * 13); setTimeout("t5.style.backgroundColor = 'red';", document.selector.interval.value * 14); setTimeout("t4.style.backgroundColor = 'red';", document.selector.interval.value * 15); setTimeout("t3.style.backgroundColor = 'red';", document.selector.interval.value * 16); setTimeout("t2.style.backgroundColor = 'red';", document.selector.interval.value * 17); setTimeout("t1.style.backgroundColor = 'red';", document.selector.interval.value * 18); setTimeout("t1.style.backgroundColor = 'darkred';", document.selector.interval.value * 19); setTimeout("t2.style.backgroundColor = 'darkred';", document.selector.interval.value * 20); setTimeout("t3.style.backgroundColor = 'darkred';", document.selector.interval.value * 21); setTimeout("t4.style.backgroundColor = 'darkred';", document.selector.interval.value * 22); setTimeout("t5.style.backgroundColor = 'darkred';", document.selector.interval.value * 23); setTimeout("t6.style.backgroundColor = 'darkred';", document.selector.interval.value * 24); setTimeout("t7.style.backgroundColor = 'darkred';", document.selector.interval.value * 25); setTimeout("t8.style.backgroundColor = 'darkred';", document.selector.interval.value * 26); setTimeout("t9.style.backgroundColor = 'darkred';", document.selector.interval.value * 27); setTimeout("t9.style.backgroundColor = 'black';", document.selector.interval.value * 28); setTimeout("t8.style.backgroundColor = 'black';", document.selector.interval.value * 29); setTimeout("t7.style.backgroundColor = 'black';", document.selector.interval.value * 30); setTimeout("t6.style.backgroundColor = 'black';", document.selector.interval.value * 31); setTimeout("t5.style.backgroundColor = 'black';", document.selector.interval.value * 32); setTimeout("t4.style.backgroundColor = 'black';", document.selector.interval.value * 33); setTimeout("t3.style.backgroundColor = 'black';", document.selector.interval.value * 34); setTimeout("t2.style.backgroundColor = 'black';", document.selector.interval.value * 35); setTimeout("t1.style.backgroundColor = 'black';", document.selector.interval.value * 36); setTimeout("t1.style.backgroundColor = 'darkblue';", document.selector.interval.value * 37); setTimeout("t2.style.backgroundColor = 'darkblue';", document.selector.interval.value * 38); setTimeout("t3.style.backgroundColor = 'darkblue';", document.selector.interval.value * 39); setTimeout("t4.style.backgroundColor = 'darkblue';", document.selector.interval.value * 40); setTimeout("t5.style.backgroundColor = 'darkblue';", document.selector.interval.value * 41); setTimeout("t6.style.backgroundColor = 'darkblue';", document.selector.interval.value * 42); setTimeout("t7.style.backgroundColor = 'darkblue';", document.selector.interval.value * 43); setTimeout("t8.style.backgroundColor = 'darkblue';", document.selector.interval.value * 44); setTimeout("t9.style.backgroundColor = 'darkblue';", document.selector.interval.value * 45); setTimeout("t9.style.backgroundColor = 'blue';", document.selector.interval.value * 46); setTimeout("t8.style.backgroundColor = 'blue';", document.selector.interval.value * 47); setTimeout("t7.style.backgroundColor = 'blue';", document.selector.interval.value * 48); setTimeout("t6.style.backgroundColor = 'blue';", document.selector.interval.value * 49); setTimeout("t5.style.backgroundColor = 'blue';", document.selector.interval.value * 50); setTimeout("t4.style.backgroundColor = 'blue';", document.selector.interval.value * 51); setTimeout("t3.style.backgroundColor = 'blue';", document.selector.interval.value * 52); setTimeout("t2.style.backgroundColor = 'blue';", document.selector.interval.value * 53); setTimeout("t1.style.backgroundColor = 'blue';", document.selector.interval.value * 54); setTimeout("t1.style.backgroundColor = 'cyan';", document.selector.interval.value * 55); setTimeout("t2.style.backgroundColor = 'cyan';", document.selector.interval.value * 56); setTimeout("t3.style.backgroundColor = 'cyan';", document.selector.interval.value * 57); setTimeout("t4.style.backgroundColor = 'cyan';", document.selector.interval.value * 58); setTimeout("t5.style.backgroundColor = 'cyan';", document.selector.interval.value * 59); setTimeout("t6.style.backgroundColor = 'cyan';", document.selector.interval.value * 60); setTimeout("t7.style.backgroundColor = 'cyan';", document.selector.interval.value * 61); setTimeout("t8.style.backgroundColor = 'cyan';", document.selector.interval.value * 62); setTimeout("t9.style.backgroundColor = 'cyan';", document.selector.interval.value * 63); setTimeout("t9.style.backgroundColor = '';", document.selector.interval.value * 64); setTimeout("t8.style.backgroundColor = '';", document.selector.interval.value * 65); setTimeout("t7.style.backgroundColor = '';", document.selector.interval.value * 66); setTimeout("t6.style.backgroundColor = '';", document.selector.interval.value * 67); setTimeout("t5.style.backgroundColor = '';", document.selector.interval.value * 68); setTimeout("t4.style.backgroundColor = '';", document.selector.interval.value * 69); setTimeout("t3.style.backgroundColor = '';", document.selector.interval.value * 70); setTimeout("t2.style.backgroundColor = '';", document.selector.interval.value * 71); setTimeout("t1.style.backgroundColor = '';", document.selector.interval.value * 72); setTimeout("color()", document.selector.interval.value * 73);
}
// Bordi
function cambiacolore() {
var r = Math.round(Math.random()*256);
var g = Math.round(Math.random()*256);
var b = Math.round(Math.random()*256);
var n = Math.round(Math.random()*0);
colore_rgb1 = "rgb(" + r + "," + g + ", " + b + ")";
colore_rgb2 = "rgb(" + r + "," + g + ", " + n + ")";
colore_rgb3 = "rgb(" + r + "," + b + ", " + g + ")";
colore_rgb4 = "rgb(" + r + "," + b + ", " + n + ")";
colore_rgb5 = "rgb(" + b + "," + r + ", " + g + ")";
colore_rgb6 = "rgb(" + b + "," + r + ", " + n + ")";
colore_rgb7 = "rgb(" + b + "," + g + ", " + r + ")";
colore_rgb8 = "rgb(" + b + "," + g + ", " + n + ")";
colore_rgb9 = "rgb(" + g + "," + b + ", " + r + ")";
colore_rgb10 = "rgb(" + g + "," + b + ", " + n + ")";
colore_rgb11 = "rgb(" + g + "," + r + ", " + b + ")";
colore_rgb12 = "rgb(" + g + "," + r + ", " + n + ")";
text1.style.borderColor = colore_rgb1; text2.style.borderColor = colore_rgb2;
text3.style.borderColor = colore_rgb3; text4.style.borderColor = colore_rgb4;
text5.style.borderColor = colore_rgb5; text6.style.borderColor = colore_rgb6;
text7.style.borderColor = colore_rgb7; text8.style.borderColor = colore_rgb8;
text9.style.borderColor = colore_rgb9; text10.style.borderColor = colore_rgb10;
text11.style.borderColor = colore_rgb11; text12.style.borderColor = colore_rgb12;
}
setInterval(cambiacolore,100);
-->
</script>
<style type="text/css">
<!--
.start, .tx {background-color: #000; color: #FFFF00; text-align: center; height: 25px; width: 150px; font-family: "Comic Sans MS"; font-weight: 900;}
#t1, #t2, #t3, #t4, #t5, #t6, #t7, #t8, #t9 {background-color: #FFF; height: 50px; width: 50px;}
#text1, #text2, #text3, #text4, #text5, #text6, #text7, #text8, #text9, #text10, #text11, #text12 {border-style: solid; border-width: 5px;}
#text1 {height: 220px; width: 150px; background-color: #000;}
#text2, #text3, #text4, #text5, #text6, #text7, #text8, #text9, #text10 {height: 50px; width: 50px;}
#text11, #text12 {height: 50px;}
-->
</style>
<table id="text1">
<tr>
<td id="text2"><input type="button" id="t1"></td>
<td id="text3"><input type="button" id="t2"></td>
<td id="text4"><input type="button" id="t3"></td>
</tr>
<tr>
<td id="text5"><input type="button" id="t6"></td>
<td id="text6"><input type="button" id="t5"></td>
<td id="text7"><input type="button" id="t4"></td>
</tr>
<tr>
<td id="text8"><input type="button" id="t7"></td>
<td id="text9"><input type="button" id="t8"></td>
<td id="text10"><input type="button" id="t9"></td>
</tr>
<form name="selector">
<tr>
<td id="text11" colspan="3"><div align="center"><input type="button" class="start" value="START" onClick="color()"></div></td>
</tr>
<tr><td id="text12" colspan="3"><div align="center"><input type="text" class="tx" size="8" name="interval" value="50"></div></td>
</tr>
</form>
</table>

Purtroppo non sono riuscito ad andare avanti in quello che volevo fare (c'ho provato ma senza successo)...
Volevo mettere un tag select (al posto del input type:text) con cui si selezionava la difficoltà facile , intermedio, normale, difficile, impossibile. Più la difficoltà era facile, più la velocità era bassa (tipo un secondo) e i colori diversi tra di loro (tipo giallo, rosso, nero, blu ecc...). Più la difficoltà era difficile, più la velocità era alta (tipo 30millisecondi) e i colori simili tra di loro (tipo bianco, rosa chiaro, giallo chiaro ecc...).
Il tasto start, prima di selezionare la difficoltà è bloccato e dopo aver fatto partire il gioco si blocca di nuovo (questo perché se si schiaccia start più volte il ciclo aumenta la velocità).
I 9 pulsanti prima dello start fanno la stessa cosa che fanno i bordi, dopo lo start i pulsanti si colorano del colore del ciclo.
Sotto, una domanda diversa a ogni start (tipo: qual'è il terzo colore? qual'è il primo colore?)
con un tag select con tutti i colori usati per i cicli (indipendentemente dalla difficoltà) e sotto un pulsante verifica. Se il colore è corretto un messaggio (tipo alert) dice che hai vinto, altrimenti un messaggio dice che hai perso.
In ogni caso, sia di vittoria o sconfitta, il gioco rinizia da capo come se non ci avessi giocato (start bloccato e i pulsanti che si colorano come i bordi).
E' possibile una cosa del genere? Se si come? Grazie del vostro aiuto...

**bstefano79** · 01-07-2013, 12:57

il codice su una riga sola non è leggibile, ti merita sistemarlo se vuoi aiuto

**BlackFenix06** · 01-07-2013, 13:18

fatto...

**BlackFenix06** · 01-07-2013, 23:19

qualcuno mi può aiutare?

**cavicchiandrea** · 02-07-2013, 00:06

Analizziamo il codice e la tua richiesta:

Volevo mettere un tag select (al posto del input type:text) con cui si selezionava la difficoltà facile , intermedio, normale, difficile, impossibile.

Non lo vedo dove è?

Sotto, una domanda diversa a ogni start (tipo: qual'è il terzo colore? qual'è il primo colore?)
con un tag select con tutti i colori usati per i cicli (indipendentemente dalla difficoltà) e sotto un pulsante verifica. Se il colore è corretto un messaggio (tipo alert) dice che hai vinto, altrimenti un messaggio dice che hai perso.

Questo secondo me manca, o non l'ho visto io?

Da principiante, quale sono, di javascript ho voluto iniaze a impararlo.

Partirei con qualcosa di più semplice

Fai attenzione anche html ha la sua sintassi questo blocco è sbagliato

codice:

<form name="selector">
<tr>
<td id="text11" colspan="3"><div align="center"><input type="button" class="start" value="START" onClick="color()"></div></td>
</tr>
<tr><td id="text12" colspan="3"><div align="center"><input type="text" class="tx" size="8" name="interval" value="50"></div></td>
</tr>
</form>

il form o lo metti dentro un div o una cella (td) oppure esterno ad una tabella di certo non tra le righe di una tabella che non deve esserci nulla (<table><form><tr><td></td></tr></form></table>) Sbagliato (</form><table><tr><td></td></tr></table></form>) o cosi (<table><tr><td></form></form></td></tr></table>) Corretto concludo consigliandoti di scrivere le funzioni su più righe, scriverla tutta di seguito è molto più difficile capire gli errori, la logica, la sintassi

**BlackFenix06** · 02-07-2013, 00:23

Non lo vedo dove è?

Questo secondo me manca, o non l'ho visto io?

Non li vedi semplicemente perché non ci sono... Il codice così come l'ho inserito ha solo una funzione... Scrivo un numero che voglio nell'input text (quella è la velocità) e inizia il ciclo... Quello con i select e il resto è quello che vorrei fare e come ho detto ci ho provato senza successo...

il form o lo metti dentro un div o una cella (td) oppure esterno ad una tabella di certo non tra le righe di una tabella che non deve esserci nulla (<table><form><tr><td></td></tr></form></table> ) Sbagliato (</form><table><tr><td></td></tr></table></form>) o cosi (<table><tr><td></form></form></td></tr></table> ) Corretto concludo consigliandoti di scrivere le funzioni su più righe, scriverla tutta di seguito è molto più difficile capire gli errori, la logica, la sintassi

Lo so che funziona così... Quanto l'ho creato, grazie al programma HTML-KIT, nella prova mi rimaneva dello spazio tra lo start e l'input text, e quindi ho voluto provare a metterlo esterno. La cosa non ha funzionato e ho postato il codice dimenticandomi di modificarlo...

**cavicchiandrea** · 02-07-2013, 07:05

Originariamente inviato da BlackFenix06
Non li vedi semplicemente perché non ci sono... Il codice così come l'ho inserito ha solo una funzione... Scrivo un numero che voglio nell'input text (quella è la velocità) e inizia il ciclo... Quello con i select e il resto è quello che vorrei fare e come ho detto ci ho provato senza successo...

Parti da qualcosa di più semplice a mio avviso questa è una operazione troppo complessa per un profano (non sarebbe facile neanche per un esperto)

Lo so che funziona così... Quanto l'ho creato, grazie al programma HTML-KIT, nella prova mi rimaneva dello spazio tra lo start e l'input text, e quindi ho voluto provare a metterlo esterno. La cosa non ha funzionato e ho postato il codice dimenticandomi di modificarlo...

Visto che devi imparare usa il notepad/bloc-notes e scrivi il codice a mano, viste le premesse non potevo sapere che era un errore "monitorato"

**BlackFenix06** · 02-07-2013, 10:37

Parti da qualcosa di più semplice a mio avviso questa è una operazione troppo complessa per un profano (non sarebbe facile neanche per un esperto)

Hai ragione... Posso chiederti una cosa? Nel codice che ho postato, come faccio a fermare il ciclo con un altro pulsante? So che devo usare clearTimeout, ma come faccio?

Visto che devi imparare usa il notepad/bloc-notes e scrivi il codice a mano, viste le premesse non potevo sapere che era un errore "monitorato"

Tranki... Comunque uso HTML-KIT proprio perchè sono un principiante... Quel programma supporta bene sia html, sia css e sia javascript... Inoltre, mentre scrivo il codice, posso vedere i risultati elaborati dal programma.
Un'altra cosa... Non so se conosci il sito: "forumcommunity.net"... Io ho un forum grazie a quel gestore (CALL OF DUTY)... Ho provato a mettere tipo una ventina di codici javascript, per diverse ma funzioni... Ma di quelli solo quattro (più o meno) funzionano... Ne sai il motivo?

**cavicchiandrea** · 02-07-2013, 11:19

Non saprei bisognerebbe studiarsi la funzione, idem per gli script su forumfree (che oltretutto non vedo il link mi chiede registrazione) ma se fossi in te userei altervista.org dove hai una migliore gestione dello spazio

**BlackFenix06** · 02-07-2013, 13:38

Grazie del tuo aiuto e del tuo tempo... Proverò a vedere sul dito che mi hai detto...

Discussione: Gioco javascript aiuti?

Strumenti discussione

Ricerca discussione

Visualizza

Gioco javascript aiuti?

Permessi di invio