Score and ballout

author: Tom Smeding <tom.smeding@gmail.com> 2018-06-23 21:32:44 +0200
committer: Tom Smeding <tom.smeding@gmail.com> 2018-06-23 21:32:44 +0200
commit: 1a24cdc54e683cb54af10fac6862643cc78ab4f4 (patch)
tree: b4149bc7f43fa1644e433635c3e3fd7a2b47d0ee
parent: dcb5d9477cbc2d721ab5424e888bd091a714d5ab (diff)
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));
author	Tom Smeding <tom.smeding@gmail.com>	2018-06-23 21:32:44 +0200
committer	Tom Smeding <tom.smeding@gmail.com>	2018-06-23 21:32:44 +0200
commit	1a24cdc54e683cb54af10fac6862643cc78ab4f4 (patch)
tree	b4149bc7f43fa1644e433635c3e3fd7a2b47d0ee
parent	dcb5d9477cbc2d721ab5424e888bd091a714d5ab (diff)