added optional grid

Nathan DECHER 5 years ago
parent 7dd95f262c
commit 2a67ab40ee
  1. 3
      assets/config.json
  2. 7
      assets/metaConfig.json
  3. 3
      src/js/main.js
  4. 27
      src/js/snek.js

@ -13,5 +13,8 @@
"enabled": true,
"deadzone": 0.5,
"buffer": true
},
"appearance": {
"grid": "none"
}
}

@ -15,5 +15,12 @@
"min": 0,
"max": 1
}
},
"appearance": {
"grid": [
"grid",
"checkerboard",
"none"
]
}
}

@ -102,7 +102,7 @@
const rules=levelList[category].rules || {};
const level=await levels.get(filename);
// create the game and attach the callbacks
// create the game and attach the callbacks and config
const snek=currentGame=new SnekGame(level, canvas, rules);
snek.callback=evt => {
if(evt=='tick') {
@ -114,6 +114,7 @@
handleDeath(snek);
}
};
snek.config=config;
// setup the DOM
nav.classList.add('hidden');

@ -104,6 +104,7 @@ class SnekGame {
draw() {
const assets=require('assets');
const config=this.config;
// clear the canvas, because it's easier than having to deal with everything
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(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 hole=assets.get('hole');
const fire=assets.get('fire');

Loading…
Cancel
Save