Le blog d'Arcade Village

Vous pouvez donc jouer à cette version en ligne désormais.

Cliquez ici pour jouer à Tetris

Si vous aimez la programmation

Il était facile de gagner mon pari de faire ce jeu en javascript en deux jours (j'ai même rajouté des sons par rapport à la version original), parce que j'avais déjà écrit une version en java et que l'utilisation des classes facilite le passage entre les deux langages.
Voici la classe "element" utilisée dans le jeu s'écrit, d'abord en java, puis en javascript.

La version java


package tetris;
import java.awt.*;

public class element
{
int ia = 0; // Actual apparence index
apparence aa; // Actual apprence object
Dimension rd;
Point pos; // Position, in rectangle value of the left-up corner
public Color c;
int ci;

public element( int cx, int cy )
{
this.rd = new Dimension(cx,cy);
}

public void rotateLeft()
{
ia--;
if ( ia < 0 ) ia = 3;
}

public void rotateRight()
{
ia++;
if ( ia > 3 ) ia = 0;
}

/**
*
* Paint the element with the default rectangle dimension
*
*/
public void paint( Graphics g )
{
paint(g,pos,rd.width,rd.height);
}

/**
*
* Paint the element with a specified rectangle dimension
*
*/
public void paint( Graphics g, Point pos, int cx, int cy )
{
if ( pos == null ) return;
Point p = new Point(pos);
for ( int y = 0 ; y < aa.ty ; y++ )
{
for ( int x = 0; x < aa.tx ; x++ )
{
if ( aa.getValue(ia,x,y) ) // Does we have to draw a rectangle
{ // yes !
drawCase( g,c, p.x, p.y, cx, cy );
}
p.x += 1;
}
p.y += 1;
p.x = pos.x;
}
}

public static void drawCase( Graphics g, Color c, int ax, int ay, int cx, int cy )
{
int x = ax * cx;
int y = ay * cy;
Polygon pl;
g.setColor( c );
g.fillRect(x,y, cx,cy );
pl = new Polygon();
g.setColor(Color.white);
pl.addPoint(x, y + cy );
pl.addPoint(x, y);
pl.addPoint(x + cx, y);
g.drawPolygon(pl);
g.setColor( c.darker() );
pl = new Polygon();
pl.addPoint(x, y + cy );
pl.addPoint(x + cx, y + cy );
pl.addPoint(x + cx, y);
pl.addPoint(x, y + cy );
g.drawPolygon(pl);
}

public boolean touch( int[] is, int ncx, int ncy )
{
return aa.touch(ia, is, pos.x, pos.y, ncx, ncy);
}
}


La vesrion traduite en javascript


class element
{

constructor( cx, cy )
{
this.rd_width = cx;
this.rd_height = cy;
this.ia = 0; // Actual apparence index
this.aa = null; // Actual apprence object
this.posx = 0; // Position, in rectangle value of the left-up corner
this.posy = 0; // Position, in rectangle value of the left-up corner
this.width = 0;
this.height = 0;

this.c = ""; // Color
this.ci = 0;

}

rotateLeft()
{
this.ia--;
if ( this.ia < 0 ) this.ia = 3;
}

rotateRight()
{
this.ia++;
if ( this.ia > 3 ) this.ia = 0;
}

setParameters( apparence, posx, posy, couleur )
{
this.aa = apparence;
this.posx = posx;
this.posy = posy;
this.c = couleur;
}

touch( is, ncx, ncy )
{
return this.aa.touch( this.ia, is, this.posx, this.posy, ncx, ncy);
}


/**
*
* Pathe element with the default rectangle dimension
*
*/
paint( g )
{
this.paintDef(g,this.posx, this.posy, this.rd_width, this.rd_height);
}

/**
*
* Pathe element with a specified rectangle dimension
*
*/
paintDef( g, posx, posy, cx, cy )
{
var px = posx;
var py = posy;
var y = 0;
var x = 0;
for ( y = 0 ; y < this.aa.ty ; y++ )
{
for ( x = 0; x < this.aa.tx ; x++ )
{
if ( this.aa.getValue(this.ia,x,y) ) // Does we have to draw a rectangle
{ // yes !
element.drawCase( g, this.c, px, py, cx, cy );
}
px += 1;
}
py += 1;
px = posx;
}
}

static drawCase( g, c, ax, ay, cx, cy )
{
var x = ax * cx;
var y = ay * cy;
var pl = new Polygon();
g.setColor( c );
g.fillRect(x,y, cx,cy );
g.setColor(Color_WHITE);
pl.addPoint(x, y + cy );
pl.addPoint(x, y);
pl.addPoint(x + cx, y);
g.drawPolygon(pl.tx, pl.ty, false );
g.setColor( Color_GRAY );
pl.reset();
pl.addPoint(x, y + cy );
pl.addPoint(x + cx, y + cy );
pl.addPoint(x + cx, y);
pl.addPoint(x, y + cy );
g.drawPolygon(pl.tx, pl.ty, false);
}

}


Le code est quasiment le même. Il suffit de rajouter des this partout en javascript car il est plus stricte sur ce point et de déclarer toutes les variables de la classe dans le constructeur.

Je vous laisse regarder par vous même. Je pense écrire une série d'article pour vous expliquer comment je créé mes jeux en javascript objet bientôt.