PDA

View Full Version : [HTML - Javascript ] consiglio gioco del Tris

umberto1211
26-11-2009, 17:24
Raga come da titolo mi sto cimentando nella creazione di questo gioco , ora vorrei chiedere un consiglio a chi di voi mastica già un po di html e javascript , in pratica io ho disegnato la classica tabella del Tris composta da 9 caselle , ma cio' che mi blocca e come gestire X ed O , cioè come posso fare che quando clicco su una casella (in questo caso una parte di pagina ) puo' partire una funzione o comunque un istruzione ?

questo è cio' che ho fatto fin ora

<html>
<head>
<script type="text/javascript" language="JavaScript">
var image1=new Image(); image1.src="ics.gif";
var image2=new Image(); image2.src="cerchio.gif";
var cerchio=new array();
var ics=new array();
</script>
</head>


<body>

<table cellpadding="2" cellspacing="5" border="5" bordercolor="red" bordercolorlight="black" bgcolor="white" align="center">
<tr>
<td width="70"> <img src="nothing.gif" border="0" name="rc11"> </td>
<td width="70"> <img src="nothing.gif" border="0" name="rc12"> </td>
<td width="70"> <img src="nothing.gif" border="0" name="rc13"> </td>
</tr><tr>
<td width="70"> <img src="nothing.gif" border="0" name="rc21"> </td>
<td width="70"> <img src="nothing.gif" border="0" name="rc22"> </td>
<td width="70"> <img src="nothing.gif" border="0" name="rc23"> </td>
</tr><tr>
<td width="70"> <img src="nothing.gif" border="0" name="rc31"> </td>
<td width="70"> <img src="nothing.gif" border="0" name="rc32"> </td>
<td width="70"> <img src="nothing.gif" border="0" name="rc33"> </td>
</tr></table><br>

</body>

</html>
bottomap
26-11-2009, 18:14
Ciao,

Direi che il consiglio è quello di documentarsi bene sul javascript, almeno se prevedi di usarlo nelle tue pagine e/o di continuare con la programmazione web.

Quello che devi fare nell'immediato è agganciare un handler onclick alle varie <img> ( <img onclick="funzione_javascript();"> ) in tal modo un click sull'immagine richiamerà la funzione. In alternativa puoi gestire i click sulle celle anziché sulle immagini.

A livello di javascript dovrai tener conto del "turno" (chiaramente inserirai croci e cerchi in maniera alternata).
Dopodiché via DOM non dovrai far altro che modificare la proprietà src delle singole img. Se hai attaccato l'handler al tag img, in this hai l'oggetto per cui this.src="<nuova immagine>"; sarà sufficiente.
Altrimenti this sarà il td e dovrai ottenere il tag img in esso contenuto (getElementsByTagName() o anche childNodes[0] se la struttura è rigida).

Ovviamente vorrai modificare il src dell'immagine solo quando la casella è "vuota", ossia quando src vale (nel tuo caso) "nothing.gif".

NB: Chiaramente essendo tutto lato client, una pagina del genere non ha "memoria"... se effettui un refresh della pagina le cose ritornano allo stato originale (con la griglia vuota). Se hai necessità di memorizzare lo stato dovrai essere in grado di memorizzare informazioni sul server.

Ciaociao :)
umberto1211
26-11-2009, 18:43
grazie , ottimissima spiegazione procedo :D