aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--game.css34
-rw-r--r--game.html11
-rw-r--r--game.js31
-rwxr-xr-xserver.js53
4 files changed, 120 insertions, 9 deletions
diff --git a/game.css b/game.css
index e1d198a..3830dfd 100644
--- a/game.css
+++ b/game.css
@@ -11,18 +11,22 @@ body {
font-family: sans-serif;
}
-#overlay-container {
+.invisible {
+ display: none;
+}
+
+.centerbox {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
- align-items: center;
display: flex;
+ align-items: center;
justify-content: center;
}
-#status {
+.largetext {
color: #ffffff;
font-size: 40pt;
text-shadow: 0px 0px 3px #000000;
@@ -31,3 +35,27 @@ body {
-moz-user-select: none;
-webkit-user-select: none;
}
+
+#overlay-container {
+ position: absolute;
+ left: 0;
+ top: 0;
+ right: 0;
+ bottom: 0;
+}
+
+#score-container {
+ position: absolute;
+ left: 0;
+ top: 0;
+ right: 0;
+ height: 30%;
+}
+
+#score-left, #score-right {
+ display: inline-block;
+ width: 30vw;
+}
+#score-left {
+ text-align: right;
+}
diff --git a/game.html b/game.html
index ac0f0cf..7a2c7ef 100644
--- a/game.html
+++ b/game.html
@@ -10,7 +10,16 @@
<body>
<canvas id="cvs"></canvas>
<div id="overlay-container">
- <div id="status"></div>
+ <div class="centerbox">
+ <div id="status" class="largetext"></div>
+ </div>
+ <div id="score-container" class="centerbox">
+ <div id="score" class="largetext invisible">
+ <span id="score-left"></span>
+ &mdash;
+ <span id="score-right"></span>
+ </div>
+ </div>
</div>
</body>
</html>
diff --git a/game.js b/game.js
index 4be774a..77d4151 100644
--- a/game.js
+++ b/game.js
@@ -85,6 +85,16 @@ function displayStatus(msg) {
document.getElementById("status").innerHTML = msg;
}
+function displayScore(score) {
+ document.getElementById("score").classList.remove("invisible");
+ document.getElementById("score-left").innerHTML = score[0];
+ document.getElementById("score-right").innerHTML = score[1];
+
+ setTimeout(function() {
+ document.getElementById("score").classList.add("invisible");
+ }, 2000);
+}
+
function openGame() {
socket = io();
socket.on("redirect", function(url) {
@@ -95,6 +105,10 @@ function openGame() {
displayStatus(msg);
});
+ socket.on("score", function(score) {
+ displayScore(score);
+ });
+
socket.on("serve", function(side, x, y) {
playing = true;
flip = side == "right";
@@ -151,7 +165,12 @@ function stopGraphicsLoop() {
function startPhysicsLoop() {
var interval = 1 / 120;
physicsLoopId = setInterval(function() {
- advancePhysics(interval);
+ if (advancePhysics(interval)) {
+ socket.emit("ballvec", ballX, ballY, ballVX, ballVY);
+ }
+ if (ballX < -ballRadius) {
+ socket.emit("ballout");
+ }
}, interval * 1000);
}
@@ -168,7 +187,10 @@ function initPhysics() {
padVel = pad2Vel = 0;
}
+// Returns whether a new ballvec should be sent
function advancePhysics(deltaT) {
+ var sendBallvec = false;
+
var newballX = ballX + ballVX * deltaT;
var newballY = ballY + ballVY * deltaT;
var newpadPos = padPos + padVel * deltaT;
@@ -190,6 +212,7 @@ function advancePhysics(deltaT) {
if (newballX <= padX + padWidth + ballRadius &&
Math.abs(newballY - padPos) < padHeight / 2 + ballRadius) {
t = (padX + padWidth + ballRadius - ballX) / ballVX;
+ sendBallvec = true; // rebound from *our* pad
} else if (newballX >= 1 - (padX + padWidth + ballRadius) &&
Math.abs(newballY - pad2Pos) < padHeight / 2 + ballRadius) {
t = (1 - (padX + padWidth + ballRadius) - ballX) / ballVX;
@@ -201,10 +224,16 @@ function advancePhysics(deltaT) {
ballVX = -ballVX;
}
+ if ((ballX < 0.5) ^ (newballX < 0.5)) {
+ sendBallvec = true;
+ }
+
ballX = newballX;
ballY = newballY;
padPos = newpadPos;
pad2Pos = newpad2Pos;
+
+ return sendBallvec;
}
function setupBindings() {
diff --git a/server.js b/server.js
index 81df97c..47896e8 100755
--- a/server.js
+++ b/server.js
@@ -9,7 +9,7 @@ const app = express();
const server = http.Server(app);
const io = socketio(server);
-// gameid -> {pl: [socket], started: Bool}
+// gameid -> {pl: [socket]*{1,2}, started: Bool, nextServe: Int, score: [Int, Int]}
const games = new Map();
function genId() {
@@ -74,8 +74,9 @@ io.on("connection", (conn) => {
if (!gameobj || gameobj.pl.length != 2) return;
gameobj.pl[0].emit("status", "");
gameobj.pl[1].emit("status", "");
- gameobj.pl[0].emit("startBall");
- gameobj.pl[1].emit("start");
+ gameobj.pl[0].emit(gameobj.nextServe == 0 ? "startBall" : "start");
+ gameobj.pl[1].emit(gameobj.nextServe == 1 ? "startBall" : "start");
+ gameobj.nextServe = 1 - gameobj.nextServe;
}, 2000);
} else {
console.log(" full");
@@ -89,7 +90,7 @@ io.on("connection", (conn) => {
} else {
console.log(" new");
gameid = id;
- gameobj = {pl: [conn], started: false};
+ gameobj = {pl: [conn], started: false, nextServe: 0, score: [0, 0]};
games.set(gameid, gameobj);
conn.emit("status", "Waiting for other player...");
}
@@ -129,6 +130,50 @@ io.on("connection", (conn) => {
}
}
});
+
+ conn.on("ballvec", (x, y, vx, vy) => {
+ if (!gameobj) return;
+ for (const p of gameobj.pl) {
+ if (p != conn) {
+ p.emit("ballvec", x, y, vx, vy);
+ }
+ }
+ });
+
+ conn.on("ballout", () => {
+ if (!gameobj || gameobj.pl.length != 2) return;
+
+ gameobj.pl[0].emit("stop");
+ gameobj.pl[1].emit("stop");
+ gameobj.pl[0].emit("status", "Ball out!");
+ gameobj.pl[1].emit("status", "Ball out!");
+
+ for (let i = 0; i < gameobj.pl.length; i++) {
+ if (gameobj.pl[i] != conn) {
+ gameobj.score[i]++;
+ }
+ }
+
+ gameobj.pl[0].emit("score", gameobj.score);
+ gameobj.pl[1].emit("score", gameobj.score);
+
+ setTimeout(() => {
+ if (!gameobj || gameobj.pl.length != 2) return;
+ gameobj.pl[0].emit("status", "Get ready...");
+ gameobj.pl[1].emit("status", "Get ready...");
+ gameobj.pl[0].emit("serve", "left", 0.5, 0.5);
+ gameobj.pl[1].emit("serve", "right", 0.5, 0.5);
+
+ setTimeout(() => {
+ if (!gameobj || gameobj.pl.length != 2) return;
+ gameobj.pl[0].emit("status", "");
+ gameobj.pl[1].emit("status", "");
+ gameobj.pl[0].emit(gameobj.nextServe == 0 ? "startBall" : "start");
+ gameobj.pl[1].emit(gameobj.nextServe == 1 ? "startBall" : "start");
+ gameobj.nextServe = 1 - gameobj.nextServe;
+ }, 2000);
+ }, 2000);
+ });
});
server.listen(PORT, () => console.log("Listening on port " + PORT));