Skip to content

Instantly share code, notes, and snippets.

@eamonnmcevoy
Created September 9, 2018 18:09
Show Gist options
  • Save eamonnmcevoy/b22e89cdf702a7ed8dcc4dfc7ef38101 to your computer and use it in GitHub Desktop.
Save eamonnmcevoy/b22e89cdf702a7ed8dcc4dfc7ef38101 to your computer and use it in GitHub Desktop.
class Grid {
constructor(width, height, blockarea, margin, ctx) {
this.width = width;
this.height = height;
this.ctx = ctx;
this.blockarea = blockarea;
this.margin = margin;
this.blocksize = blockarea - margin;
}
render() {
for(let x=0; x<width; x++) {
for(let y=0; y<height; y++) {
const point = { x, y };
this.ctx.fillStyle = 'lightgrey';
ctx.clearRect(point.x * blockarea, point.y * blockarea, blocksize, blocksize);
ctx.fillRect(point.x * blockarea, point.y * blockarea, blocksize, blocksize);
}
}
}
}
const width = 50;
const height = 50;
const blockarea = 10;
const margin = 1;
const blocksize = blockarea - margin;
const canvas = document.getElementById('game');
canvas.width = width * blockarea;
canvas.height = height * blockarea;
const ctx = canvas.getContext('2d', { alpha: true });
const grid = new Grid(width, height, blockarea, margin, ctx);
grid.render();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment