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 = "&nbsp;";
 }
 
 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 = "&nbsp;";
  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">&nbsp;</td>
</tr>
<tr>
<td id="e2" width="50px" height="50px" style="border:1px solid black">&nbsp;</td>
</tr>
<tr>
<td id="e3" width="50px" height="50px" style="border:1px solid black">&nbsp;</td>
</tr>
<tr>
<td id="e4" width="50px" height="50px" style="border:1px solid black">&nbsp;</td>
</tr>
<tr>
<td id="e5" width="50px" height="50px" style="border:1px solid black">&nbsp;</td>
</tr>
<tr>
<td id="e6" width="50px" height="50px" style="border:1px solid black">&nbsp;</td>
</tr>
<tr>
<td id="e7" width="50px" height="50px" style="border:1px solid black">&nbsp;</td>
</tr>
<tr>
<td id="e8" width="50px" height="50px" style="border:1px solid black">&nbsp;</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>