TRIS in javascript

vagabondo___

Nuovo Utente
2 Giu 2020
1
0
1
Devo fare un programma javascript che riproduca il gioco del tris. In pratica basterebbe creare una tabella e riempirla con immagini bianche e quando si clicca su una cella far si che cambi in una croce in un turno e in un cerchio il turno successivo, ma non so come fare. Ci ho provato e vi allego il codice, ma qualcosa non funziona e non saprei cosa. Sapete come aiutarmi?
Grazie mille a tutti quelli che risponderanno.

Codice:
<!Doctype html>
<html lang="it">
<head>
<meta charset="utf-8">
<title>TRIS OR TIC TAC TOE</title>


<script type="text/javascript">
var riga
var colonna
var x
var n
var turno
   var i
   var a=[3]
   for(i=0;i<3;i++)   
   a[i]=[3]

  function gioca() 
  {   
For (i=0; i<9; i++)
{
document.images[i].src="Immagini/vuota.jpg"
a[i]=-1
turno==true
}
  }


function cliccato(n)
  {   
riga=Math.floor((n)/3)
colonna=n%3
If (turno==true)
{
a[riga][colonna]=0
 a[n]=0
document.images[n].src="Immagini/o.jpg"
controlla(0)
}

else
{
a[riga][colonna]=1
a[n]=1
document.images[n].src="Immagini/x.png"
controlla(1)
}
turno=!turno     
 }


  function controlla(x)
{ 
    if ((a[0]==0)&&(a[1]==0)&&(a[2]==0))
{
    alert (“ha vinto il cerchio”)
}

 if ((a[3]==0)&&(a[4]==0)&&(a[5]==0))
{
    alert (“ha vinto il cerchio”)
}

 if ((a[6]==0)&&(a[7]==0)&&(a[8]==0))
{
    alert (“ha vinto il cerchio”)
}

 if ((a[0]==0)&&(a[3]==0)&&(a[6]==0))
{
    alert (“ha vinto il cerchio”)
}

 if ((a[1]==0)&&(a[4]==0)&&(a[7]==0))
{
    alert (“ha vinto il cerchio”)
}

 if ((a[2]==0)&&(a[5]==0)&&(a[8]==0))
{
    alert (“ha vinto il cerchio”)
}

 if ((a[0]==0)&&(a[4]==0)&&(a[8]==0))
{
    alert (“ha vinto il cerchio”)
}

 if ((a[2]==0)&&(a[4]==0)&&(a[6]==0))
{
    alert (“ha vinto il cerchio”)
}




 if ((a[0]==1)&&(a[1]==1)&&(a[2]==1))
{
    alert (“ha vinto la croce”)
}

 
 if ((a[3]==1)&&(a[4]==1)&&(a[4]==1))
{
    alert (“ha vinto la croce”)
}


 if ((a[6]==1)&&(a[7]==1)&&(a[8]==1))
{
    alert (“ha vinto la croce”)
}


 if ((a[0]==1)&&(a[3]==1)&&(a[6]==1))
{
    alert (“ha vinto la croce”)
}

 if ((a[1]==1)&&(a[4]==1)&&(a[7]==1))
{
    alert (“ha vinto la croce”)
}


 if ((a[2]==1)&&(a[5]==1)&&(a[8]==1))
{
    alert (“ha vinto la croce”)
}


 if ((a[2]==1)&&(a[4]==1)&&(a[8]==1))
{
    alert (“ha vinto la croce”)
}

 if ((a[2]==1)&&(a[4]==1)&&(a[6]==1))
{
    alert (“ha vinto la croce”)
}
 }   

</script>


</head>

<body>

<table BORDER=2>
<tbody>
     <tr>
     <td><img src="Immagini/vuota.jpg" onclick="cliccato(0)"></td>
     <td><img src="Immagini/vuota.jpg" onclick="cliccato(1)"></td>
     <td><img src="Immagini/vuota.jpg" onclick="cliccato(2)"></td>
     </tr>
<tr>
     <td><img src="Immagini/vuota.jpg" onclick="cliccato(3)"></td>
     <td><img src="Immagini/vuota.jpg" onclick="cliccato(4)"></td>
     <td><img src="Immagini/vuota.jpg" onclick="cliccato(5)"></td>
     </tr>
     <tr>
     <td><img src="Immagini/vuota.jpg" onclick="cliccato(6)"></td>
     <td><img src="Immagini/vuota.jpg" onclick="cliccato(7)"></td>
     <td><img src="Immagini/vuota.jpg" onclick="cliccato(8)"></td>
     </tr>
</tbody>
</table>
  <input type="button" value=“GIOCA” onclick=“gioca()”>


</body>
</html>
 

Tommy03

Utente Attivo
6 Giu 2018
440
45
28
17
Bassano del Grappa (VI)
Ora funziona (c'erano alcuni errori tipo If invece di if, For invece di for e poi apici sbagliati):
HTML:
<!Doctype html>
<html lang="it">
<head>
<meta charset="utf-8">
<title>TRIS OR TIC TAC TOE</title>
<style>
tr{height:30px;}
td{width:30px;}
</style>

<script type="text/javascript">
var riga
var colonna
var x
var n
var turno
   var i
   var a=[3]
   for(i=0;i<3;i++)  
   a[i]=[3]

  function gioca()
  {  
for(i=0; i<9; i++)
{
document.images[i].src="Immagini/vuota.jpg"
a[i]=-1
turno==true
}
  }


function cliccato(n)
  {  
riga=Math.floor((n)/3)
colonna=n%3
if(turno==true)
{
a[riga][colonna]=0
a[n]=0
document.images[n].src="Immagini/o.jpg"
controlla(0)
}

else
{
a[riga][colonna]=1
a[n]=1
document.images[n].src="Immagini/x.jpg"
controlla(1)
}
turno=!turno    
}


  function controlla(x)
{
    if ((a[0]==0)&&(a[1]==0)&&(a[2]==0))
{
    alert("ha vinto il cerchio")
}

if ((a[3]==0)&&(a[4]==0)&&(a[5]==0))
{
    alert ("ha vinto il cerchio")
}

if ((a[6]==0)&&(a[7]==0)&&(a[8]==0))
{
    alert ("ha vinto il cerchio")
}

if ((a[0]==0)&&(a[3]==0)&&(a[6]==0))
{
    alert ("ha vinto il cerchio")
}

if ((a[1]==0)&&(a[4]==0)&&(a[7]==0))
{
    alert ("ha vinto il cerchio")
}

if ((a[2]==0)&&(a[5]==0)&&(a[8]==0))
{
    alert ("ha vinto il cerchio")
}

if ((a[0]==0)&&(a[4]==0)&&(a[8]==0))
{
    alert ("ha vinto il cerchio")
}

if ((a[2]==0)&&(a[4]==0)&&(a[6]==0))
{
    alert ("ha vinto il cerchio")
}




if ((a[0]==1)&&(a[1]==1)&&(a[2]==1))
{
    alert ("ha vinto la croce")
}


if ((a[3]==1)&&(a[4]==1)&&(a[4]==1))
{
    alert ("ha vinto la croce")
}


if ((a[6]==1)&&(a[7]==1)&&(a[8]==1))
{
    alert ("ha vinto la croce")
}


if ((a[0]==1)&&(a[3]==1)&&(a[6]==1))
{
   alert ("ha vinto la croce")
}

if ((a[1]==1)&&(a[4]==1)&&(a[7]==1))
{
    alert ("ha vinto la croce")
}


if ((a[2]==1)&&(a[5]==1)&&(a[8]==1))
{
    alert ("ha vinto la croce")
}


if ((a[2]==1)&&(a[4]==1)&&(a[8]==1))
{
    alert ("ha vinto la croce")
}

if ((a[2]==1)&&(a[4]==1)&&(a[6]==1))
{
    alert ("ha vinto la croce")
}
}  

</script>


</head>

<body>

<table BORDER=2>
<tbody>
     <tr>
     <td><img src="Immagini/vuota.jpg" onclick="cliccato(0)"></td>
     <td><img src="Immagini/vuota.jpg" onclick="cliccato(1)"></td>
     <td><img src="Immagini/vuota.jpg" onclick="cliccato(2)"></td>
     </tr>
<tr>
     <td><img src="Immagini/vuota.jpg" onclick="cliccato(3)"></td>
     <td><img src="Immagini/vuota.jpg" onclick="cliccato(4)"></td>
     <td><img src="Immagini/vuota.jpg" onclick="cliccato(5)"></td>
     </tr>
     <tr>
     <td><img src="Immagini/vuota.jpg" onclick="cliccato(6)"></td>
     <td><img src="Immagini/vuota.jpg" onclick="cliccato(7)"></td>
     <td><img src="Immagini/vuota.jpg" onclick="cliccato(8)"></td>
     </tr>
</tbody>
</table>
  <input type="button" value="GIOCA" onclick="gioca()">


</body>
</html>