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

added config manager (closes #18) and fixed crash at win

Browse source
This commit is contained in:
Nathan DECHER 2020-04-06 10:58:44 +02:00
parent a7e2d1c201
commit d339dd0a06
8 changed files with 331 additions and 120 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
Makefile
View file

@ -5,7 +5,7 @@ FIRE_ANIM = $(foreach angle, $(shell seq 0 6 359), build/fire$(angle).png)
IMAGES = $(foreach name, apple wall, public/assets/$(name)32.png)
TILESETS = $(foreach name, hole, public/assets/$(name)-ts.png)
ANIMATIONS = $(foreach name, fire, public/assets/$(name)-anim.png)
JSON = $(foreach name, snake levelList config, public/assets/$(name).json)
JSON = $(foreach name, snake levelList config metaConfig, public/assets/$(name).json)
ICON = public/assets/icon32.png public/assets/icon256.png public/favicon.ico
CSS = public/css/snek.css
JS = public/js/snek.js

36
assets/config.json
View file

@ -1,20 +1,20 @@
{
"touchscreen": {
"enabled": true,
"mode": "crosspad",
"deadzone": 50,
"buffer": false
},
"keyboard": {
"enabled": true,
"buffer": false
},
"gamepad": {
"enabled": true,
"deadzone": 0.5,
"buffer": true
},
"appearance": {
"grid": "none"
}
"input.touchscreen.crosspad.enabled": true,
"input.touchscreen.crosspad.overlay": true,
"input.touchscreen.joystick.enabled": false,
"input.touchscreen.joystick.overlay": true,
"input.touchscreen.joystick.deadzone": 10,
"input.touchscreen.swipe.enabled": false,
"input.touchscreen.swipe.deadzone": 50,
"input.gamepad.enabled": true,
"input.gamepad.deadzone": 0.5,
"input.keyboard.enabled": true,
"input.buffer": false,
"appearance.grid": "none"
}

135
assets/metaConfig.json
View file

@ -1,26 +1,121 @@
{
"touchscreen": {
"mode": [
"crosspad",
"joystick",
"swipe"
],
"deadzone": {
"min": 1,
"max": 100
}
"input": {
"name": "Input settings"
},
"gamepad": {
"deadzone": {
"min": 0,
"max": 1
}
"input.touchscreen": {
"name": "Touchscreen settings"
},
"appearance": {
"grid": [
"grid",
"checkerboard",
"none"
"input.touchscreen.crosspad": {
"name": "Crosspad mode"
},
"input.touchscreen.crosspad.enabled": {
"name": "Enable crosspad",
"type": "boolean",
"excludes": [
"input.touchscreen.joystick.enabled",
"input.touchscreen.swipe.enabled"
]
},
"input.touchscreen.crosspad.overlay": {
"name": "Show overlay",
"type": "boolean",
"parent": "input.touchscreen.crosspad.enabled"
},
"input.touchscreen.joystick": {
"name": "Joystick mode"
},
"input.touchscreen.joystick.enabled": {
"name": "Enable joystick",
"type": "boolean",
"excludes": [
"input.touchscreen.crosspad.enabled",
"input.touchscreen.swipe.enabled"
]
},
"input.touchscreen.joystick.overlay": {
"name": "Show overlay",
"type": "boolean",
"parent": "input.touchscreen.joystick.enabled"
},
"input.touchscreen.joystick.deadzone": {
"name": "Deadzone",
"type": "number",
"parent": "input.touchscreen.joystick.enabled",
"bounds": {
"min": 1,
"max": 100,
"inc": 1
}
},
"input.touchscreen.swipe": {
"name": "Swipe mode"
},
"input.touchscreen.swipe.enabled": {
"name": "Enable swipe",
"type": "boolean",
"excludes": [
"input.touchscreen.crosspad.enabled",
"input.touchscreen.joystick.enabled"
]
},
"input.touchscreen.swipe.deadzone": {
"name": "Deadzone",
"type": "number",
"parent": "input.touchscreen.swipe.enabled",
"bounds": {
"min": 1,
"max": 100,
"inc": 1
}
},
"input.gamepad": {
"name": "Gamepad settings"
},
"input.gamepad.enabled": {
"name": "Enable gamepad",
"type": "boolean"
},
"input.gamepad.deadzone": {
"name": "Deadzone",
"type": "number",
"parent": "input.gamepad.enabled",
"bounds": {
"min": 0,
"max": 1,
"inc": 0.1
}
},
"input.keyboard": {
"name": "Keyboard settings"
},
"input.keyboard.enabled": {
"name": "Enable keyboard",
"type": "boolean"
},
"input.buffer": {
"name": "Enable input buffering",
"type": "boolean"
},
"appearance": {
"name": "Appearance"
},
"appearance.grid": {
"name": "Grid type",
"type": "choice",
"bounds": {
"choices": [
"none",
"grid",
"checkerboard"
]
}
}
}

15
src/js/assets.js
View file

@ -1,13 +1,14 @@
const ProgressBar=require('progress');
const assetSpecs=[
{ name: 'fruit', filename: 'apple32.png', type: 'image' },
{ name: 'wall', filename: 'wall32.png', type: 'image' },
{ name: 'hole', filename: 'hole-ts.png', type: 'image' },
{ name: 'fire', filename: 'fire-anim.png', type: 'image' },
{ name: 'snake', filename: 'snake.json', type: 'json' },
{ name: 'levelList', filename: 'levelList.json', type: 'json' },
{ name: 'config', filename: 'config.json', type: 'json' }
{ name: 'fruit', filename: 'apple32.png', type: 'image' },
{ name: 'wall', filename: 'wall32.png', type: 'image' },
{ name: 'hole', filename: 'hole-ts.png', type: 'image' },
{ name: 'fire', filename: 'fire-anim.png', type: 'image' },
{ name: 'snake', filename: 'snake.json', type: 'json' },
{ name: 'levelList', filename: 'levelList.json', type: 'json' },
{ name: 'config', filename: 'config.json', type: 'json' },
{ name: 'metaConfig', filename: 'metaConfig.json', type: 'json' }
];
const tasks=[

76
src/js/config.js Normal file
View file

@ -0,0 +1,76 @@
const assets=require('assets');
let watchers=Object.create(null);
let lastWatchCode=1;
const toBoolean=v => {
if(v=='false' || v==false) return false;
return true;
};
const get=key => {
let confVal=localStorage.getItem('config.'+key);
if(confVal===null) return assets.get('config')[key];
return confVal;
};
const getB=key => toBoolean(get(key));
const getN=key => +get(key);
const getS=key => ''+get(key);
const set=(key, value) => {
localStorage.setItem('config.'+key, value);
let interested=watchers[key];
if(interested) interested.forEach(watcher => watcher(key, value));
};
const remove=key => {
localStorage.removeItem('config.'+key, value);
let interested=watchers[key];
if(interested) interested.forEach(watcher => watcher(key, assets.get('config')[key]));
};
const clear=() =>
Object
.keys(assets.get('config'))
.forEach(remove);
const watch=(key, fn) => {
if(!watchers[key]) watchers[key]=[];
const code='w'+lastWatchCode++;
watchers[key][code]=fn;
return code;
};
const watchB=(key, fn) => watch(key, (k, v) => fn(k, toBoolean(v)));
const watchN=(key, fn) => watch(key, (k, v) => fn(k, +v));
const watchS=(key, fn) => watch(key, (k, v) => fn(k, ''+v));
const unwatch=(key, code) => {
if(!watchers[key]) return;
delete watchers[key][code];
};
const list=() =>
Object
.keys(assets.get('config'));
const dict=() => {
let dict=Object.create(null);
Object
.keys(assets.get('config'))
.forEach(
key => dict[key]={
raw: get(key),
b: getB(key),
n: getN(key),
s: getS(key)
}
);
return dict;
};
return module.exports={
get, getB, getN, getS,
set,
remove, clear,
watch, watchB, watchN, watchS,
unwatch,
list, dict
};

138
src/js/input.js
View file

@ -1,6 +1,7 @@
const config=require('config');
let currentInputs={};
let handlers=[];
let config;
let hud;
const toAngleMagnitude=(x, y) => {
@ -10,7 +11,7 @@ const toAngleMagnitude=(x, y) => {
};
};
const handleAngleMagnitude=(x, y, threshold=0, fn=null, clearBuffer=false) => {
const handleAngleMagnitude=(x, y, threshold=0, fn=null) => {
const {angle, magnitude}=toAngleMagnitude(x, y);
if(magnitude>threshold) {
@ -20,7 +21,6 @@ const handleAngleMagnitude=(x, y, threshold=0, fn=null, clearBuffer=false) => {
else if(angle>1.25 && angle<1.75) inputs.left=true;
else inputs.down=true;
if(clearBuffer) inputs.clearBuffer=true;
if(fn) fn(angle, magnitude);
}
}
@ -46,19 +46,42 @@ const handleCrosspad=(() => {
dl.setAttribute('stroke', 'black');
cross.appendChild(dl);
let useOverlay=false;
let enabled=false;
const displayOverlay=() => {
if(hud) {
if(useOverlay && enabled) hud.appendChild(cross);
else hud.removeChild(cross);
}
};
config.watchB('input.touchscreen.crosspad.overlay', (k, v) => {
useOverlay=v;
displayOverlay();
});
const fn=e =>
handleAngleMagnitude(
e.touches[0].clientX-window.innerWidth/2,
e.touches[0].clientY-window.innerHeight/2,
0,
null,
!config.touchscreen.buffer
null
);
const init=() => {
useOverlay=config.getB('input.touchscreen.crosspad.overlay');
enabled=true;
displayOverlay();
};
const fini=() => {
enabled=false;
displayOverlay();
};
return {
touchstart: fn,
touchmove: fn,
init: () => hud.appendChild(cross),
fini: () => hud.removeChild(cross)
init,
fini
};
})();
@ -69,8 +92,6 @@ const handleKeyboard={
else if(e.key=='ArrowDown') inputs.down=true;
else if(e.key=='ArrowLeft') inputs.left=true;
else if(e.key=='ArrowRight') inputs.right=true;
if(!config.keyboard.buffer) inputs.clearBuffer=true;
}
};
@ -79,7 +100,17 @@ const handleJoystick=(() => {
x: 0,
y: 0
};
let deadzone;
const init=() => {
deadzone=config.getN('input.touchscreen.joystick.deadzone');
};
config.watchN('input.touchscreen.joystick.deadzone', (k, v) => {
deadzone=v;
});
return {
init,
touchstart: e => {
center.x=e.touches[0].clientX;
center.y=e.touches[0].clientY;
@ -88,9 +119,8 @@ const handleJoystick=(() => {
handleAngleMagnitude(
e.touches[0].clientX-center.x,
e.touches[0].clientY-center.y,
config.touchscreen.deadzone,
null,
!config.touchscreen.buffer
deadzone,
null
)
}
})();
@ -100,38 +130,59 @@ const handleSwipe=(() => {
x: 0,
y: 0
};
let deadzone;
let resetCenter=e => {
center.x=e.touches[0].clientX;
center.y=e.touches[0].clientY;
};
const init=() => {
deadzone=config.getN('input.touchscreen.swipe.deadzone');
};
config.watchN('input.touchscreen.swipe.deadzone', (k, v) => {
deadzone=v;
});
return {
init,
touchstart: resetCenter,
touchmove: e =>
handleAngleMagnitude(
e.touches[0].clientX-center.x,
e.touches[0].clientY-center.y,
config.touchscreen.deadzone,
() => resetCenter(e),
!config.touchscreen.buffer
deadzone,
() => resetCenter(e)
)
}
})();
const handleGamepads={
frame: () => {
const gp=navigator.getGamepads()[0];
let inputs=currentInputs;
if(!gp || !gp.axes) return;
const handleGamepads=(() => {
let deadzone;
handleAngleMagnitude(
gp.axes[0],
gp.axes[1],
config.gamepad.deadzone,
null,
!config.gamepad.buffer
);
}
};
const init=() => {
deadzone=config.getN('input.touchscreen.swipe.deadzone');
};
config.watchN('input.touchscreen.swipe.deadzone', (k, v) => {
deadzone=v;
});
return {
init,
frame: () => {
const gp=navigator.getGamepads()[0];
let inputs=currentInputs;
if(!gp || !gp.axes) return;
handleAngleMagnitude(
gp.axes[0],
gp.axes[1],
deadzone,
null
);
}
};
})();
const handleEvent=(type, evt) => {
for(let handler of handlers) {
@ -153,11 +204,22 @@ const disableHandler=handler => {
if(handler.fini) handler.fini();
}
};
const linkHandler=(handler, key) => {
if(config.getB(key)) enableHandler(handler);
config.watchB(key, (k, v) => {
if(v) enableHandler(handler);
else disableHandler(handler);
});
};
const updateConfig=cfg =>
config=cfg;
const setHud=elem =>
hud=elem;
const init=({hud: hudElem}) => {
hud=hudElem;
linkHandler(handleCrosspad, 'input.touchscreen.crosspad.enabled');
linkHandler(handleJoystick, 'input.touchscreen.joystick.enabled');
linkHandler(handleSwipe, 'input.touchscreen.swipe.enabled');
linkHandler(handleGamepads, 'input.gamepad.enabled');
linkHandler(handleKeyboard, 'input.keyboard.enabled');
};
const clear=() =>
Object
@ -171,14 +233,6 @@ for(let type of ['keydown', 'touchstart', 'touchmove']) {
return module.exports={
inputs: currentInputs,
clear,
enableHandler, disableHandler,
framefn: handleEvent.bind(null, 'frame'),
availableHandlers: {
keyboard: handleKeyboard,
gamepad: handleGamepads,
touchscreenCrosspad: handleCrosspad,
touchscreenJoystick: handleJoystick,
touchscreenSwipe: handleSwipe
},
updateConfig, setHud
init
};

29
src/js/main.js
View file

@ -6,6 +6,7 @@
const SnekGame=require('snek');
const input=require('input');
const levels=require('levels');
const config=require('config');
// get a known state
await new Promise(ok => assets.onReady(ok));
@ -17,9 +18,6 @@
const canvas=main.querySelector('canvas');
const hud=main.querySelector('#hud');
// load config
const config=assets.get('config'); //TODO use an actual config module
// load data from server
const levelList=assets.get('levelList');
@ -115,7 +113,6 @@
handleDeath(snek);
}
};
snek.config=config;
// setup the DOM
nav.classList.add('hidden');
@ -152,6 +149,9 @@
// hide the HUD
hud.classList.add('hidden');
// fetch userdata from the game
const {category, levelId, filename}=snek.userdata;
// create and configure popup
let popup=new Popup("Finished!");
popup.addStrong("You won!");
@ -174,7 +174,6 @@
// act on it
if(result=='retry') {
const {category, levelId, filename}=snek.userdata;
startGame(category, levelId, filename);
} else if(result=='menu') {
location.hash='menu';
@ -244,22 +243,6 @@
startGame(category, levelId, filename);
});
// enable input methods according to config
input.setHud(hud);
if(config.keyboard.enabled) {
input.enableHandler(input.availableHandlers.keyboard);
}
if(config.gamepad.enabled) {
input.enableHandler(input.availableHandlers.gamepad);
}
if(config.touchscreen.enabled) {
if(config.touchscreen.mode=='crosspad') {
input.enableHandler(input.availableHandlers.touchscreenCrosspad);
} else if(config.touchscreen.mode=='joystick') {
input.enableHandler(input.availableHandlers.touchscreenJoystick);
} else if(config.touchscreen.mode=='swipe') {
input.enableHandler(input.availableHandlers.touchscreenSwipe);
}
}
input.updateConfig(config);
// enable input methods overlay
input.init({hud});
})();

18
src/js/snek.js
View file

@ -104,7 +104,7 @@ class SnekGame {
draw() {
const assets=require('assets');
const config=this.config;
const config=require('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);
@ -125,7 +125,7 @@ class SnekGame {
this.ctx.fillRect(0, offsetY+cellSize*this.dimensions[1], this.canvas.width, offsetY);
// draw a grid/checkerboard if requested
if(config.appearance.grid=='grid') {
if(config.get('appearance.grid')=='grid') {
this.ctx.strokeStyle='rgba(0, 0, 0, 50%)';
this.ctx.lineCap='square';
this.ctx.lineWidth=1;
@ -139,7 +139,7 @@ class SnekGame {
this.ctx.lineTo(this.canvas.width-offsetX, offsetY+y*cellSize);
}
this.ctx.stroke();
} else if(config.appearance.grid=='checkerboard') {
} else if(config.get('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) {
@ -400,6 +400,8 @@ class SnekGame {
}
handleInputs(inputs) {
const config=require('config');
// change direction if the input is valid
const trySet=(dir) => {
if(!dir.every((e, i) => e==this.lastDirection[i] || e==-this.lastDirection[i])) {
@ -420,13 +422,13 @@ class SnekGame {
});
// try all inputs in order and unbuffer them if valid
if(inputs.left && trySet([-1, 0])) return delete inputs.left;
else if(inputs.right && trySet([ 1, 0])) return delete inputs.right;
else if(inputs.up && trySet([ 0,-1])) return delete inputs.up;
else if(inputs.down && trySet([ 0, 1])) return delete inputs.down;
if(inputs.left && trySet([-1, 0])) delete inputs.left;
else if(inputs.right && trySet([ 1, 0])) delete inputs.right;
else if(inputs.up && trySet([ 0,-1])) delete inputs.up;
else if(inputs.down && trySet([ 0, 1])) delete inputs.down;
// buffering might be disabled
if(inputs.clearBuffer) {
if(!config.getB('input.buffer')) {
Object
.keys(inputs)
.forEach(k => delete inputs[k]);