From 80cd3e25b3852002352311bd585fea93481e64d1 Mon Sep 17 00:00:00 2001 From: Elijah Cohen Date: Mon, 13 May 2019 18:57:46 -0500 Subject: [PATCH] lotta goodies touch (maybe), splash page, better oob, win messages, more keys, cleanup --- server/TODO.org | 10 ++++++---- server/gamestate.js | 43 ++++++++++++++++++++++--------------------- web/draw.js | 42 +++++++++++++++++++++++++++++++++++++----- web/index.html | 29 +++++++++++++++++++---------- web/input.js | 29 ++++++++++++++++++++++++++--- web/main.js | 21 +++++++++++++++++---- 6 files changed, 127 insertions(+), 47 deletions(-) diff --git a/server/TODO.org b/server/TODO.org index 7500669..a795ef8 100644 --- a/server/TODO.org +++ b/server/TODO.org @@ -1,8 +1,10 @@ list of things i should still do: - fix collisions -- fix oob -- splash page + +sorta extra/for later/unsure: - fiddle with variables to optimize fun -- TOUCH -- fix game not ending with just robots (is this actually broken?) +- make sure files are in the right place and urls are appropriate for server - double check all on-screen messages for fitting (look to the 'magic number...' comment) +- fix game not ending with just robots (is this actually broken?) +- polish +- debug touch diff --git a/server/gamestate.js b/server/gamestate.js index d778cbb..b574394 100644 --- a/server/gamestate.js +++ b/server/gamestate.js @@ -75,8 +75,9 @@ GameState.prototype.update = function(inputs) { // check for deaths // i don't need to check where any of the paddles are, I just need to check the spaces behind the paddles (±) - var zero = new Coord(0,0); - var oobs = this.balls.filter(b => (b.coord.dist2(zero)>(c.BOARD_RADIUS+c.OOB_THRESH)**2)); + // var zero = new Coord(0,0); + // var oobs = this.balls.filter(b => (b.coord.dist2(zero)>(c.BOARD_RADIUS+c.OOB_THRESH)**2)); + var oobs = this.balls.filter(b => endpoints.some(e => !left_of(b.coord, e))); // ball to the right of smth var angs = livingzones.map(eps => eps.getAngles()); //var angs = field.angles(this.numPlayers, this.dead, c.ANGLE_THRESH); for(var oob of oobs) { @@ -102,10 +103,14 @@ GameState.prototype.update = function(inputs) { } } } - // remove the ball - var idx = this.balls.indexOf(oob); + } + // remove far away balls + var oob2 = this.balls.filter(b => (b.coord.dist2origin()>(c.BOARD_RADIUS+c.OOB_THRESH)**2)); + for(var b of oob2) { + var idx = this.balls.indexOf(b); this.balls.splice(idx, 1); } + // spawn new balls? sure why not. maybe tweak this for more or less fun later on if(this.balls.length < (this.numPlayers-this.dead.length)-1) { this.balls.push(new Ball()); @@ -130,23 +135,19 @@ GameState.prototype.getState = function() { return theobject; } -// oh can I just trash this? yeah totally todo -function nearest_point_on_line(c, ep) { - // finds the point on the line defined by ep closest to center c - if(ep.f.x == ep.s.x) { - // vertical line, undef slope - return new Coord(ep.f.x, c.y); - } - if(ep.f.y == ep.s.y) { - // horizontal line, zero slope - return new Coord(c.x, ep.f.y); - } - var sl = (ep.f.y-ep.s.y)/(ep.f.x-ep.s.x); - var sr = 1/sl; - var x_int = (sl*ep.f.x - sr*c.x + c.y - ep.f.y)/(sl-sr); - var y_int = sr*(x_int-c.x) + c.y; - return new Coord(x_int, y_int); -} +var left_of = function(c, ep) { + // tells if coord c is to the left of an endpoint set (incr in angle) + // idea is that if all are left of then the ball is inbounds + + // translate everything to origin + var f = new Coord(0,0); + var s = new Coord(ep.s.x-ep.f.x, ep.s.y-ep.f.y); + var b = new Coord(c.x-ep.f.x, c.y-ep.f.y); + // rotate about the origin + var th = Math.atan2(s.y, s.x); + b.rotate(-th); + return b.y >= 0; +} module.exports = GameState; diff --git a/web/draw.js b/web/draw.js index 0683686..dfd4e75 100644 --- a/web/draw.js +++ b/web/draw.js @@ -116,7 +116,7 @@ var drawOverlay = function(ctx, place) { ctx.fillStyle = 'rgba(225,225,225,100)' ctx.textAlign = 'center'; ctx.fillText("you placed: " + place, 0, -7.5); - ctx.fillText("press =g= or click", 0, 0); // magic numbers... + ctx.fillText("press =g= or click/tap", 0, 0); // magic numbers... ctx.fillText("to play again", 0, 7.5); ctx.restore(); } @@ -137,10 +137,19 @@ var drawOver = function(ctx) { ctx.setTransform(10, 0, 0, 10, ctx.canvas.width/2, ctx.canvas.height/2); ctx.fillStyle = 'rgba(225,225,225,100)' ctx.textAlign = 'center'; - ctx.fillText("press =g= or click", 0, -5); + ctx.fillText("press =g= or click/tap", 0, -5); ctx.fillText("to play again", 0, 5); ctx.restore(); +} +var drawFail= function(ctx) { + ctx.save(); + ctx.setTransform(10, 0, 0, 10, ctx.canvas.width/2, ctx.canvas.height/2); + ctx.fillStyle = 'rgba(225,225,225,100)' + ctx.textAlign = 'center'; + ctx.fillText("connection error", 0, -5); + ctx.fillText("try again perhaps", 0, 5); + ctx.restore(); } var drawBusy = function(ctx) { @@ -151,10 +160,33 @@ var drawBusy = function(ctx) { ctx.fillStyle = 'rgba(225,225,225,100)'; ctx.textAlign = 'center'; ctx.fillText("server is too busy now", 0, -7.5); - ctx.fillText("press =g= or click", 0, 0); // magic numbers... + ctx.fillText("press =g= or click/tap", 0, 0); // magic numbers... ctx.fillText("to play again", 0, 7.5); - ctx.restore(); - + ctx.restore(); +} + +var drawWin = function(ctx) { + clearCanvas(ctx); + ctx.save(); + ctx.setTransform(10, 0, 0, 10, ctx.canvas.width/2, ctx.canvas.height/2); + ctx.fillStyle = 'rgba(225,225,225,100)'; + ctx.textAlign = 'center'; + ctx.fillText("WINNER!", 0, -7.5); + ctx.fillText("press =g= or click/tap", 0, 0); // magic numbers... + ctx.fillText("to play again", 0, 7.5); + ctx.restore(); +} + +var draw2nd = function(ctx) { + clearCanvas(ctx); + ctx.save(); + ctx.setTransform(10, 0, 0, 10, ctx.canvas.width/2, ctx.canvas.height/2); + ctx.fillStyle = 'rgba(225,225,225,100)'; + ctx.textAlign = 'center'; + ctx.fillText("second place!", 0, -7.5); + ctx.fillText("press =g= or click/tap", 0, 0); // magic numbers... + ctx.fillText("to play again", 0, 7.5); + ctx.restore(); } var clearCanvas = function(ctx) { diff --git a/web/index.html b/web/index.html index d654728..0573e5d 100644 --- a/web/index.html +++ b/web/index.html @@ -1,17 +1,26 @@ - Pong Battle Royale - - + Pong: Battle Royale! + - - - +
+

Pong: Battle Royale!

+

Yes, this is a battle royale version of pong. You are matched up with a large amount of other players in a shrinking arena, and your goal is to survive to the very end. Use 'w' and 's', 'k' and 'j', or the arrow keys to move your paddle with the keyboard, or touch the top or bottom half of the screen to move up or down with a touchscreen.

+ PLAY +
diff --git a/web/input.js b/web/input.js index dbdd725..4d8f08b 100644 --- a/web/input.js +++ b/web/input.js @@ -9,9 +9,9 @@ function keypressHandler(evt, isdn) { // "is down" (is a keydown) var thekey = 'x'; // small but significant note: everything here is rotated by a half circle, so everything is upside-down - if(evt.keyCode == '83') // 's' + if(dnKey(evt.keyCode)) // 's' thekey = 'u'; - else if(evt.keyCode == '87') // 'w' + else if(upKey(evt.keyCode)) // 'w' thekey = 'd'; if(!isdn && thekey==keystate) { @@ -26,9 +26,32 @@ function keypressHandler(evt, isdn) { } } +var upKey = function(kc) { + // w, k, ↑ + return kc == '87' || kc == '75' || kc == '38'; +} +var dnKey = function(kc) { + // s, j, ↓ + return kc == '83' || kc == '74' || kc == '40'; +} -function touchHandler(evt) { +function touchHandler(evt, isdn) { // deals with touch events on the canvas, todo when I can get my hands on documentation lol + if(!isdn) { + keystate = 'x'; + input = 'x'; + } + var touchy = evt.touches[0].clientY; // should be guaranteed to be nonempty i think + var cvheight = document.getElementById("c").clientHeight; + if(touchy > cvheight/2) { // may need to swap these if i'm hastily misunderstanding coordinates + keystate = 'd'; + input = 'd'; + } + else { + keystate = 'u'; + input = 'u'; + } + } diff --git a/web/main.js b/web/main.js index 3b6b465..d43b750 100644 --- a/web/main.js +++ b/web/main.js @@ -30,12 +30,17 @@ var main = function() { // starts everything, gets us going, setup ish /**/ theSocket = new WebSocket(prefixurl); + if(theSocket.readyState==theSocket.CLOSING || theSocket.readyState==theSocket.CLOSED) { + // could not connect + drawFail(ctx); + return; + } drawWaiting(ctx); theSocket.onmessage = function(e) { if(e.data == "busy") { - canvas.onclick = function(e) {location.reload()} // okay, outside of 'input' file... - canvas.onkeydown = function(e) {if(e.keyCode == '71') location.reload()}; + document.onclick = function(e) {location.reload()} // okay, outside of 'input' file... + document.onkeydown = function(e) {if(e.keyCode == '71') location.reload()}; drawBusy(ctx); // socket should be closed by server return; @@ -46,10 +51,16 @@ var main = function() { // starts everything, gets us going, setup ish ctx.setTransform(10, 0, 0, 10, ctx.canvas.width/2, ctx.canvas.height/2); // change to setTransform? ctx.lineWidth = ctx.lineWidth/5; if(e.data == "w") { + document.onclick = function(e) {location.reload()} // okay, outside of 'input' file... + document.onkeydown = function(e) {if(e.keyCode == '71') location.reload()}; + drawWin(ctx); console.log("winner"); return; } else if(e.data == "l") { + document.onclick = function(e) {location.reload()} // okay, outside of 'input' file... + document.onkeydown = function(e) {if(e.keyCode == '71') location.reload()}; + draw2nd(ctx); console.log("loser"); return; } @@ -61,8 +72,8 @@ var main = function() { // starts everything, gets us going, setup ish var status = state.dead.some(e => e.id == state.id); if(status) { // add event listener if dead - canvas.onclick = function(e) {location.reload()} // okay, outside of 'input' file... - canvas.onkeydown = function(e) {if(e.keyCode == '71') location.reload()}; + document.onclick = function(e) {location.reload()} // okay, outside of 'input' file... + document.onkeydown = function(e) {if(e.keyCode == '71') location.reload()}; } } @@ -71,6 +82,8 @@ var main = function() { // starts everything, gets us going, setup ish document.onkeydown = function(e) {keypressHandler(e, true);}; document.onkeyup = function(e) {keypressHandler(e, false);}; + document.addEventListener('touchstart', function(e) {touchhandler(e, true);}); + document.addEventListener('touchstart', function(e) {touchhandler(e, false);}); var interval = setInterval(function(){keySender(theSocket);}, c.MS_PER_FRAME); theSocket.onclose = function(e) {clearInterval(interval)}; -- 2.39.2