ilikecats/papercats
1
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Touch support

Browse Source
This commit is contained in:
StevenJoeZhang 2019-01-16 12:15:38 +08:00
parent b535f5c354
commit 2ea6801dcd
7 changed files with 53 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
client-modes/paper-io-bot-mode.js
View File

@ -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) {

29
game-client.js
View File

@ -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);
});
});

19
game-core/color.js
View File

@ -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

25
game-core/player.js
View File

@ -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);
};

2
public/bundle.js
View File

File diff suppressed because one or more lines are too long

4
public/index.html
View File

@ -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>

6
public/static/styles.css
View File

@ -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 {