add fps print out to tanks_emit

jbakse · Jan 12, 2022 · 39447d4 · 39447d4
1 parent fd3dc8a
commit 39447d4
Show file tree

Hide file tree

Showing 4 changed files with 135 additions and 76 deletions.
diff --git a/public/examples/tanks_emit/fps.js b/public/examples/tanks_emit/fps.js
@@ -0,0 +1,17 @@
+class fpsCounter {
+  constructor() {
+    this.frames = 0;
+    this.startTime = performance.now();
+    this.frameRate = 0;
+  }
+  tick() {
+    this.frames++;
+    const now = performance.now();
+    if (now > this.startTime + 1000) {
+      this.frameRate = this.frames;
+      this.frames = 0;
+      this.startTime = now;
+    }
+    return this.frameRate;
+  }
+}
diff --git a/public/examples/tanks_emit/index.html b/public/examples/tanks_emit/index.html
@@ -9,21 +9,25 @@
       #create {
         padding: 10px;
       }
-      #shared {
+      #debug {
         background: #eee;
         white-space: pre;
+        font-family: monospace;
       }
     </style>
   </head>
   <body>
     <div id="canvas-wrap"></div>
-    <div id="shared"></div>
+    <div id="debug"></div>
     <script src="https://unpkg.com/uuid@latest/dist/umd/uuidv4.min.js"></script>
 
     <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 src="shape.js"></script>
+    <script src="fps.js"></script>
+
     <script src="index.js"></script>
   </body>
 </html>
diff --git a/public/examples/tanks_emit/index.js b/public/examples/tanks_emit/index.js
@@ -1,28 +1,13 @@
+// uuidv4.min.js
 /* global uuidv4 */
-/* global partyEmit partySubscribe*/
-
-class Rect {
-  constructor(l = 0, t = 0, w = 0, h = 0) {
-    this.l = l;
-    this.t = t;
-    this.w = w;
-    this.h = h;
-  }
-}
-
-class Point {
-  constructor(x = 0, y = 0) {
-    this.x = x;
-    this.y = y;
-  }
-}
 
-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;
-}
+// p5.party experimental
+/* global partyEmit partySubscribe*/
 
-const bounds = new Rect(0, 0, 400, 400);
+// project utils
+/* global Rect pointInRect fpsCounter*/
 
+const fps = new fpsCounter();
 let shared, me, participants;
 
 function preload() {
@@ -35,87 +20,48 @@ function preload() {
 function setup() {
   createCanvas(400, 400).parent("canvas-wrap");
 
-  noStroke();
-
   if (partyIsHost()) {
     shared.bullets = [];
   }
-  me.tank = { x: 100, y: 100, a: 0 };
 
-  // hosting can change mid-game so every client subscribes, and then checks if it is host on every event
+  me.tank = { x: random(width), y: random(height), a: random(2 * PI), spin: 0 };
 
-  partySubscribe("createBullet", createBullet);
+  // hosting can change mid-game so every client subscribes, and then checks if it is host on every event
+  partySubscribe("createBullet", onCreateBullet);
 }
 
 function draw() {
-  checkKeys();
-  showData();
+  moveTank();
   if (partyIsHost()) stepGame();
   drawScene();
+  showDebugData();
 }
 
+///////////////////////////////////////////
+// HOST CODE
+
 function stepGame() {
   // step bullets
   shared.bullets.forEach(stepBullet);
 }
 
-function showData() {
-  document.getElementById("shared").innerText = JSON.stringify(
-    shared,
-    null,
-    "\t"
-  );
-}
-function drawScene() {
-  background("#cc6666");
-  shared.bullets.forEach(drawBullet);
-  for (const p of participants) {
-    if (p.tank) drawTank(p.tank);
-  }
-}
-
-function drawTank(tank) {
-  push();
-  rectMode(CENTER);
-  translate(tank.x, tank.y);
-  rotate(tank.a);
-  rect(0, 0, 30, 30);
-  rect(0, -20, 5, 5);
-  pop();
-}
-
-function createBullet(b) {
-  if (partyIsHost()) shared.bullets.push(b);
-}
-
 function stepBullet(b) {
   b.x += b.dX;
   b.y += b.dY;
-  if (!pointInRect(b, bounds)) {
+  if (!pointInRect(b, new Rect(0, 0, 400, 400))) {
     const i = shared.bullets.indexOf(b);
     shared.bullets.splice(i, 1);
   }
 }
 
-function drawBullet(b) {
-  push();
-  ellipse(b.x, b.y, 10, 10);
-  pop();
+function onCreateBullet(b) {
+  if (partyIsHost()) shared.bullets.push(b);
 }
 
-function keyPressed() {
-  if (key === " ") {
-    partyEmit("createBullet", {
-      x: me.tank.x,
-      y: me.tank.y,
-      dX: sin(me.tank.a) * 6,
-      dY: -cos(me.tank.a) * 6,
-    });
-  }
+///////////////////////////////////////////
+// CLIENT CODE - LOGIC
 
-  return false;
-}
-function checkKeys() {
+function moveTank() {
   // forward
   if (keyIsDown(87) /*w*/) {
     me.tank.x += sin(me.tank.a) * 3;
@@ -130,4 +76,77 @@ function checkKeys() {
 
   if (keyIsDown(65) /*a*/) me.tank.a -= radians(2);
   if (keyIsDown(68) /*d*/) me.tank.a += radians(2);
+
+  for (const bullet of shared.bullets) {
+    console.log(bullet, bullet.x, bullet.y, me.tank.x, me.tank.y);
+    if (dist(bullet.x, bullet.y, me.tank.x, me.tank.y) < 15) {
+      me.tank.spin = 0.4;
+    }
+  }
+
+  me.tank.spin *= 0.98;
+  me.tank.a += me.tank.spin;
+}
+
+function keyPressed() {
+  if (key === " ") {
+    partyEmit("createBullet", {
+      x: me.tank.x + sin(me.tank.a) * 16,
+      y: me.tank.y - cos(me.tank.a) * 16,
+      dX: sin(me.tank.a) * 6,
+      dY: -cos(me.tank.a) * 6,
+    });
+  }
+
+  return false;
+}
+
+///////////////////////////////////////////
+// CLIENT CODE - DRAW
+
+function drawScene() {
+  noStroke();
+  background("#cc6666");
+  shared.bullets.forEach(drawBullet);
+  for (const p of participants) {
+    if (p.tank) drawTank(p.tank);
+  }
+}
+
+function drawTank(tank) {
+  push();
+  rectMode(CENTER);
+  translate(tank.x, tank.y);
+  rotate(tank.a);
+  rect(0, 0, 30, 30);
+  rect(0, -20, 5, 5);
+  pop();
+}
+
+function drawBullet(b) {
+  push();
+  ellipse(b.x, b.y, 10, 10);
+  pop();
+}
+
+///////////////////////////////////////////
+// DEBUG CODE
+function showDebugData() {
+  const data = {
+    frameRate: fps.tick(),
+    bulletCount: shared.bullets.length,
+    playerCount: participants.length,
+    me,
+  };
+
+  const roundIt = (key, value) => {
+    if (typeof value === "number") return Math.floor(value * 100) / 100;
+    return value;
+  };
+
+  document.getElementById("debug").innerText = JSON.stringify(
+    data,
+    roundIt,
+    "  "
+  );
 }
diff --git a/public/examples/tanks_emit/shape.js b/public/examples/tanks_emit/shape.js
@@ -0,0 +1,19 @@
+class Rect {
+  constructor(l = 0, t = 0, w = 0, h = 0) {
+    this.l = l;
+    this.t = t;
+    this.w = w;
+    this.h = h;
+  }
+}
+
+class Point {
+  constructor(x = 0, y = 0) {
+    this.x = x;
+    this.y = y;
+  }
+}
+
+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;
+}