Jump to content

Tetris issue [ Newbie Questions ]


Recommended Posts

Hi guys,


I have just started tries to make small games using phaser and decided to start from something very usual - tetris.

So I am sorry for my stupid questions but I have spent some time trying to resolve the question by myself but without any success.


As we know each tetris' figure consists from 4 blocks.

Also I want to add some physics to my game.

And this is the main issue that I have faced. 


1. Can I use simple rectangle and not sprite as physics body?

2. If I am using sprite I have 1 block. As far as I have understood I need to create a joint from 4 such blocks to have one solid figure.

Am I right? Or there should be used another way. 

Also if yes, how can I create such joint?



P.S. any tutorials with tetris or something similar with usage of phaser will be very useful.


Thanks and sorry for my stupid questions  :)

Link to comment
Share on other sites

Have not made a tetris yet, but that's how I would start:

As you mentioned each figure consists of four blocks, with same physical properties as height, weight and scale. => construct block prototype.

Every figure can be described as an array of four blocks with their relative position, an [_] for example could be:

figure[0] = {x:0, y:0}

figure[1] = {x: figure[0].x+block.width, y:0}

figure[2] = {x: 0, y: figure[0].y+block.height}

figure[3] = {x: figure[0].x+block.width, y: figure[0].y+block.height}

If you move your figure all blocks move the same, so just iterate movements over each block of the array.

Then give your blocks physical bodies and set collide zone for left and right (touches wall, so can't move there) and a overlap for the bottom which will save your figure to an array which held the game grid and generates a new movable figure.


In each update loop through the game grid, if 4 rows in a row has no holes, it is a tetris -> remove them from the game grid, set all blocks above -4*block.height


For roating you need some math and imaginary.

Link to comment
Share on other sites

This is my phaser Tetris: http://jppresents.net/games/fallingBlocks/


I "only" use phaser to display the graphics (and do some tweens when a row is cleared or you lose the game).


This is one of the graphics used: red.png


I am not using any of the phaser physics, because they don't fit the pattern required for tetris.


Instead I have my own data structure and moving algorythm and then in the phaser update loop I move the sprites to represent the state of the game.


For example the playingfield is represented by an array like this:


field = new Array( FIELD_WIDTH * FIELD_HEIGHT);


(10 x 22)


In this array, I have numbers, 0 means the field is empty, all other numbers represent color blocks.


In the phaser updateloop i iterate over the array and arrange sprites to represent it on screen.

(Creating more sprites as needed)


Maybe that helps a little.

Link to comment
Share on other sites


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...