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
// 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) {
}
}
}
- // 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());
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;
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();
}
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) {
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) {
<!doctype html>
<html>
<head>
- <title>Pong Battle Royale</title>
- <script type="text/javascript" src="socket.js"></script>
- <script type="text/javascript" src="drawing.js"></script>
+ <title>Pong: Battle Royale!</title>
+ <style type="text/css">
+ body { background-color: black; }
+ #content { width: 70%;
+ display: block;
+ margin: 0 auto;
+ color: #fff8f8;
+ text-align: center;
+ }
+ #b {
+ background-color: #aa2200;
+ color: #00aa22;
+ }
+ </style>
</head>
<body>
- <button id="play" type="button" name="play">
- Play
- </button>
- <button id="stop" type="button" name="play">
- stop
- </button>
- <canvas id="game" width="300" height="300"></canvas>
+ <div id="content">
+ <h3>Pong: Battle Royale!</h3>
+ <p>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.</p>
+ <a href="play.html" id="b">PLAY</a>
+ </div>
</body>
</html>
// "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) {
}
}
+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';
+ }
+
}
/**/
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;
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;
}
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()};
}
}
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)};
home / projects / pong_br / commitdiff