In diesem neuen Teil der Serie werden wir sehen, wie man das Brett und die Figur, die gerade herunterfällt, auf dem Bildschirm anzeigt. Dazu müssen wir es im Browser zeichnen, und die Option, die wir dazu haben, ist das Canvas-Element von HTML.
class Canvas {
static SEPARATION = 2;
#_painting = false;
#_element = null;
#_board = null;
#_piece = null;
constructor(element, board)
{
element.width = 5 + ( board.cols * Board.PIXEL_SIZE );
element.height = 5 + ( board.rows * Board.PIXEL_SIZE );
this._board = board;
this._element = element;
}
// más cosas...
}
Diese Klasse Canvas stellt das gleichnamige HTML-Element dar, das als Parameter im Konstruktor übergeben wird. Da Sie das Brett zeichnen möchten, wird es auch als Parameter übergeben, um auf die zu zeichnenden Punkte zuzugreifen.
Das erste, was es tut, ist die Größe des Canvas-Elements, um das Board aufnehmen zu können, entsprechend den Abmessungen, die das Board selbst über seine Spalten und Zeilen meldet
class Canvas {
// más cosas...
paint()
{
if ( this._painting ) {
return;
}
const ctx = this.element.getContext( "2d" );
const SEP = Canvas.SEPARATION;
this._painting = true;
this.clear();
this.paintBoard( ctx, SEP );
this.paintPiece( ctx, SEP );
this._painting = false;
}
clear()
{
const ctx = this.element.getContext( "2d" );
ctx.clearRect( 0, 0, this.element.width, this.element.height );
}
}
Wir haben Wachen (
_painting), die verhindern, dass mehrere Threads die Methode gleichzeitig (an verschiedenen Punkten) zu einem bestimmten Zeitpunkt ausführen. Dies könnte passieren, wenn die Methode länger als die Zeit zwischen den Neuzeichnungen ausgeführt wurde. Obwohl gut, dann hätten wir viele andere Probleme...
Der nächste Schritt besteht darin, das zu löschen, was beim vorherigen Neuzeichnen auf dem Bildschirm war (Rahmen). Wir tun dies mit der Methode clear(), die clearRect() verwendet, um das Bild auf der Leinwand zu löschen.
Und dann bemalen wir das Brett und dann das Teil, das in diesem Moment herunterfällt. Nun, das wäre es. Ale, Lieferung abgeschlossen.Nein. Mal sehen, wie das Brett und das Stück bemalt sind. Als Erstes muss die Tafel bemalt werden. SEP ist der Abstand, den wir zwischen den Figuren und der Box auf dem Brett lassen. Dieses Feld ist das Erste, was wir im Codeabsatz mit dem Titel
Rahmen zeichnen zeichnen. Es handelt sich um ein einfaches Rechteck, das mit StrokeRect() gezeichnet werden kann, das vier Parameter mit der Position des oberen linken Scheitelpunkts und dann seiner Breite und Höhe akzeptiert.
Das Brett bemalenclass Canvas {
// más cosas...
paintBoard(ctx, SEP)
{
// Draw frame
ctx.strokeWidth = 1;
ctx.strokeStyle = this.board.color;
ctx.strokeRect( 1, 1,
this.element.width - 1,
this.element.height -1 );
// Draw board
for(let numRow = 0; numRow < this.board.rows; ++numRow)
{
const row = this.board.getRow( numRow );
for(let numCol = 0; numCol < row.length; ++numCol) {
if ( Boolean( row[ numCol ] ) ) {
ctx.strokeWidth = 1;
ctx.strokeStyle = this.board.color;
ctx.fillStyle = this.board.color;
ctx.fillRect(
SEP + ( Board.PIXEL_SIZE * numCol ),
SEP + ( Board.PIXEL_SIZE * numRow ),
Board.PIXEL_SIZE,
Board.PIXEL_SIZE );
}
}
}
return;
}
}
Die erste Schleife geht also durch die Zeilen bis
Board.rows. Anschließend erhalten wir die komplette Zeile mit der Methode getRow(), um sie mit der inneren Schleife zu durchlaufen, bis Board.cols.
Gegeben sei also eine Zelle in Zeile/Spaltef/c, Board.getCell(f, c), und Unter Berücksichtigung der Tatsache, dass JavaScript einen Konstruktor für Boolean hat, der eine Ganzzahl akzeptiert, die mit jedem Wert außer 0 wahr bedeutet, zeichnen wir ein Quadrat mit der Seite PIXEL_SIZE. Um also zu wissen, wo die Zeile f zu malen ist, müssen wir mit PIXEL_SIZE multiplizieren und den Abstand zwischen der Platinenbox und der ersten Zelle hinzufügen. Da sie quadratisch sind, finden wir die Spalte c auf die gleiche Weise: SEP + (c * PIXEL_SIZE).
Das Stück bemalenShape), die nichts anderes als eine Matrix ist, haben wir wieder zwei Schleifen, die äußere für Zeilen und die innere für Spalten.
class Canvas {
// más cosas...
paintPiece(ctx, SEP)
{
const SHAPE = this.piece.shape;
for(let numRow = 0; numRow < SHAPE.length; ++numRow) {
const ROW = SHAPE[ numRow ];
for(let numCol = 0; numCol < ROW.length; ++numCol) {
if ( Boolean( ROW[ numCol ] ) ) {
ctx.strokeWidth = 1;
ctx.strokeStyle = this.piece.color;
ctx.fillStyle = this.piece.color;
ctx.fillRect(
SEP
+ ( this.piece.col * Board.PIXEL_SIZE )
+ ( numCol * Board.PIXEL_SIZE ),
SEP +
+ ( this.piece.row * Board.PIXEL_SIZE )
+ ( numRow * Board.PIXEL_SIZE ),
Board.PIXEL_SIZE,
Board.PIXEL_SIZE );
}
}
}
return;
}
}
Stück.Reihe/Stück. Spalte). Sie müssen dies mit PIXEL_SIZE multiplizieren und den Abstand mit der Box addieren.
Das obige ist der detaillierte Inhalt vonErstellen eines Tetris mit JavaScript IV: Canvas. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
