add pong example

jbakse · Jan 19, 2022 · c6ae91c · c6ae91c
1 parent 9e88946
commit c6ae91c
Show file tree

Hide file tree

Showing 5 changed files with 142 additions and 0 deletions.
diff --git a/public/examples/pong_m/README.md b/public/examples/pong_m/README.md
@@ -0,0 +1,9 @@
+# ping
+
+Play pong.
+
+- **move mouse** to move your paddle, if you are a player
+
+> Open this example in two browser windows at once!
+
+This example automatically assigns two participants to be player 1 and player 2. Other participants are observers. If a player drops out, an observer takes their place.
diff --git a/public/examples/pong_m/index.html b/public/examples/pong_m/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <head>
+      <link rel="stylesheet" href="../sketch.css" />
+    </head>
+  </head>
+  <body>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/p5.min.js"></script>
+
+    <script src="/dist/p5.party.js"></script>
+
+    <script type="module" src="index.js"></script>
+  </body>
+</html>
diff --git a/public/examples/pong_m/index.js b/public/examples/pong_m/index.js
@@ -0,0 +1,89 @@
+import { Rect, intersects } from "./shape.js";
+
+let shared;
+let my;
+let participants;
+
+window.preload = () => {
+  partyConnect("wss://deepstream-server-1.herokuapp.com", "drag", "main");
+  shared = partyLoadShared("shared");
+  my = partyLoadMyShared();
+  participants = partyLoadParticipantShareds();
+};
+
+window.setup = () => {
+  createCanvas(600, 400);
+  noStroke();
+
+  if (partyIsHost()) {
+    shared.ball = new Rect(300, 200, 20, 20);
+    shared.ball.dX = 4;
+    shared.ball.dY = 4;
+  }
+
+  my.role = "observer";
+  my.y = 20;
+};
+
+window.draw = () => {
+  if (partyIsHost()) assignPlayers();
+  if (partyIsHost()) stepBall();
+  my.y = mouseY - 50;
+
+  fill("#fee");
+
+  // draw background
+  background("#211");
+
+  // draw ball
+  rect(shared.ball.l, shared.ball.t, shared.ball.w, shared.ball.h);
+
+  // draw player 1
+  const p1 = participants.find((p) => p.role === "player1");
+  if (p1) rect(60, p1.y, 20, 100);
+
+  // draw player 2
+  const p2 = participants.find((p) => p.role === "player2");
+  if (p2) rect(520, p2.y, 20, 100);
+
+  // draw role
+  textAlign(CENTER);
+  text(my.role, 300, 380);
+};
+
+function stepBall() {
+  const ball = shared.ball;
+  ball.l += ball.dX;
+  ball.t += ball.dY;
+
+  // bounds
+  if (ball.t < 0) ball.dY = abs(ball.dY);
+  if (ball.l < 0) ball.dX = abs(ball.dX);
+  if (ball.r > width) ball.dX = -abs(ball.dX);
+  if (ball.b > height) ball.dY = -abs(ball.dY);
+
+  // player 1
+  const p1 = participants.find((p) => p.role === "player1");
+  if (p1 && intersects(ball, new Rect(60, p1.y, 20, 100))) {
+    ball.dX = abs(ball.dX);
+    console.log("hit");
+  }
+
+  // player 2
+  const p2 = participants.find((p) => p.role === "player2");
+  if (p2 && intersects(ball, new Rect(520, p2.y, 20, 100))) {
+    ball.dX = -abs(ball.dX);
+    console.log("hit");
+  }
+}
+
+function assignPlayers() {
+  if (!participants.find((p) => p.role === "player1")) {
+    const o = participants.find((p) => p.role === "observer");
+    if (o) o.role = "player1";
+  }
+  if (!participants.find((p) => p.role === "player2")) {
+    const o = participants.find((p) => p.role === "observer");
+    if (o) o.role = "player2";
+  }
+}
diff --git a/public/examples/pong_m/shape.js b/public/examples/pong_m/shape.js
@@ -0,0 +1,28 @@
+export class Rect {
+  constructor(l = 0, t = 0, w = 0, h = 0) {
+    this.l = l;
+    this.t = t;
+    this.w = w;
+    this.h = h;
+  }
+}
+
+export class Point {
+  constructor(x = 0, y = 0) {
+    this.x = x;
+    this.y = y;
+  }
+}
+
+export function pointInRect(p, r) {
+  return p.x > r.l && p.x < r.l + r.w && p.y > r.t && p.y < r.t + r.h;
+}
+
+export function intersects(r1, r2) {
+  r1.b = r1.t + r1.h;
+  r1.r = r1.l + r1.w;
+  r2.b = r2.t + r2.h;
+  r2.r = r2.l + r2.w;
+
+  return r1.l < r2.r && r1.r > r2.l && r1.t < r2.b && r1.b > r2.t;
+}
diff --git a/public/index.html b/public/index.html
@@ -62,6 +62,7 @@ <h2>Expiremental Examples</h2>
       <li><a href="show_example.html?stickies">stickies</a></li>
       <li><a href="show_example.html?ultra_dart_city">ultra_dart_city</a></li>
       <li><a href="show_example.html?chess_m">chess</a></li>
+      <li><a href="show_example.html?pong_m">pong</a></li>
     </article>
   </body>
 </html>