added config file
This commit is contained in:
parent
93ba24a53a
commit
95751be63e
4 changed files with 67 additions and 18 deletions
6
Makefile
6
Makefile
|
@ -6,20 +6,22 @@ WALL = public/assets/wall32.png
|
||||||
|
|
||||||
SNAKE = public/assets/snake.json
|
SNAKE = public/assets/snake.json
|
||||||
LEVEL_LIST = public/assets/levelList.json
|
LEVEL_LIST = public/assets/levelList.json
|
||||||
|
CONFIG = public/assets/config.json
|
||||||
|
|
||||||
CSS = public/css/snek.css
|
CSS = public/css/snek.css
|
||||||
|
|
||||||
JS = public/js/snek.js
|
JS = public/js/snek.js
|
||||||
|
|
||||||
OUTPUT = $(ICON) $(APPLE) $(WALL) $(SNAKE) $(LEVEL_LIST) $(CSS) $(JS)
|
OUTPUT = $(ICON) $(APPLE) $(WALL) $(SNAKE) $(LEVEL_LIST) $(CONFIG) $(CSS) $(JS)
|
||||||
|
|
||||||
all: icon apple wall snake levelList css js
|
all: icon apple wall snake levelList config css js
|
||||||
icon: $(ICON)
|
icon: $(ICON)
|
||||||
apple: $(APPLE)
|
apple: $(APPLE)
|
||||||
wall: $(WALL)
|
wall: $(WALL)
|
||||||
|
|
||||||
snake: $(SNAKE)
|
snake: $(SNAKE)
|
||||||
levelList: $(LEVEL_LIST)
|
levelList: $(LEVEL_LIST)
|
||||||
|
config: $(CONFIG)
|
||||||
|
|
||||||
css: $(CSS)
|
css: $(CSS)
|
||||||
|
|
||||||
|
|
14
assets/config.json
Normal file
14
assets/config.json
Normal file
|
@ -0,0 +1,14 @@
|
||||||
|
{
|
||||||
|
"touchscreen": {
|
||||||
|
"mode": "joystick",
|
||||||
|
"deadzone": 10,
|
||||||
|
"buffer": false
|
||||||
|
},
|
||||||
|
"keyboard": {
|
||||||
|
"buffer": false
|
||||||
|
},
|
||||||
|
"gamepad": {
|
||||||
|
"deadzone": 0.5,
|
||||||
|
"buffer": true
|
||||||
|
}
|
||||||
|
}
|
|
@ -4,7 +4,8 @@ const assetSpecs=[
|
||||||
{ name: 'fruit', filename: 'apple32.png', type: 'image' },
|
{ name: 'fruit', filename: 'apple32.png', type: 'image' },
|
||||||
{ name: 'wall', filename: 'wall32.png', type: 'image' },
|
{ name: 'wall', filename: 'wall32.png', type: 'image' },
|
||||||
{ name: 'snake', filename: 'snake.json', type: 'json' },
|
{ name: 'snake', filename: 'snake.json', type: 'json' },
|
||||||
{ name: 'levelList', filename: 'levelList.json', type: 'json' }
|
{ name: 'levelList', filename: 'levelList.json', type: 'json' },
|
||||||
|
{ name: 'config', filename: 'config.json', type: 'json' }
|
||||||
];
|
];
|
||||||
|
|
||||||
const cvs=document.createElement('canvas');
|
const cvs=document.createElement('canvas');
|
||||||
|
|
|
@ -8,6 +8,8 @@
|
||||||
const nav=main.querySelector('nav');
|
const nav=main.querySelector('nav');
|
||||||
const canvas=main.querySelector('canvas');
|
const canvas=main.querySelector('canvas');
|
||||||
|
|
||||||
|
const config=assets.get('config');
|
||||||
|
|
||||||
let currentGame=null;
|
let currentGame=null;
|
||||||
let currentInputs={};
|
let currentInputs={};
|
||||||
|
|
||||||
|
@ -61,12 +63,14 @@
|
||||||
|
|
||||||
const magnitude=Math.hypot(gp.axes[0], gp.axes[1]);
|
const magnitude=Math.hypot(gp.axes[0], gp.axes[1]);
|
||||||
const angle=((Math.atan2(gp.axes[0], gp.axes[1])+2*Math.PI)%(2*Math.PI))/Math.PI;
|
const angle=((Math.atan2(gp.axes[0], gp.axes[1])+2*Math.PI)%(2*Math.PI))/Math.PI;
|
||||||
if(magnitude>.5) {
|
if(magnitude>config.gamepad.deadzone) {
|
||||||
if(angle>.25 && angle <.75) inputs.right=true;
|
if(angle>.25 && angle <.75) inputs.right=true;
|
||||||
else if(angle>.75 && angle<1.25) inputs.up=true;
|
else if(angle>.75 && angle<1.25) inputs.up=true;
|
||||||
else if(angle>1.25 && angle<1.75) inputs.left=true;
|
else if(angle>1.25 && angle<1.75) inputs.left=true;
|
||||||
else inputs.down=true;
|
else inputs.down=true;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if(!config.gamepad.buffer) inputs.clearBuffer=true;
|
||||||
};
|
};
|
||||||
|
|
||||||
window.addEventListener('hashchange', async () => {
|
window.addEventListener('hashchange', async () => {
|
||||||
|
@ -105,23 +109,51 @@
|
||||||
else if(e.key=='ArrowDown') inputs.down=true;
|
else if(e.key=='ArrowDown') inputs.down=true;
|
||||||
else if(e.key=='ArrowLeft') inputs.left=true;
|
else if(e.key=='ArrowLeft') inputs.left=true;
|
||||||
else if(e.key=='ArrowRight') inputs.right=true;
|
else if(e.key=='ArrowRight') inputs.right=true;
|
||||||
|
|
||||||
|
if(!config.keyboard.buffer) inputs.clearBuffer=true;
|
||||||
});
|
});
|
||||||
|
|
||||||
const handleTouch=e => {
|
if(config.touchscreen.mode=='crosspad') {
|
||||||
e.preventDefault();
|
const handleTouch=e => {
|
||||||
let x=e.touches[0].clientX-window.innerWidth/2;
|
let x=e.touches[0].clientX-window.innerWidth/2;
|
||||||
let y=e.touches[0].clientY-window.innerHeight/2;
|
let y=e.touches[0].clientY-window.innerHeight/2;
|
||||||
const angle=((Math.atan2(x, y)+2*Math.PI)%(2*Math.PI))/Math.PI;
|
const angle=((Math.atan2(x, y)+2*Math.PI)%(2*Math.PI))/Math.PI;
|
||||||
|
|
||||||
let inputs=currentInputs;
|
let inputs=currentInputs;
|
||||||
if(angle>.25 && angle <.75) inputs.right=true;
|
if(angle>.25 && angle <.75) inputs.right=true;
|
||||||
else if(angle>.75 && angle<1.25) inputs.up=true;
|
else if(angle>.75 && angle<1.25) inputs.up=true;
|
||||||
else if(angle>1.25 && angle<1.75) inputs.left=true;
|
else if(angle>1.25 && angle<1.75) inputs.left=true;
|
||||||
else inputs.down=true;
|
else inputs.down=true;
|
||||||
|
|
||||||
inputs.clearBuffer=true;
|
if(!config.touchscreen.buffer) inputs.clearBuffer=true;
|
||||||
};
|
};
|
||||||
window.addEventListener('touchstart', handleTouch);
|
window.addEventListener('touchstart', handleTouch);
|
||||||
window.addEventListener('touchmove', handleTouch);
|
window.addEventListener('touchmove', handleTouch);
|
||||||
|
}
|
||||||
|
|
||||||
|
if(config.touchscreen.mode=='joystick') {
|
||||||
|
let center={x: 0, y: 0};
|
||||||
|
window.center=center;
|
||||||
|
window.addEventListener('touchstart', e => {
|
||||||
|
center.x=e.touches[0].clientX;
|
||||||
|
center.y=e.touches[0].clientY;
|
||||||
|
});
|
||||||
|
window.addEventListener('touchmove', e => {
|
||||||
|
let x=e.touches[0].clientX-center.x;
|
||||||
|
let y=e.touches[0].clientY-center.y;
|
||||||
|
const angle=((Math.atan2(x, y)+2*Math.PI)%(2*Math.PI))/Math.PI;
|
||||||
|
const magnitude=Math.hypot(x, y);
|
||||||
|
|
||||||
|
let inputs=currentInputs;
|
||||||
|
if(magnitude>config.touchscreen.deadzone) {
|
||||||
|
if(angle>.25 && angle <.75) inputs.right=true;
|
||||||
|
else if(angle>.75 && angle<1.25) inputs.up=true;
|
||||||
|
else if(angle>1.25 && angle<1.75) inputs.left=true;
|
||||||
|
else inputs.down=true;
|
||||||
|
}
|
||||||
|
|
||||||
|
if(!config.touchscreen.buffer) inputs.clearBuffer=true;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
})();
|
})();
|
||||||
|
|
Loading…
Reference in a new issue