probleme d affichage sur le jeu tetris

Code :
<?php include "session/session.inc.php";?>

<html><!DOCTYPE html PUBLIC"-//w3c//DTD XHTML 4.1 Strict//EN""http://www.w3.org/TR/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="f">

<head>

<title>tetris</title>

<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1"/>                       

<link rel="stylesheet" media="screen" type="text/css" title="style" href="feuille de style/style.css" />

<script language="javascript">

var ok = null;

var formCour = null;

var formNext = null;

var cases = new Array();

var formes = new Array();

var niveau = 1;

var point = 0;

var ligne = 0;

var pause = false;

var fin = true;

var coulForme = new Array("#81e7f5","#0eb16c","#404fff","#fcd836","#c681f5","#7ffd29","#ff0000");

formes[0] = new Array(-1,0,-1,1,0,1,0,2,-2,1,-1,1,-1,0,0,0,-1,0,-1,1,0,1,0,2,-2,1,-1,1,-1,0,0,0);

formes[1] = new Array(0,0,0,1,-1,1,-1,2,-2,0,-1,0,-1,1,0,1,0,0,0,1,-1,1,-1,2,-2,0,-1,0,-1,1,0,1);

formes[2] = new Array(-1,1,-1,2,0,1,0,2,-1,1,-1,2,0,1,0,2,-1,1,-1,2,0,1,0,2,-1,1,-1,2,0,1,0,2);

formes[3] = new Array(0,2,0,1,0,0,-1,0,0,1,-1,1,-2,1,-2,2,-1,0,-1,1,-1,2,0,2,-2,1,-1,1,0,1,0,0);

formes[4] = new Array(0,0,0,1,0,2,-1,2,-2,1,-1,1,0,1,0,2,-1,2,-1,1,-1,0,0,0,0,1,-1,1,-2,1,-2,0);

formes[5] = new Array(0,0,0,1,0,2,0,3,-3,1,-2,1,-1,1,0,1,0,0,0,1,0,2,0,3,-3,1,-2,1,-1,1,0,1);

formes[6] = new Array(-1,0,-1,1,-1,2,0,1,-2,1,-1,1,0,1,-1,0,0,2,0,1,0,0,-1,1,0,0,-1,0,-2,0,-1,1);

var tailleCase = 15;

var nbCaseX = 12;// ici si je met 13 cases les cubes de forme ne reste pas dans le tableaux ??????

var nbCaseY = 22;

var taille = tailleCase + (document.all?0:-2);

var rebord = (document.all)?0:2;

var posx,posy;

var formCour, formSuiv;

function cube(y,x,py,px,coul)

{

this.el = document.createElement("div");

this.el.style.position = "absolute";

this.el.style.top = ((taille+rebord)*(y+py))+"px";

this.el.style.left = ((taille+rebord)*(x+px))+"px";

this.el.style.display = (y+py>=0)?"block":"none";

this.el.style.width = taille+"px";

this.el.style.height = taille+"px";

this.el.style.backgroundColor = coul;

this.el.style.border="1px black solid";

this.el.style.fontSize = "0px";

}

function forme(no,py,px,leDiv)

{

var i,j;

this.cubes = new Array();

this.rotation = 0;

this.no = no;

for (i =0, j=0;i<8;i = i+2,j++)

{

this.cubes[j] = new cube(formes[no][i],formes[no][i+1],py,px,coulForme[no])

leDiv.appendChild(this.cubes[j].el);

}

}

function deplacerForme(nbY, nbX, plusRotation,py,px)

{

var i,j,x,y,rotation;

rotation = (formCour.rotation + plusRotation);

rotation = rotation<0?3:rotation>3?0:rotation;

for (i =rotation*8,j=0;i<(rotation*8)+8;i = i+2,j++)

{

y = formes[formCour.no][i] + py + nbY;

x = formes[formCour.no][i+1] + px + nbX;

if (x==-1 || y==nbCaseY || x==nbCaseX || (cases[y] && cases[y][x]!=null)) return false;

}

formCour.rotation = rotation;

py = py + nbY;

px = px + nbX;

for (i =rotation*8,j=0;i<(rotation*8)+8;i = i+2,j++)

{

y = (formes[formCour.no][i] + py);

formCour.cubes[j].el.style.display = (y>=0)?"block":"none";

formCour.cubes[j].el.style.top = ((taille+rebord) * y)+"px";

formCour.cubes[j].el.style.left = ((taille+rebord) * (formes[formCour.no][i+1] + px))+"px";

}

return true;

}

function initialiserJeux()

{

var tbl,tb,cols,rows,row,col;

bord = document.getElementById("jeux");

prochain = document.getElementById("next");

bord.style.width = tailleCase * nbCaseX;

bord.style.height = tailleCase * nbCaseY;

bord.style.backgroundColor = "#dcdcdc";

tbl = document.createElement("table");

tb= document.createElement("tbody");

tbl.appendChild(tb);

tbl.cellSpacing="0";

tbl.cellPadding="0";

tbl.width = tailleCase * nbCaseX;

tbl.height = tailleCase * nbCaseY;

for (rows=0;rows<nbCaseY;rows++)

{

row = document.createElement("TR");

for (cols=0;cols<nbCaseX;cols++)

{

col = document.createElement("td");

col.className="caseTB";

col.innerHTML="&nbsp;";

row.appendChild(col);

}

tbl.lastChild.appendChild(row);

}

bord.appendChild(tbl);

document.key.down.focus();

document.key.down.onkeydown = verifierActionJoueur;

}

function nouvellePartie()

{

var i;

initCases();

if (formCour && !fin)

{

for (i=0; i<4;i++)

bord.removeChild(formCour.cubes[i].el);

}

posx = ((nbCaseX / 2)-2);

posy = -1;

vitesse = 650;

niveau = 1;

point = 0;

ligne = 0;

fin = false;

formNext =new forme( Math.floor(Math.random()*formes.length),1,0,prochain);

formCour =new forme( Math.floor(Math.random()*formes.length),posy,posx,bord);

pts = setInterval("majPointage()",1000);

setTimeout("partieEnCour()",vitesse);

}

function partieEnCour()

{

var x,y,i,cols;

if (!deplacerForme(1,0,0,posy,posx))

{

point = point + niveau;

var Y = new Array();

for (i =formCour.rotation*8,j=0;i<(formCour.rotation*8)+8;i = i+2,j++)

{

prochain.removeChild(formNext.cubes[j].el);

y = formes[formCour.no][i] + posy;

Y[Y.length] = y;

x = formes[formCour.no][i+1] + posx;

if (y>=0)

{

cases[y][x] = formCour.cubes[j].el;

}

}

Y.sort();

for (i=0;i<Y.length;i++)

{

if (i==0 || ( i>0 && Y[i]!=Y[i-1]))

{

for (cols=0;cols<nbCaseX;cols++)

if (cases[Y[i]] && cases[Y[i]][cols]==null) break;

if (cols==nbCaseX) enleverLignePleine(Y[i]);

}

}

if (posy==-1)

{

fin = true;

clearTimeout(ok);

clearInterval(pts);

majPointage();

document.main.start.value = "COMMENCER";

alert("Partie Terminée!!!");

return;

}

posx = ((nbCaseX / 2)-2);

posy = -1;

formCour = new forme(formNext.no,posy,posx,bord);

formNext = new forme( Math.floor(Math.random()*formes.length),1,0,prochain);

}

else

{

posy++;

}

ok = setTimeout("partieEnCour()",vitesse);

}

function enleverLignePleine(y)

{

ligne++;

point = point + 100;

niveau = Math.floor(ligne/5)+1;

vitesse = 700 - (niveau * 65)

var rows,cols;

for (rows=y;rows>=0;rows--)

for (cols=0;cols<nbCaseX;cols++)

{

if (rows!=y)

{

if (cases[rows][cols]!=null)

cases[rows][cols].style.top = (cases[rows][cols].offsetTop + taille + rebord)+"px";

cases[rows+1][cols] = cases[rows][cols];

cases[rows][cols]= null;

}

else

bord.removeChild(cases[rows][cols]);

}

}

function initCases()

{

var rows,cols;

for (rows=0;rows<nbCaseY;rows++)

{

if (!cases[rows]) cases[rows] = new Array();

for (cols=0;cols<nbCaseX;cols++)

{

if (cases[rows][cols])

bord.removeChild(cases[rows][cols]);

cases[rows][cols] = null;

}

}

}

function verifierActionJoueur(ev)

{

if (pause) return;

var keyPress = document.all?event.keyCode:ev.which;

if (keyPress == 37)

if (deplacerForme(0,-1,0,posy,posx)) posx--;

if (keyPress == 39)

if(deplacerForme(0,1,0,posy,posx)) posx++;

if (keyPress == 38) deplacerForme(0,0,-1,posy,posx)

if (keyPress == 40) deplacerForme(0,0,1,posy,posx)

if (keyPress == 32) {while(deplacerForme(1,0,0,posy,posx)){posy++;point = point + niveau;}}

}

function majPointage()

{

document.main.points.value = point;

document.main.niveaux.value = niveau;

document.main.lignes.value = ligne;

}

function topElement(e)

{

return ((e && topElement != topElement.caller)?e.offsetTop:0) + ((e && e.offsetParent)?e.offsetParent.offsetTop + topElement(e.offsetParent):0);

}

function leftElement(e)

{

return ((e && leftElement != leftElement.caller)?e.offsetLeft:0) + ((e && e.offsetParent)?e.offsetParent.offsetLeft + leftElement(e.offsetParent):0);

}

function help()

{

var h = document.getElementById("aide");

var j = document.getElementById("posJeux");

h.style.top = topElement(j)

h.style.left = leftElement(j)

if (!pause && !fin) document.main.start.onclick();

h.style.display = "block"

}

</script>

<STYLE type="text/css">

input

{

width:120px;

}

.caseTB

{

border:1px #000000 inset;

width:15px;

height:15px;

font-size:5px;

}

.inpText

{

width:70px;

border:0px;

border-bottom:1px black solid;

text-align:right;

}

#aide

{

width:430px;

height:400px;

background-color:#dcdcdc;

overflow:auto;

font-family:arial;

font-size:14px;

position:absolute;

display:none;

}

p

{

margin:5px;

}

p.para

{

text-align:justify;

text-justify:auto;

}

p.para:first-letter

{

font-weight:bold;

}

</STYLE>

</head>

<body onload="initialiserJeux()" onclick="document.key.down.focus();"><br/><br/><br/><br/><br/><br/>

<table border="0" align="center">

<tr>

<td align="center">

<table id="posJeux" style="border:6px #ffffff groove;" width="430" height="400" border="0" cellpadding="0" cellspacing="0" background="images/bois/sapin.jpg">

<tr>

<td width="60%" align="center"><div style="position:relative;" id="jeux"></div></td>

<td width="45%" align="center" background="images/bois/sapin.jpg"><span style="font-size:22px;font-weight:bold;">TETRIS<br/><?php echo $pseudo ;?></span><br/><br/>

<table border="0" height="30px" background="images/bois/sapin.jpg">

<tr>

<td height="30px;" align="center">

<div>

<div id="next" style="position:relative;">

<table cellpadding="0" cellspacing="0" background="images/bois/sapin.jpg" width="60px" height="30px">

<tr>

<td class="caseTB">&nbsp;</td>

<td class="caseTB">&nbsp;</td>

<td class="caseTB">&nbsp;</td>

<td class="caseTB">&nbsp;</td>

</tr>

<tr>

<td class="caseTB">&nbsp;</td>

<td class="caseTB">&nbsp;</td>

<td class="caseTB">&nbsp;</td>

<td class="caseTB">&nbsp;</td>

</tr>

</table>

</div>

</div>

</td>

</tr>

</table>

<br/>

<br/>

<form name="main">

<input type="button" name="start" value="COMMENCER" onclick="clearTimeout(ok);if (pause) {pause=false;partieEnCour();this.value='PAUSE'} else {if (this.value=='COMMENCER') {nouvellePartie();this.value='PAUSE'} else {this.value='CONTINUER';pause = true;}}">

<br><br><input type="button" value="AIDE" onclick="help();">

<br><br>

<table>

<tr><td>Pointage</td><td>: <input class="inpText" name="points" value="" type="text" value="0" size="6" READONLY></td></tr>

<tr><td>Niveau</td><td>: <input class="inpText" name="niveaux" value="" type="text" value="0" size="6" READONLY></td></tr>

<tr><td>Lignes</td><td>: <input class="inpText" name="lignes" value="" type="text" value="0" size="6" READONLY></td></tr>

</table>

</form>

</td>

</tr>

</table>

</td></tr>

</table>

<div style="position:absolute;top:-100px;left:0px;">

<form name="key" onsubmit="return false;"><input name="down" type="texte" value=""></form>

</div>

<div id="aide">

<b>Règles du jeu.</b>

<p class="para">Le jeu est basé sur le jeu classique TETRIS. Le but est de placer des formes (7 formes cubiques différentes) qui descendent du haut vers la bas d'un tableau pour en former des lignes horizontales pleines. Dès qu'elle est pleine, la ligne est détruite et tous les cubes au-dessus de la ligne descendent d'une rangée.</p>

<p class="para">Les touches de directions (flèches) et la barre d'espacement sont utilises pour le jeu. Les flèches droite et gauche pour contrôler horizontalement la forme qui descend. Les flèches du haut et bas pour contrôler la rotation de la forme.</p>

<p class="para">A chaque multiple de cinq lignes complétées, le niveau de difficulté augmente de 1 et la vitesse de descente également.</p>

<p class="para">Le jeu se termine lorsqu'il n'est plus possible de faire descendre des formes sur le tableau.</p>

<br>

<b>Attribution des points :</b>

<p>(1 point * niveau de difficulté) est attribuée lorsqu'une forme est placée sur le tableau ainsi qu'a chaque rangée descendu par la forme lors de l'utilisation de la barre d'espacement.</p>

<p>100 points sont attribués lorsqu'une ligne est complétée.</p>

<p style="float:left;">Bonne partie.</p><div style="float:right;"><button onclick="document.getElementById('aide').style.display='none';">Quitter</button></div>

</div>

</body>

</html>