27-01-2007, 05:38 PM
bonjour,
j ai un petit soucie sur le tetris ,bon dans l ensemmble il fonctionne tres bien, c un probleme d affichage des cubes de forme qui ne s aligne pas dans les cases du tableaux, je vous montre une image qui vous en diras plus,( le carrer bleux et les carrer vers ne sont pas dans les case du tableau) ,ce qui fait que du cotee gauche les carrer vers ne touche pas le bord et a droite cela depasse un peux ,je pense que l erreur et dans le javascript mais je suis un peux paumer la, si quelqun pouvais m aider je vous en remercie ,je vous montre le code complet plus bas il risque d etre un peux long puisque je l est mie au complet.
![[Image: nouvelleimagevk6.jpg]](http://img245.imageshack.us/img245/8042/nouvelleimagevk6.jpg)
grand merci pour votre aide
d@d
j ai un petit soucie sur le tetris ,bon dans l ensemmble il fonctionne tres bien, c un probleme d affichage des cubes de forme qui ne s aligne pas dans les cases du tableaux, je vous montre une image qui vous en diras plus,( le carrer bleux et les carrer vers ne sont pas dans les case du tableau) ,ce qui fait que du cotee gauche les carrer vers ne touche pas le bord et a droite cela depasse un peux ,je pense que l erreur et dans le javascript mais je suis un peux paumer la, si quelqun pouvais m aider je vous en remercie ,je vous montre le code complet plus bas il risque d etre un peux long puisque je l est mie au complet.
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=" ";
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"> </td>
<td class="caseTB"> </td>
<td class="caseTB"> </td>
<td class="caseTB"> </td>
</tr>
<tr>
<td class="caseTB"> </td>
<td class="caseTB"> </td>
<td class="caseTB"> </td>
<td class="caseTB"> </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>grand merci pour votre aide
d@d