Conway's game of life - Optimizing the code

I have just finished my first iteration of conway's game of life as a codeing excercise. I have little experience with coding, so I think my code could use some refactoring. What i am curios about is the drivers for having a more efficient code. My code is based on a cell object:

```
//Defining the cells --------------------------------------------
function Cell (x,y,id, num) {
this.id = id;
this.num = num;
this.isAlive = false;
this.x = x;
this.y = y;
this.nextIsAlive = false;
this.cellChange = false;
this.cellTop = function() {
if (this.y === 0) {
return false;
}
return getCell(this.x, this.y-OFFS-RECH/2).isAlive;

};
this.cellRight = function() {
if (this.x+RECW >= canvas.width) {
return false;
}
return getCell(this.x+RECW+OFFS+RECW/2, this.y).isAlive;

};
this.cellBottom = function() {
if (this.y+RECH >= canvas.height) {
return false;
}
return getCell(this.x, this.y+RECH+OFFS+RECH/2).isAlive;

};
this.cellLeft = function() {
if (this.x === 0) {
return false;
}
return getCell(this.x-OFFS-RECW/2, this.y).isAlive;
};

this.cellUpperLeft = function() {
if (this.x === 0 || this.y === 0) {
return false;
}
return getCell(this.x-OFFS-RECW/2, this.y-OFFS-RECH/2).isAlive;
};

this.cellUpperRight = function() {
if (this.x+RECW >= canvas.width || this.y === 0) {
return false;
}
return getCell(this.x+RECW+OFFS+RECW/2, this.y-OFFS-RECH/2).isAlive;
};

this.cellBottomLeft = function() {
if (this.x === 0 || this.y+RECH >= canvas.height) {
return false;
}
return getCell(this.x-OFFS-RECW/2, this.y+RECH+OFFS+RECH/2).isAlive;
};

this.cellBottomRight = function() {
if (this.x+RECW >= canvas.width || this.y+RECH >= canvas.height) {

Your code could indeed probably use some tuning.

The three major points are:

-
A cell should know it's neighbors, you should only once determine the neighbors for each cell and place them in an array in that Cell. This will speed up your code tremendously.

-
Only living cells and their neighbors can change, tracking the living cells in a queue ( array ) will speed up your code. You would check the cells in that queue and the neighbors within the cells for changes.

-
Checking all cells for life status changes in status slows the code down, you should have a queue ( array ) where you add all cells that change status. This way you only draw what changes.

Then there are some minor things you can consider:

1.

drawCell: function() {
    if (this.isAlive) {
        ctx.fillRect(this.x,this.y,RECW,RECH);
    } else {
        ctx.clearRect(this.x,this.y,RECW,RECH);
    }

this could be a little DRYer since the parameters are the same.

drawCell: function() {
  var action = this.isAlive ? ctx.fillRect : ctx.clearRect;
  action(this.x,this.y,RECW,RECH);
}

2.

toggle: function() {
    if (this.isAlive) {
        this.isAlive = false;
    } else {
        this.isAlive = true;
    }
}

could use some Boolean magic:

toggle: function() {
    this.isAlive = !this.isAlive;
}

Finally, determineNextStep should really be part of the prototype of Cell.

StackExchange Code Review Q#27481, answer score: 3