added config file

Makefile

@@ -6,20 +6,22 @@ WALL = public/assets/wall32.png
 
 SNAKE = public/assets/snake.json
 LEVEL_LIST = public/assets/levelList.json
+CONFIG = public/assets/config.json
 
 CSS = public/css/snek.css
 
 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) 
 apple: $(APPLE)
 wall: $(WALL)
 
 snake: $(SNAKE)
 levelList: $(LEVEL_LIST)
+config: $(CONFIG)
 
 css: $(CSS)
 

assets/config.json

@@ -0,0 +1,14 @@
+{
+	"touchscreen": {
+		"mode": "joystick",
+		"deadzone": 10,
+		"buffer": false
+	},
+	"keyboard": {
+		"buffer": false
+	},
+	"gamepad": {
+		"deadzone": 0.5,
+		"buffer": true
+	}
+}

src/js/assets.js

@@ -4,7 +4,8 @@ const assetSpecs=[
 	{ name: 'fruit',     filename: 'apple32.png',    type: 'image' },
 	{ name: 'wall',      filename: 'wall32.png',     type: 'image' },
 	{ 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');

src/js/main.js

@@ -8,6 +8,8 @@
 	const nav=main.querySelector('nav');
 	const canvas=main.querySelector('canvas');
 
+	const config=assets.get('config');
+
 	let currentGame=null;
 	let currentInputs={};
 
@@ -61,12 +63,14 @@
 		
 		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;
-		if(magnitude>.5) {
+		if(magnitude>config.gamepad.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.gamepad.buffer) inputs.clearBuffer=true;
 	};
 
 	window.addEventListener('hashchange', async () => {
@@ -105,23 +109,51 @@
 		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;
 	});
 
-	const handleTouch=e => {
-		e.preventDefault();
-		let x=e.touches[0].clientX-window.innerWidth/2;
-		let y=e.touches[0].clientY-window.innerHeight/2;
-		const angle=((Math.atan2(x, y)+2*Math.PI)%(2*Math.PI))/Math.PI;
+	if(config.touchscreen.mode=='crosspad') {
+		const handleTouch=e => {
+			let x=e.touches[0].clientX-window.innerWidth/2;
+			let y=e.touches[0].clientY-window.innerHeight/2;
+			const angle=((Math.atan2(x, y)+2*Math.PI)%(2*Math.PI))/Math.PI;
 
-		let inputs=currentInputs;
-		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;
+			let inputs=currentInputs;
+			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;
 
-		inputs.clearBuffer=true;
-	};
-	window.addEventListener('touchstart', handleTouch);
-	window.addEventListener('touchmove', handleTouch);
+			if(!config.touchscreen.buffer) inputs.clearBuffer=true;
+		};
+		window.addEventListener('touchstart', 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;
+		});
+	}
 
 })();