Touch support

client-modes/paper-io-bot-mode.js

@@ -39,9 +39,7 @@ function Loc(row, col) {
 }
 
 function update(frame) {
-	if (startFrame == -1) {
+	if (startFrame == -1) startFrame = frame;
-		startFrame = frame;
-	}
 	endFrame = frame;
 
 	if (frame % 6 == (startFrame + 1) % 6) {

game-client.js

@@ -35,7 +35,7 @@ $(function() {
 		error.text("Your browser does not support WebSockets!");
 		return;
 	}
-	error.text("Loading... Please wait"); //TODO: show loading screen.
+	error.text("Loading... Please wait"); //TODO: show loading screen
 	var socket = io("//" + window.location.hostname + ":8081", {
 		forceNew: true,
 		upgrade: false,
@@ -62,16 +62,37 @@ $(function() {
 $(document).keydown(function(e) {
 	var newHeading = -1;
 	switch (e.which) {
-		case 37: newHeading = 3; break; //LEFT
-		case 65: newHeading = 3; break; //LEFT (A)
 		case 38: newHeading = 0; break; //UP
 		case 87: newHeading = 0; break; //UP (W)
 		case 39: newHeading = 1; break; //RIGHT
 		case 68: newHeading = 1; break; //RIGHT (D)
 		case 40: newHeading = 2; break; //DOWN
 		case 83: newHeading = 2; break; //DOWN (S)
-		default: return; //exit handler for other keys.
+		case 37: newHeading = 3; break; //LEFT
+		case 65: newHeading = 3; break; //LEFT (A)
+		default: return; //exit handler for other keys
 	}
 	client.changeHeading(newHeading);
 	e.preventDefault();
 });
+
+$(document).on("touchmove", function(e) {
+	e.preventDefault(); 
+});
+
+$(document).on("touchstart", function (e1) {
+	var x1 = e1.targetTouches[0].pageX;
+	var y1 = e1.targetTouches[0].pageY;
+	$(document).one("touchend", function (e2) {
+		var x2 = e2.changedTouches[0].pageX;
+		var y2 = e2.changedTouches[0].pageY;
+		var deltaX = x2 - x1;
+		var deltaY = y2 - y1;
+		var newHeading = -1;
+		if (deltaY < 0 && Math.abs(deltaY) > Math.abs(deltaX)) newHeading = 0;
+		else if (deltaX > 0 && Math.abs(deltaY) < deltaX) newHeading = 1;
+		else if (deltaY > 0 && Math.abs(deltaX) < deltaY) newHeading = 2;
+		else if (deltaX < 0 && Math.abs(deltaX) > Math.abs(deltaY)) newHeading = 3;
+		client.changeHeading(newHeading);
+	});
+});

game-core/color.js

@@ -1,3 +1,8 @@
+function verifyRange() {
+	for (var i = 0; i < arguments.length; i++) {
+		if (arguments[i] < 0 || arguments[i] > 1) throw new RangeError("H, S, L, and A parameters must be between the range [0, 1]");
+	}
+}
 function Color(h, s, l, a) {
 	verifyRange(h, s, l);
 	if (a === undefined) a = 1;
@@ -24,23 +29,19 @@ function Color(h, s, l, a) {
 Color.fromData = function(data) {
 	return new Color(data.hue, data.sat, data.lum, data.alpha);
 };
-
-function verifyRange() {
-	for (var i = 0; i < arguments.length; i++) {
-		if (arguments[i] < 0 || arguments[i] > 1) throw new RangeError("H, S, L, and A parameters must be between the range [0, 1]");
-	}
-}
 Color.prototype.interpolateToString = function(color, amount) {
 	var rgbThis = hslToRgb(this.hue, this.sat, this.lum);
 	var rgbThat = hslToRgb(color.hue, color.sat, color.lum);
 	var rgb = [];
-	for (var i = 0; i < 3; i++) rgb[i] = Math.floor((rgbThat[i] - rgbThis[i]) * amount + rgbThis[i]);
+	for (var i = 0; i < 3; i++) {
+		rgb[i] = Math.floor((rgbThat[i] - rgbThis[i]) * amount + rgbThis[i]);
+	}
 	return {
 		rgbString: function() {
 			return `rgb(${rgb[0]}, ${rgb[1]}, ${rgb[2]})`
 		}
 	};
-}
+};
 Color.prototype.deriveLumination = function(amount) {
 	var lum = this.lum + amount;
 	lum = Math.min(Math.max(lum, 0), 1);
@@ -64,7 +65,7 @@ Color.prototype.rgbString = function() {
 	rgb[3] = this.a;
 	return `rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, ${this.alpha})`;
 };
-//http://stackoverflow.com/a/9493060/7344257
+//https://stackoverflow.com/a/9493060/7344257
 function hslToRgb(h, s, l) {
 	var r, g, b;
 	if (s == 0) r = g = b = l; // achromatic

game-core/player.js

@@ -231,13 +231,7 @@ function fillTail(data) {
 		var r = coord[0];
 		var c = coord[1];
 
-		if (grid.isOutOfBounds(r, c)) {
+		if (grid.isOutOfBounds(r, c) || been.get(r, c)) continue;
-			continue;
-		}
-
-		if (been.get(r, c)) {
-			continue;
-		}
 
 		if (onTail(coord)) {//On the tail
 			been.set(r, c, true);
@@ -302,9 +296,9 @@ function floodFill(data, grid, row, col, been) {
 }
 
 function hitsTail(data, other) {
-	return (data.prevRow !== other.row || data.prevCol !== other.col) &&
+	return (data.prevRow !== other.row || data.prevCol !== other.col)
-		(data.startRow !== other.row || data.startCol !== other.col) &&
+	&& (data.startRow !== other.row || data.startCol !== other.col)
-		!!(data.tailGrid[other.row] && data.tailGrid[other.row][other.col]);
+	&& !!(data.tailGrid[other.row] && data.tailGrid[other.row][other.col]);
 }
 
 var SPEED = 5;
@@ -325,9 +319,7 @@ function Player(grid, sdata) {
 
 	//Only need colors for client side
 	var base;
-	if (sdata.base) {
+	if (sdata.base) base = this.baseColor = sdata.base instanceof Color ? sdata.base : Color.fromData(sdata.base);
-		base = this.baseColor = sdata.base instanceof Color ? sdata.base : Color.fromData(sdata.base);
-	}
 	else {
 		var hue = Math.random();
 		this.baseColor = base = new Color(hue, .8, .5);
@@ -338,9 +330,7 @@ function Player(grid, sdata) {
 
 	//Tail requires special handling
 	this.grid = grid; //Temporary
-	if (sdata.tail) {
+	if (sdata.tail) data.tail = new Tail(this, sdata.tail);
-		data.tail = new Tail(this, sdata.tail);
-	}
 	else {
 		data.tail = new Tail(this);
 		data.tail.reposition(calcRow(data), calcCol(data));
@@ -409,8 +399,7 @@ Player.prototype.render = function(ctx, fade) {
 	ctx.textAlign = "center";
 
 	var yoff = -SHADOW_OFFSET * 2;
-	if (this.row === 0)
+	if (this.row === 0) yoff = SHADOW_OFFSET * 2 + CELL_WIDTH;
-		yoff = SHADOW_OFFSET * 2 + CELL_WIDTH;
 	ctx.font = "18px Changa";
 	ctx.fillText(this.name, this.posX + CELL_WIDTH / 2, this.posY + yoff);
 };

public/index.html

@@ -2,6 +2,10 @@
 <html>
 <head>
 <meta charset="UTF-8"/>
+<meta name="viewport" content="user-scalable=no, viewport-fit=cover"/>
+<meta name="apple-mobile-web-app-capable" content="yes"/>
+<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
+<meta name="apple-touch-fullscreen" content="yes"/>
 <title>Paper.io</title>
 <link rel="stylesheet" href="static/styles.css"/>
 <script src="static/jquery.min.js"></script>

public/static/styles.css

@@ -32,17 +32,21 @@ body, html {
 	color: white;
 	font-family: "Changa", "Sans Serif";
 	user-select: none;
+	background-attachment: fixed;
 }
 canvas {
-	position: absolute;
+	position: fixed;
 	width: 100%;
 	height: 100%;
 	top: 0;
 	left: 0;
 }
 #begin {
+	position: fixed;
 	width: 100%;
 	height: 100%;
+	top: 0;
+	left: 0;
 	background: rgba(0,0,0,.8);
 }
 #github svg {