forked from ilikecats/papercats
Touch support
This commit is contained in:
parent
b535f5c354
commit
2ea6801dcd
@ -39,9 +39,7 @@ function Loc(row, col) {
|
||||
}
|
||||
|
||||
function update(frame) {
|
||||
if (startFrame == -1) {
|
||||
startFrame = frame;
|
||||
}
|
||||
if (startFrame == -1) startFrame = frame;
|
||||
endFrame = frame;
|
||||
|
||||
if (frame % 6 == (startFrame + 1) % 6) {
|
||||
|
@ -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);
|
||||
});
|
||||
});
|
||||
|
@ -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
|
||||
|
@ -231,13 +231,7 @@ function fillTail(data) {
|
||||
var r = coord[0];
|
||||
var c = coord[1];
|
||||
|
||||
if (grid.isOutOfBounds(r, c)) {
|
||||
continue;
|
||||
}
|
||||
|
||||
if (been.get(r, c)) {
|
||||
continue;
|
||||
}
|
||||
if (grid.isOutOfBounds(r, c) || 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) &&
|
||||
(data.startRow !== other.row || data.startCol !== other.col) &&
|
||||
!!(data.tailGrid[other.row] && data.tailGrid[other.row][other.col]);
|
||||
return (data.prevRow !== other.row || data.prevCol !== other.col)
|
||||
&& (data.startRow !== other.row || data.startCol !== 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) {
|
||||
base = this.baseColor = sdata.base instanceof Color ? sdata.base : Color.fromData(sdata.base);
|
||||
}
|
||||
if (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) {
|
||||
data.tail = new Tail(this, sdata.tail);
|
||||
}
|
||||
if (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)
|
||||
yoff = SHADOW_OFFSET * 2 + CELL_WIDTH;
|
||||
if (this.row === 0) yoff = SHADOW_OFFSET * 2 + CELL_WIDTH;
|
||||
ctx.font = "18px Changa";
|
||||
ctx.fillText(this.name, this.posX + CELL_WIDTH / 2, this.posY + yoff);
|
||||
};
|
||||
|
File diff suppressed because one or more lines are too long
@ -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>
|
||||
|
@ -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 {
|
||||
|
Loading…
Reference in New Issue
Block a user