Codinget/Snek
1
0
Fork 0
Code Issues 11 Pull requests Releases Activity

added border and number timer (closes #14)

Browse source
This commit is contained in:
Nathan DECHER 2020-04-06 13:56:36 +02:00
parent 23535d17d8
commit 338934866b
3 changed files with 79 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
assets/config.json
View file

@ -16,5 +16,6 @@
"input.buffer": false,
"appearance.grid": "none"
"appearance.grid": "none",
"appearance.timer": "both"
}

12
assets/metaConfig.json
View file

@ -117,5 +117,17 @@
"checkerboard"
]
}
},
"appearance.timer": {
"name": "Timer display",
"type": "choice",
"bounds": {
"choices": [
"none",
"border",
"number",
"both"
]
}
}
}

74
src/js/snek.js
View file

@ -117,15 +117,8 @@ class SnekGame {
const offsetX=(this.canvas.width-cellSize*this.dimensions[0])/2;
const offsetY=(this.canvas.height-cellSize*this.dimensions[1])/2;
// draw the border around our game area
this.ctx.fillStyle='black';
this.ctx.fillRect(0, 0, this.canvas.width, offsetY);
this.ctx.fillRect(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);
// draw a grid/checkerboard if requested
if(config.get('appearance.grid')=='grid') {
if(config.getS('appearance.grid')=='grid') {
this.ctx.strokeStyle='rgba(0, 0, 0, 50%)';
this.ctx.lineCap='square';
this.ctx.lineWidth=1;
@ -139,7 +132,7 @@ class SnekGame {
this.ctx.lineTo(this.canvas.width-offsetX, offsetY+y*cellSize);
}
this.ctx.stroke();
} else if(config.get('appearance.grid')=='checkerboard') {
} else if(config.getS('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) {
@ -254,6 +247,69 @@ class SnekGame {
cellSize*fruitScale
);
});
// show the timer
if(this.rules.winCondition=='time') {
if(config.getS('appearance.timer')=='border' || config.getS('appearance.timer')=='both') {
let remaining=(this.rules.gameDuration-this.playTime)/this.rules.gameDuration;
const w=this.dimensions[0]*cellSize;
const h=this.dimensions[1]*cellSize;
const p=w*2+h*2;
const wp=w/p;
const hp=h/p;
const pdst=(st, ed, frac) =>
(ed-st)*frac+st;
this.ctx.strokeStyle='#930a16';
this.ctx.lineJoin='miter';
this.ctx.lineCap='round';
this.ctx.lineWidth=5;
this.ctx.beginPath();
this.ctx.moveTo(this.canvas.width/2, offsetY+2);
let sp=Math.min(wp/2, remaining);
remaining-=sp;
this.ctx.lineTo(pdst(this.canvas.width/2, w+offsetX-2, sp/wp*2), offsetY+2);
if(remaining) {
sp=Math.min(hp, remaining);
remaining-=sp;
this.ctx.lineTo(w+offsetX-2, pdst(offsetY+2, offsetY+h-2, sp/hp));
}
if(remaining) {
sp=Math.min(wp, remaining);
remaining-=sp;
this.ctx.lineTo(pdst(w+offsetX-2, offsetX+2, sp/wp), offsetY+h-2);
}
if(remaining) {
sp=Math.min(hp, remaining);
remaining-=sp;
this.ctx.lineTo(offsetX+2, pdst(offsetY+h-2, offsetY+2, sp/hp));
}
if(remaining) {
this.ctx.lineTo(pdst(offsetX+2, this.canvas.width/2, remaining/wp*2), offsetY+2);
}
this.ctx.stroke();
}
if(config.getS('appearance.timer')=='number' || config.getS('appearance.timer')=='both') {
let remaining=''+Math.ceil((this.rules.gameDuration-this.playTime)/1000);
while(remaining.length<(''+this.rules.gameDuration/1000).length) remaining='0'+remaining;
this.ctx.fillStyle='#930a16';
this.ctx.textAlign='center';
this.ctx.textBaseline='middle';
this.ctx.font='4rem "Fira Code"';
this.ctx.fillText(remaining, this.canvas.width/2, this.canvas.height/2);
}
}
// draw the border around our game area
this.ctx.fillStyle='black';
this.ctx.fillRect(0, 0, this.canvas.width, offsetY);
this.ctx.fillRect(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);
}
step() {