jeux de mots

jeux de mot

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>JS-DHTML-Tetris</title>
<meta name="Title" lang="fr" content="jeu de TETRIS">
<meta name="Keywords" lang="fr" content="javascript jeu tetris dhtml ghislain lavoie">
<meta name="Author" lang="fr" content="Ghislain Lavoie">
<!--
Jeu dévelopé par Ghislain Lavoie
28 août 2005
lavoghis@hotmail.com
-->
<STYLE type="text/css">
body {background-color:#d2d2d2;color:#000000;font-family:tahoma;}
input {background-color:#e6e6e6;width:120px;}
.caseTB {background-color:#8f8f8f;border:1px #f8cc8b inset;width:15px;height:15px;font-size:5px;}
.inpText {background-color:#9f9f9f;width:70px;border:0px;border-bottom:1px black solid;text-align:right;}
#aide {width:430px;height:400px;background-color:#d2d2d2;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>
<script type="text/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;
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 = "#8f8f8f";
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>
</head>
<body onload="initialiserJeux()" onclick="document.key.down.focus();">
<table width="100%" height="100%" border="0" bgcolor="#d2d2d2">
<tr><td align="center" valign="middle">
<table id="posJeux" style="border:6px #8f8f8f groove;" width="430" height="400" border="0" cellpadding="0" cellspacing="0" bgcolor="#e6e6e6">
<tr>
<td width="55%" align="center">
<div style="position:relative;">
<div style="position:relative;" id="jeux"></div></div></td>
<td width="45%" align="center" bgcolor="#9f9f9f"><span style="font-size:22px;font-weight:bold;">TETRIS</span></br></br>
<table border="0" height="30px" bgcolor="#8f8f8f">
<tr><td height="30px;" align="center">
<div>
<div id="next" style="position:relative;">
<table cellpadding="0" cellspacing="0" bgcolor="#8f8f8f" 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" type="text" value="0" size="6"></td></tr>
<tr><td>Niveau</td><td>: <input class="inpText" name="niveaux" type="text" value="0" size="6"></td></tr>
<tr><td>Lignes</td><td>: <input class="inpText" name="lignes" type="text" value="0" size="6"></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é sue 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 dans 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>

Aucune note. Soyez le premier à attribuer une note !

Les commentaires sont clôturés

Créer un site gratuit avec e-monsite - Signaler un contenu illicite sur ce site

×