Questa puo' essere una delle tante soluzioni.
codice HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<script language="JavaScript" type="text/javascript">
<!--
indice_partita1 = 0;
inizio_partita = new Array();
inizio_partita[0] = new Array("e2","torre N1");
inizio_partita[1] = new Array("e4","alfiere B1");
inizio_partita[2] = new Array("e5","alfiere B2");
inizio_partita[3] = new Array("e7","torre B1");
mosse_partita1 = new Array();
// da a
mosse_partita1[0] = new Array("e2","e4");
mosse_partita1[1] = new Array("e4","e5");
mosse_partita1[2] = new Array("e5","e6");
mosse_partita1[3] = new Array("e6","e7");
function inizio_partita1() {
indice_partita1 = 0;
document.getElementById("mossa").innerHTML = indice_partita1;
var i = 0;
for (i=1;i<=8;i++) {
document.getElementById("e"+i).innerHTML = " ";
}
var j = inizio_partita.length;
for (i=0;i<j;i++) {
document.getElementById(inizio_partita[i][0]).innerHTML = inizio_partita[i][1];
}
}
function avanti_partita1() {
if (indice_partita1 < mosse_partita1.length) {
// salvo
mosse_partita1[indice_partita1][2] = document.getElementById(mosse_partita1[indice_partita1][0]).innerHTML;
mosse_partita1[indice_partita1][3] = document.getElementById(mosse_partita1[indice_partita1][1]).innerHTML;
document.getElementById(mosse_partita1[indice_partita1][1]).innerHTML = document.getElementById(mosse_partita1[indice_partita1][0]).innerHTML;
document.getElementById(mosse_partita1[indice_partita1][0]).innerHTML = " ";
indice_partita1++;
document.getElementById("mossa").innerHTML = indice_partita1;
} else {
alert('Non ci sono più mosse');
}
} // function avanti_partita1()
function indietro_partita1() {
if (indice_partita1 > 0) {
// ripristino
indice_partita1--;
document.getElementById(mosse_partita1[indice_partita1][0]).innerHTML = mosse_partita1[indice_partita1][2];
document.getElementById(mosse_partita1[indice_partita1][1]).innerHTML = mosse_partita1[indice_partita1][3];
document.getElementById("mossa").innerHTML = indice_partita1;
}
} // indietro_partita1()
//-->
</script>
</head>
<body>
<table summary="">
<tr>
<td id="e1" width="50px" height="50px" style="border:1px solid black"> </td>
</tr>
<tr>
<td id="e2" width="50px" height="50px" style="border:1px solid black"> </td>
</tr>
<tr>
<td id="e3" width="50px" height="50px" style="border:1px solid black"> </td>
</tr>
<tr>
<td id="e4" width="50px" height="50px" style="border:1px solid black"> </td>
</tr>
<tr>
<td id="e5" width="50px" height="50px" style="border:1px solid black"> </td>
</tr>
<tr>
<td id="e6" width="50px" height="50px" style="border:1px solid black"> </td>
</tr>
<tr>
<td id="e7" width="50px" height="50px" style="border:1px solid black"> </td>
</tr>
<tr>
<td id="e8" width="50px" height="50px" style="border:1px solid black"> </td>
</tr>
</table>
<input type="button" value="Inizio partita" onclick="inizio_partita1()"/>
<input type="button" value="Avanti" onclick="avanti_partita1()"/>
<input type="button" value="Indietro" onclick="indietro_partita1()"/>
<br>
Mossa : <span id="mossa"></span>
</body>
</html>