[HTML - Javascript ] consiglio gioco del Tris

umberto1211 · 26-11-2009, 18: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

Codice:

<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, 19: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, 19:43

grazie , ottimissima spiegazione procedo

26-11-2009, 19:14	#2
bottomap Member Iscritto dal: Feb 2005 Città: Prato Messaggi: 149	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 __________________ Venite a visitarci qui:http://www.bottomap.com Bottomap is a proud Masterdrive.it moderator Ultima modifica di bottomap : 26-11-2009 alle 19:19.

26-11-2009, 19:43	#3
umberto1211 Senior Member Iscritto dal: Sep 2007 Messaggi: 1499	grazie , ottimissima spiegazione procedo __________________ Trattative concluse perfettamente con : sghimbo , schumifast , nikybaiy , Alfio89 , casertano, e.comet, angelogenovese2,pakyweb1,bronzodiriace , agostino333,damiaaans,EskevarMkDrake

Strumenti
Mostra una versione stampabile Invia questa pagina per email