Changes

[waitegemma]

For changing

[jbradshaw-scottlogic]

Looks good :)

I was thinking about how to store the state of the game. And fundamentally the state of a Tetris game is a grid of squares, some of which are occupied, and an active block. And then, when that state changes, the grid is drawn.

We've already got the Block object, so I think now it would be a good idea to introduce a Grid object, which would represent the grid of squares. When a block 'lands' you could then add its coordinates to the grid, and I guess it also makes sense to put willFit on the object too.

So something like:

var Grid =function(width, height) {
  this.width = width;
  this.height = height;
  this.rows = [];
  \\ToDo: initialise the rows, each row would be an array that stores colours

   this.addCoordinates = function(coordinates, colour) {
      //ToDo: put colours at the coordinates in the grid
  }

  this.willFit = function(coordinates) {
    //ToDo: move existing function here
  }
}

Then you could have a draw function that would draw the grid and the active block on the canvas.

What do you think?

[waitegemma]

At a glance this method looks like it will be useful for deleting rows. I'll have a look into this and put it into action.

[jackbradshaw]

Hi Gemma

So the 'NewGrid' function (which I'd just call 'Grid') is a function that will be used to create a new grid object.

The idea of the grid object is to store the state of the game. Currently you have the line

var grid = createGrid()

which creates a array of arrays. The grid object will replace this, it will essentially store the same state (the 'rows' property), but also have some behavior, like addCoordinates.

Here is a simplified example of what I'm talking about:

http://jsfiddle.net/5e4t9zwg/1/

This is a grid that stores characters, and you can add new characters at specified positions. And there is seperate function that draws the grid.

I see the grid for the tetris game working similarly, but storing colours rather than characters. It would be initially be full of undefined, and when a block lands you would add the colours at those coordinates.

You would then have a draw function that draws the grid and the active block onto the the canvas. Something like:

function draw(grid, block) {
  //Draw grid and block onto the canvas
}

[jackbradshaw]

Have a look at this article: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects

You don't need to read it all, but have a look at creating objects with a constructor and defining methods on objects.

[jbradshaw-scottlogic]

Hi Gemma

Yeah, that looks good. Things are starting to look quite neat :)

I added a couple of comments to the the code, just little refactors.

I guess the next thing for you to look at is removing complete rows. Perhaps another method on the Grid object?