Realizzare il gioco del tris usando javascript, il dom e l'oggetto event-.

aneres

Nuovo Utente
27 Feb 2012
21
0
0
Il gioco non deve valutare il vincitore , ma permettere solamente l'introduzione dei simboli ( X e O) sulla scacchiera (3 x 3) in maniera corretta (i simboli vanno inseriti solo su celle vuote)

questo è il codice fatto , quando clicco il tasto sinistro mi dovrebbe apparire l'immagine "x" (e non va), mentre quando clicco il destro l'immagine "o" quest'ultimo funziona perchè?

codice html:
HTML:
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<script type="text/javascript" src="EX16.js"></script>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Senza nome 1</title>
<style type="text/css">
.style1 {
	border-width: 0px;
}
.style2 {
	border-style: solid;
	border-width: 1px;
}
</style>
</head>

<body>

<table style="width: 50%; height: 108px;" class="style1">
	<tr>
		<td id="0.0" style="width: 100px; height: 100px" class="style2" onmousedown="segnaSimbolo(event,'0.0')"></td>
		<td id="0.1" style="height: 100px; width: 100px" class="style2" onmousedown="segnaSimbolo(event,'0.1')"></td>
		<td id="0.2" style="height: 100px; width: 100px" class="style2" onmousedown="segnaSimbolo(event,'0.2')"></td>
	</tr>
	<tr>
		<td id="1.0" style="width: 100px; height: 100px;" H class="style2" onmousedown="segnaSimbolo(event,'1.0')"></td>
		<td id="1.1" style="width: 100px; height: 100px;" class="style2" onmousedown="segnaSimbolo(event,'1.1')"></td>
		<td id="1.2" style="width: 100px; height: 100px;" class="style2" onmousedown="segnaSimbolo(event,'1.2')"></td>
	</tr>
	<tr>
		<td id="2.0" style="width: 100px; height: 99px;" class="style2" onmousedown="segnaSimbolo(event,'2.0')"></td>
		<td id="2.1" style="width: 100px; height: 99px;" class="style2" onmousedown="segnaSimbolo(event,'2.1')"></td>
		<td id="2.2" style="width: 100px; height: 99px;" class="style2" onmousedown="segnaSimbolo(event,'2.2')"></td>
	</tr>
</table>

</body>

</html>
codice javascript:
Codice:
function segnaSimbolo(evento , id){
cella = document.getElementById(id);
imma = document.createElement("img");

switch (evento.button){
	case 1:
	imma.setAttribute("src","x.png");
	imma.setAttribute("width","90px");
	imma.setAttribute("height","90px");
	cella.setAttribute("align","center");
	cella.appendChild(imma);
	cella.setAttribute("onmousedown" , "");	  
	break;
	case 2:
	imma.setAttribute("src","o.jpg");
	imma.setAttribute("width","90px");
	imma.setAttribute("height","90px");
	cella.setAttribute("align","center");
	cella.appendChild(imma);
	document.body.oncontextmenu=function(){return false;}
	cella.setAttribute("onmousedown" , "");	 
	break;
}
 
}
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
Ciao,
nello switch javascript prova a mettere case 0 invece che case 1

Codice:
switch (evento.button){                    
                    case 0:
                         -------
                    break;
                    case 2:
                         -------
                    break;
}
 

aneres

Nuovo Utente
27 Feb 2012
21
0
0
Ciao,
nello switch javascript prova a mettere case 0 invece che case 1

Codice:
switch (evento.button){                    
                    case 0:
                         -------
                    break;
                    case 2:
                         -------
                    break;
}
grazie!... ora va!...cioè prima mi considerava il tasto sinistro la rotellina del mouse ora no!..spero che vada anche sul pc della mia prof u.u
 

aneres

Nuovo Utente
27 Feb 2012
21
0
0
Ciao,
nello switch javascript prova a mettere case 0 invece che case 1

Codice:
switch (evento.button){                    
                    case 0:
                         -------
                    break;
                    case 2:
                         -------
                    break;
}
volevo chiederti un accertamento su un mio dubbio onmousedown da dove riconosce il tasto destro e sinistro?? e questo a cosa serve?
Codice:
document.body.oncontextmenu=function()
	{
	return false;
    }
?
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
Ciao,

sono arrivato alla soluzione mettendo nel codice

Codice:
alert(evento.button);
Se lo provi noterai che assegna 0 al tasto sinistro 1 a quello centrale e 2 a quello di destra

di conseguenza con lo switch prendi in considerazione il tasto premuto

La funzione serve a disabilitare il menu che esce premendo il tasto destro del mouse