CODEWITHSUNDEEP
javascript
user3843041
user3843041

Reputation: 35

having tetris blocks fall in javascript

I was wondering how to go about making tetris pieces fall, I have followed a few tutorials and I have made the complete game, but I am a little stumped on how they actually got the pieces to fall, and how they made the 2d arrays into actual blocks, can someone guide me in the right direction here? I am just trying to learn the process better, this was all done in a canvas.

for example, here is the lpiece

function LPiece(){
//the pieces are represented in arrays shaped like the pieces, for example, here is an L.
//each state is a form the piece takes on, so each state after this.state1 is this.state1 rotated.
//each state is individual so we can call out which state to use depending on the option selected.
this.state1 = [ [1, 0],
                [1, 0],
                [1, 1]];
//and heres a different piece
this.state2 = [ [0, 0, 1],
                [1, 1, 1]];

this.state3 = [
                [1,1],
                [0,1],
                [0,1]];
this.state4 = [
                [1, 1, 1],
                [1, 0, 0]];

//and now we tie them all to one

this.states = [this.state1, this.state2, this.state3, this.state4];
//reference to the state the piece is currently in.
this.curState = 0;
//color of piece
this.color = 0;
//tracking pieces of grid of x and y coords, this is set at 4, -3 so it isn't initially visable.
this.gridx = 4;
this.gridy = -3;
}

    piece.color = Math.floor(Math.random() *8);

I added comments to try to make me understand initially and here is the image they used for each block, each block was one color https://i.sstatic.net/kMXsn.png

so how would he translate the array to be an actual block, and then get that to fall from the board, I have searched endlessly, I am just confused, like how he set the gridx and gridy to the x and y coordinates without ever saying this.y = gridy or something like that? does anyone have any suggestions on what to do here? thanks

here is how he drew the piece i guess, I still don't understand how he linked the x and y to the gridx and y of the piece without actually saying the x and y is grid x and y.

function drawPiece(p){
//connecting the y and x coords or pieces to draw using the arrays to pieces we defined earlier.
var drawX = p.gridx;
var drawY = p.gridy;
var state = p.curState;

//looping through to get a pieces currentstate, and drawing it to the board.
//rows, the p.state is deciding the length by the currentstate(the block width)
for(var r = 0, len = p.states[state].length; r < len; r++){
    //columns the p.state is deciding the length by the currentstate(the block width)

    for(var c = 0, len2 = p.states[state][r].length; c < len2; c++){
        //detecting if there is a block to draw depending on size of value returned.
        if(p.states[state][r][c] == 1 && drawY >= 0){
            ctx.drawImage(blockImg, p.color * SIZE, 0, SIZE, SIZE, drawX * SIZE, drawY * SIZE, SIZE, SIZE);
        }


        drawX += 1;
    }
    //resetting the gridx
    drawX = p.gridx;
    //incrementing gridy to get the second layer of arrays from the block states.
    drawY += 1;
}
}

Upvotes: 1

Views: 378

Answers (1)

roo2
roo2

Reputation: 6071

He converts to canvas pixel units in ctx.drawImage here is a simplified version

var canvasX = drawX * SIZE;
var canvasY = drawY * SIZE;
ctx.drawImage(blockImg, p.color * SIZE, 0, SIZE, SIZE, canvasX, canvasY, SIZE, SIZE);

https://developer.mozilla.org/en/docs/Web/API/CanvasRenderingContext2D#drawImage()

Upvotes: 1

Related Questions