added config manager (closes #18) and fixed crash at win
This commit is contained in:
parent
a7e2d1c201
commit
d339dd0a06
8 changed files with 331 additions and 120 deletions
2
Makefile
2
Makefile
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,26 +1,121 @@
|
|||
{
|
||||
"touchscreen": {
|
||||
"mode": [
|
||||
"crosspad",
|
||||
"joystick",
|
||||
"swipe"
|
||||
],
|
||||
"deadzone": {
|
||||
"input": {
|
||||
"name": "Input settings"
|
||||
},
|
||||
|
||||
"input.touchscreen": {
|
||||
"name": "Touchscreen settings"
|
||||
},
|
||||
|
||||
"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
|
||||
"max": 100,
|
||||
"inc": 1
|
||||
}
|
||||
},
|
||||
"gamepad": {
|
||||
"deadzone": {
|
||||
|
||||
"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
|
||||
"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": {
|
||||
"grid": [
|
||||
"name": "Appearance"
|
||||
},
|
||||
"appearance.grid": {
|
||||
"name": "Grid type",
|
||||
"type": "choice",
|
||||
"bounds": {
|
||||
"choices": [
|
||||
"none",
|
||||
"grid",
|
||||
"checkerboard",
|
||||
"none"
|
||||
"checkerboard"
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,7 +7,8 @@ const assetSpecs=[
|
|||
{ 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: 'config', filename: 'config.json', type: 'json' },
|
||||
{ name: 'metaConfig', filename: 'metaConfig.json', type: 'json' }
|
||||
];
|
||||
|
||||
const tasks=[
|
||||
|
|
|
|||
76
src/js/config.js
Normal file
76
src/js/config.js
Normal 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
|
||||
};
|
||||
118
src/js/input.js
118
src/js/input.js
|
|
@ -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,24 +130,45 @@ 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={
|
||||
const handleGamepads=(() => {
|
||||
let deadzone;
|
||||
|
||||
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;
|
||||
|
|
@ -126,12 +177,12 @@ const handleGamepads={
|
|||
handleAngleMagnitude(
|
||||
gp.axes[0],
|
||||
gp.axes[1],
|
||||
config.gamepad.deadzone,
|
||||
null,
|
||||
!config.gamepad.buffer
|
||||
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
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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});
|
||||
})();
|
||||
|
|
|
|||
|
|
@ -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]);
|
||||
|
|
|
|||
Loading…
Reference in a new issue