Eccola come promesso:
Crea il file index.php ed al suo interno mettici questo:
codice:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>...</title>
<link rel="stylesheet" href="style.css" type="text/css" />
<script type="text/javascript" src="core.js"></script>
</head>
<body onload="createTable(); timer = window.setInterval('getMove()', 1000);">
<div id="tableBox"></div>
<div id="report"></div>
</body>
</html>
Crea dunque il file core.js ed al suo interno questo:
codice:
var _x_stop = 1; //x di chiusura
var _y_stop = 5; //y di chiusura
var _x = new Array(); //x storico
var _y = new Array(); //y storico
var _time = new Array(); //time storico
//crea dinamicamente la scacchiera
function createTable()
{
var tableHTML = "<table>";
for(y = 0; y < 10; y++)
{
tableHTML += "<tr>";
for(x = 0; x < 10; x++)
{
tableHTML += format("<td id='td{0}{1}'>{2};{3}</td>",y,x,y+1,x+1);
}
tableHTML += "</tr>";
}
tableHTML += "</table>";
document.getElementById("tableBox").innerHTML = tableHTML;
setSquare(9,9);
}
//colora le caselle dove il server ha mosso
function setSquare(x,y)
{
document.getElementById(format("td{0}{1}",x-1,y-1)).style.background = "red";
}
//controlla che sulla casella x,y il server non abbia già mosso, controlla anche la sequenza xy di chiusura
function checkSquare(x,y, time)
{
for(var i = 0; i < _x.length; i++)
if(_x[i] == x && _y[i] == y)
{
getMove();
return;
}
if(x == _x_stop && y == _y_stop)
{
window.clearInterval(timer);
refreshReport();
document.getElementById("report").innerHTML += format("<span style='color:red;'>MOSSO SU {0},{1} => COMBINAZIONE DI CHIUSURA!!!</span>",_x_stop,_y_stop);
return;
}
setSquare(x,y);
_x.push(x);
_y.push(y);
_time.push(time);
refreshReport();
}
//effettua la mossa
function getMove()
{
var xmlhttp;
if(window.XMLHttpRequest)
xmlhttp = new XMLHttpRequest();
else
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
xmlhttp.onreadystatechange=function()
{
if(xmlhttp.readyState==4 && xmlhttp.status==200)
{
var data = xmlhttp.responseText.split(",");
checkSquare(parseInt(data[0]),parseInt(data[1]), data[2]);
}
}
xmlhttp.open("GET","getPosition.php",true);
xmlhttp.send();
}
//stampa le varie mosse (storico)
function refreshReport()
{
spanHTML = "";
for(var i = 0; i < _x.length; i++)
{
spanHTML += format("<SPAN>{0},{1},{2}</SPAN>
",_x[i],_y[i],_time[i]);
}
document.getElementById("report").innerHTML = spanHTML;
}
function format( str ) //par1, par2, ... parN
{
if ( arguments.length <= 1 ) return str; //se non ci sono parametri restituisce la stringa
for( var token = 0; token <= (arguments.length - 2); token++ )
str = str.replace( new RegExp( "\\{" + token + "\\}", "gi" ),arguments[ token + 1 ] ); //sostiuisce i token con i parametri
return str;
}
Crea il file getPosition.php
codice:
<?php
printf("%s,%s,%s", rand(1,10), rand(1,10), date("H:i:s"));
?>
Ed infine il file style.css
codice:
table
{
border: 3px solid black;
}
td
{
border: 1px solid black;
height: 32px;
width: 32px;
font-size: 12px;
color: gray;
text-align: center;
}
Spero che capirai il codice nonostante abbia omesso la maggior parte dei commenti, ad ogni modo per qualsiasi dubbio basta che chiedi 
.
Dunque, index.php è semplicemente la struttura HTML, quando il body carica fa partire la funzione che genera dinamicamente la tabella ed il timer per le mosse. Tutte le funzioni sono nel foglio js esterno core.js. Core poichè è il vero e proprio nucleo della pagina (anche engine stava bene, non sapevo decidermi 
), è la parte più ostica, non esitare a chiedere chiarimenti. Per quanto riguarda getPosition.php è talmente banale che si commenta da sola, uguale per il foglio di stile... come ti avevo già detto ho messo solo la grafica essenziale
Spero che ti piaccia!!
NB. Un'ultima cosa, la combinazione di chiusura xy (impostata da me a 1,5) è statica e quindi sempre uguale! L'ho fatta così perché programmando mi sono accorto che neanche quel punto è esplicitato a dovere. chi decide la combinazione? Server o Client? E con quale logica? Statica o Dinamica? Se chiarisci quel punto aggiornerò anche la chiusura
Rispondi quotando
