Improve BallToGridCollision

app/lib/ball.ts

@@ -29,6 +29,8 @@ export class Ball {
   private speedY: number
   private radius: number = Ball.radius
   private color: string | CanvasGradient | CanvasPattern = Ball.color
+  private hops: number = 0
+  private hits: number = 0
 
   // constructor creates a new instance.
   constructor(options: BallOptions) {
@@ -57,6 +59,8 @@ export class Ball {
     this.speedY = this.options.speedY
     this.radius = this.options.radius || Ball.radius
     this.color = this.options.color || Ball.color
+    this.hops = 0
+    this.hits = 0
   }
 
   // getX returns the x position of the ball.
@@ -131,6 +135,36 @@ export class Ball {
     this.color = color
   }
 
+  // getHops returns the number of hops.
+  public getHops(): number {
+    return this.hops
+  }
+
+  // increaseHops increases the number of hops.
+  public increaseHops(): void {
+    this.hops++
+  }
+
+  // resetHops resets the number of hops.
+  public resetHops(): void {
+    this.hops = 0
+  }
+
+  // getHits returns the number of hits.
+  public getHits(): number {
+    return this.hits
+  }
+
+  // increaseHits increases the number of hits.
+  public increaseHits(): void {
+    this.hits++
+  }
+
+  // resetHits resets the number of hits.
+  public resetHits(): void {
+    this.hits = 0
+  }
+
   // draw draws the ball on the canvas.
   public draw(): void {
     this.game.getContext().beginPath()

app/lib/collision.ts

@@ -47,6 +47,7 @@ export class CollisionManager {
       // Check for collision between the ball and boundaries
       const b2b = this.checkBallToBoundaryCollision(ball, ballFutureX, ballFutureY)
       if (b2b.collided) {
+        ball.increaseHops()
         if (this.onBallToBoundaryCollision) this.onBallToBoundaryCollision(b2b)
 
         if (b2b.oppositeSide) {
@@ -63,7 +64,11 @@ export class CollisionManager {
       for (let j = 0, m = paddles.length; j < m; j++) {
         const b2p = this.checkBallToPaddleCollision(ball, paddles[j], ballFutureX, ballFutureY)
         if (b2p.collided) {
+          if (b2p.playerSide === b2p.paddlePlayerSide) {
+            ball.increaseHits()
+          }
           if (this.onBallToPaddleCollision) this.onBallToPaddleCollision(b2p)
+          ball.resetHops()
 
           if (b2p.speedX) ball.setSpeedX(b2p.speedX)
           if (b2p.speedY) ball.setSpeedY(b2p.speedY)
@@ -90,7 +95,11 @@ export class CollisionManager {
       // Check for collisions between the balls and the grid
       const b2g = this.checkBallToGridCollision(ball, ballFutureX, ballFutureY)
       if (b2g.collided) {
+        b2g.hops = ball.getHops()
+        b2g.hits = ball.getHits()
         if (this.onBallToGridCollision) this.onBallToGridCollision(b2g)
+        ball.resetHops()
+        ball.resetHits()
 
         if (b2g.speedX) ball.setSpeedX(b2g.speedX)
         if (b2g.speedY) ball.setSpeedY(b2g.speedY)
@@ -322,4 +331,6 @@ export type BallToGridCollision = {
   futureY?: number
   cells?: number[][]
   playerSide?: PlayerSide
+  hops?: number
+  hits?: number
 }

app/lib/game.ts

@@ -383,7 +383,7 @@ export class Game {
 
   // onBallToGridCollision handles the ball to grid collision.
   private onBallToGridCollision = (collision: BallToGridCollision): void => {
-    this.wsSend(`{"event": "collision", "collision": {"kind": "ballToGrid", "playerSide": "${collision.playerSide}"}}`)
+    this.wsSend(`{"event": "collision", "collision": {"kind": "ballToGrid", "playerSide": "${collision.playerSide}", "hops": ${collision.hops || 0}, "hits": ${collision.hits || 0}, "cells": ${JSON.stringify(collision.cells) || []}}}`)
   }
 
   // wsSend sends a message to the WebSocket server.