diff --git a/assets/config.json b/assets/config.json index 28f6d7b..dacc60d 100644 --- a/assets/config.json +++ b/assets/config.json @@ -13,5 +13,8 @@ "enabled": true, "deadzone": 0.5, "buffer": true + }, + "appearance": { + "grid": "none" } } diff --git a/assets/metaConfig.json b/assets/metaConfig.json index 952cb2f..687d1de 100644 --- a/assets/metaConfig.json +++ b/assets/metaConfig.json @@ -15,5 +15,12 @@ "min": 0, "max": 1 } + }, + "appearance": { + "grid": [ + "grid", + "checkerboard", + "none" + ] } } diff --git a/src/js/main.js b/src/js/main.js index a914b9b..7c35f2c 100644 --- a/src/js/main.js +++ b/src/js/main.js @@ -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'); diff --git a/src/js/snek.js b/src/js/snek.js index 60c0117..586d028 100644 --- a/src/js/snek.js +++ b/src/js/snek.js @@ -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