|
|
@ -104,6 +104,7 @@ class SnekGame { |
|
|
|
|
|
|
|
|
|
|
|
draw() { |
|
|
|
draw() { |
|
|
|
const assets=require('assets'); |
|
|
|
const assets=require('assets'); |
|
|
|
|
|
|
|
const config=this.config; |
|
|
|
|
|
|
|
|
|
|
|
// clear the canvas, because it's easier than having to deal with everything
|
|
|
|
// clear the canvas, because it's easier than having to deal with everything
|
|
|
|
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height); |
|
|
|
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height); |
|
|
@ -123,7 +124,31 @@ class SnekGame { |
|
|
|
this.ctx.fillRect(offsetX+cellSize*this.dimensions[0], 0, offsetX, this.canvas.height); |
|
|
|
this.ctx.fillRect(offsetX+cellSize*this.dimensions[0], 0, offsetX, this.canvas.height); |
|
|
|
this.ctx.fillRect(0, offsetY+cellSize*this.dimensions[1], this.canvas.width, offsetY); |
|
|
|
this.ctx.fillRect(0, offsetY+cellSize*this.dimensions[1], this.canvas.width, offsetY); |
|
|
|
|
|
|
|
|
|
|
|
// draw our walls
|
|
|
|
// draw a grid/checkerboard if requested
|
|
|
|
|
|
|
|
if(config.appearance.grid=='grid') { |
|
|
|
|
|
|
|
this.ctx.strokeStyle='rgba(0, 0, 0, 50%)'; |
|
|
|
|
|
|
|
this.ctx.lineCap='square'; |
|
|
|
|
|
|
|
this.ctx.lineWidth=1; |
|
|
|
|
|
|
|
this.ctx.beginPath(); |
|
|
|
|
|
|
|
for(let x=1; x<this.dimensions[0]; x++) { |
|
|
|
|
|
|
|
this.ctx.moveTo(offsetX+x*cellSize, offsetY); |
|
|
|
|
|
|
|
this.ctx.lineTo(offsetX+x*cellSize, this.canvas.height-offsetY); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
for(let y=1; y<this.dimensions[1]; y++) { |
|
|
|
|
|
|
|
this.ctx.moveTo(offsetX, offsetY+y*cellSize); |
|
|
|
|
|
|
|
this.ctx.lineTo(this.canvas.width-offsetX, offsetY+y*cellSize); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
this.ctx.stroke(); |
|
|
|
|
|
|
|
} else if(config.appearance.grid=='checkerboard') { |
|
|
|
|
|
|
|
this.ctx.fillStyle='rgba(0, 0, 0, 10%)'; |
|
|
|
|
|
|
|
for(let x=0; x<this.dimensions[0]; x++) { |
|
|
|
|
|
|
|
for(let y=(x+1)%2; y<this.dimensions[1]; y+=2) { |
|
|
|
|
|
|
|
this.ctx.fillRect(offsetX+x*cellSize, offsetY+y*cellSize, cellSize, cellSize); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// draw our tiles
|
|
|
|
const wall=assets.get('wall'); |
|
|
|
const wall=assets.get('wall'); |
|
|
|
const hole=assets.get('hole'); |
|
|
|
const hole=assets.get('hole'); |
|
|
|
const fire=assets.get('fire'); |
|
|
|
const fire=assets.get('fire'); |
|
|
|