Łączenie ajax i elementu canvas

0

Chcę zrobić taki programik dla testów i nie działa. Ten programik ma po prostu umożliwiać stawianie krzyżyków na canvasie
kilku użytkownikom i żeby wszyscy widzieli krzyżyki.

<html>
<head>
<title>tesciczek</title>
</head>
<body>
<canvas style="background:#F0F0F0" id="krzyzyki" width="150" height="150" />
<script>
var tab = [[0,0,0],[0,0,0],[0,0,0]];
//var tab = new Array();
//var tablica = [ [11, 12], [21, 22], [31, 32] ];
/*
tab[0][0]=false;
tab[0][1]=false;
tab[0][2]=false;

tab[1][0]=false;
tab[1][1]=false;
tab[1][2]=false;

tab[2][0]=false;
tab[2][1]=false;
tab[2][2]=false;
*/
var X=0;
var Y=0;
var tabt = new Array();
var zmiana=0;
var bok =40;
var ctx=document.getElementById("krzyzyki").getContext('2d');
function rysujKrzysz(x,y)
{
	//ExtendFirefoxEvent(e);
  ctx.moveTo(bok*x, bok*y);
  
  ctx.lineTo(bok*x+bok,bok*y+bok);
  ctx.stroke();
  ctx.moveTo(bok*x, bok*y+bok);
  
  ctx.lineTo(bok*x+bok,bok*y);
  ctx.stroke();
 }
 function marz(x,y)
 {
 	ctx.rect(x*bok,y*bok,bok,bok);
ctx.fillStyle = "#FFFFFF";
ctx.strokeStyle = "#FFFFFF";
ctx.lineWidth = 10;

ctx.fill();
ctx.stroke();
}
function process()
{
    rysujKrzysz(2,2)
	xmlhttp=new XMLHttpRequest();
	xmlhttp.onreadystatechange=function() {
    	if (xmlhttp.readyState==4 && xmlhttp.status==200) {
      	var con=xmlhttp.responseText;
          alert(con[1]);
      	var temp=con.split(" ");
      	var m=0;
      	for(var i =0 ;i<3;i++)
      		for(var j=0;j<3;j++)
      		{
      			var b=tab[i][j]=Boolean(temp[m++]);
      			//if(b)rysujKrzysz(i,j);
      			//else
      			//	marz(i,j);
      		}
      		m=0;
      	
  		zmiana=0;
    }
        
  }
  //index.php?lang=pl&cat=2&sidebar=yes
          	xmlhttp.open("GET","s2.php?czy="+zmiana.toString()+"&X="+X.toString()+"&Y="+Y.toString(),true);
  		xmlhttp.send(null);
    setTimeout("process()",6000);
}
  function nacmysz(e)
  {
  	x=Math.floor(e.layerX/bok);
	Y=Math.floor(e.layerY/bok);
	zmiana=1;
	if(tab[X][Y])tab[X][Y]=0;
	else
	tab[X][Y]=1;
}
  krzyzyki.addEventListener("mousedown", nacmysz, false);
  process();
  </script>
  </body>
  </html>

i jeszcze plik php

<?php
$czy = $_REQUEST['czy'];
$X = $_REQUEST['X'];
$Y = $_REQUEST['Y'];

$filename = "tablicunia.txt";
$content = file($filename);
$array = explode(" ", $content[0]);
if((int)$czy)
{
	if(int($array[$Y*3+$X]))$array[$Y*3+$X]=0;
	else
	$array[$Y*3+$X]=1;
	
	$content = implode(" ", $array);
	$fp = fopen($filename,"w");
	fputs($fp,$content);
	fclose($fp);
}

?>
<?php echo($content[0])?>

i dodatkowo byłbym wdzięczny gdybyście mi powiedzieli jak mam zrobić żeby do póty jest choć jeden użytkownik wszystko
było w skrypcie php i dopiero gdyby ostatni opuścił stronę to byłoby zapisywane w pliku

0

poprawiłem działa lepiej myślę że skrypt jest ok i tak mi się wydaje że zły jest plik z javascriptem

<html>
<head>
<title>tesciczek</title>
</head>
<body>
<canvas style="background:#F0F0F0" id="krzyzyki" width="150" height="150" />
<script>
var tab = [[0,0,0],[0,0,0],[0,0,0]];
//var tab = new Array();
//var tablica = [ [11, 12], [21, 22], [31, 32] ];
/*
tab[0][0]=false;
tab[0][1]=false;
tab[0][2]=false;

tab[1][0]=false;
tab[1][1]=false;
tab[1][2]=false;

tab[2][0]=false;
tab[2][1]=false;
tab[2][2]=false;
*/
var X=0;
var Y=0;
var tabt = new Array();
var zmiana=0;
var bok =40;
var ctx=document.getElementById("krzyzyki").getContext('2d');
function rysujKrzysz(x,y)
{
	//ExtendFirefoxEvent(e);
  ctx.moveTo(bok*x, bok*y);
  
  ctx.lineTo(bok*x+bok,bok*y+bok);
  ctx.stroke();
  ctx.moveTo(bok*x, bok*y+bok);
  
  ctx.lineTo(bok*x+bok,bok*y);
  ctx.stroke();
 }
 function marz(x,y)
 {
 //	ctx.rect(x*bok,y*bok,bok,bok);
ctx.fillStyle = "#FFFFFF";
ctx.fillRect(x*bok,y*bok,bok,bok);
ctx.fill();
}
function process()
{
    //rysujKrzysz(2,2)
	xmlhttp=new XMLHttpRequest();
	xmlhttp.onreadystatechange=function() {
    	if (xmlhttp.readyState==4 && xmlhttp.status==200) {
      	var con=xmlhttp.responseText;
         // alert(con);
      	var temp=con.split(" ");
      	var m=0;
      	for(var i =0 ;i<3;i++)
      		for(var j=0;j<3;j++)
      		{
      			var b=tab[i][j]=parseInt(temp[m++]);
      			if(b)rysujKrzysz(i,j);
      			else{
      			marz(i,j);
                  //alert("jest zero");
      			}
      		}
      		m=0;
      	
  		zmiana=0;
    }
        
  }
  //index.php?lang=pl&cat=2&sidebar=yes
          	xmlhttp.open("GET","s2.php?czy="+zmiana.toString()+"&X="+X.toString()+"&Y="+Y.toString(),true);
  		xmlhttp.send(null);
    setTimeout("process()",500);
}
  function nacmysz(e)
  {
  	X=Math.floor(e.layerX/bok);
	Y=Math.floor(e.layerY/bok);
	zmiana=1;
    //alert(X);
    //alert(Y);
	//if(tab[X][Y])tab[X][Y]=0;
	//else
	//tab[X][Y]=1;
}
  krzyzyki.addEventListener("mousedown", nacmysz, false);
  process();
  </script>
  </body>
  </html>

i plik php

 
<?php
$czy = $_REQUEST['czy'];
$X = $_REQUEST['X'];
$Y = $_REQUEST['Y'];
settype($X, 'integer');
settype($Y, 'integer');
$filename = "tablicunia.txt";
$content = file($filename);
$array = explode(" ", $content[0]);
$krzyzyki = $content[0];
if((int)$czy)
{
	if((int)($array[$Y*3+$X]))$array[$Y*3+$X]='0';
	else
	$array[$Y*3+$X]='1';
	
	$krzyzyki = implode(" ", $array);
	$fp = fopen($filename,"w");
	fputs($fp,$krzyzyki);
	fclose($fp);
}

?>
<?php echo($krzyzyki);
//echo($czy);
//echo($X);
//echo($Y);
?>
i prosiłbym żeby mi ktoś też wskazał jak zrobić żeby krzyżyki były nie w pliku dopóki nie opuści strony ostatni użytkownik
z góry dziękuję za pomoc w programowaniu webowym jestem nowy

1 użytkowników online, w tym zalogowanych: 0, gości: 1