lerping

static/script.js

@@ -31,6 +31,8 @@ window.addEventListener("DOMContentLoaded", function() {
             this._ty = canvas.height - 60;
             this._lastTs = 0;
             this._tFacing = undefined;
+            this._lastUpdateTime = Date.now();
+            this._updateInterval = 100;
         }
 
         update() {
@@ -58,8 +60,10 @@ window.addEventListener("DOMContentLoaded", function() {
 
             this.x += this.vx;
 
-            this.vy += this.gravity;
+            if (this.isLocal) {
-            this.y += this.vy;
+                this.vy += this.gravity;
+                this.y += this.vy;
+            }
 
             this.x = Math.max(20, Math.min(this.canvas.width - 20, this.x));
 
@@ -82,24 +86,20 @@ window.addEventListener("DOMContentLoaded", function() {
 
             if (!this.isLocal && typeof this._tx === "number"
                 && typeof this._ty === "number") {
-                if (this._tx > this.x) {
+                const now = Date.now();
-                    this.keys.d = true;
+                const timeSinceUpdate = now - this._lastUpdateTime;
-                }
-
-
-                if (this._tx < this.x) {
-                    this.keys.a = true;
-                }
 
-                if (this._tx === this.x) {
+                const targetLerpTime = 100;
-                    this.keys.a = false;
+                const deltaTime = 16.67;
-                    this.keys.d = false;
+                const lerpFactor = Math.min(1, deltaTime / targetLerpTime);
-                }
+                const stalenessFactor = Math.min(2, timeSinceUpdate / this._updateInterval);
+                const adjustedLerpFactor = lerpFactor * stalenessFactor;
 
-                if (this.facing != this._tFacing && typeof this._tFacing !== 'undefined') {
+                const lerp = (a, b, t) => a + (b - a) * Math.min(1, t);
-                    this.facing = this._tFacing;
-                }
 
+                this.x = lerp(this.x, this._tx, adjustedLerpFactor);
+                this.y = lerp(this.y, this._ty, adjustedLerpFactor);
+                this.facing = this._tFacing ?? this.facing;
             }
         }
 
@@ -314,11 +314,6 @@ window.addEventListener("DOMContentLoaded", function() {
                     const nowBelowTop = (this.y + totalHeight) >= pf.y - EPS;
                     const dropping = this.crouching === true; // hold 's' to drop through
 
-                    console.log({
-                        feetPrev: this._prevY + 60, feetNow: this.y + 60, pfTop: pf.y,
-                        horizOverlap, wasAbove, nowBelowTop, dropping
-                    });
-
                     if (horizOverlap && wasAbove && nowBelowTop && !dropping) {
                         this.y = pf.y - totalHeight;
                         this.vy = 0;
@@ -424,7 +419,6 @@ window.addEventListener("DOMContentLoaded", function() {
 
             const jitter = this._reconnectDelay * (Math.random() * 0.4 - 0.2);
             const delay = Math.max(250, Math.min(this._maxReconnectDelay, this._reconnectDelay + jitter));
-            console.log(`Reconnecting websocket...`)
 
             this._reconnectTimer = setTimeout(() => {
                 this._reconnectTimer = null;
@@ -449,7 +443,9 @@ window.addEventListener("DOMContentLoaded", function() {
 
             playerArray.forEach(player => {
                 player.update();  // Call the update method for each player
-                player.resolveCollisions(this.platform, this.canvas.height);
+                if (player.isLocal) {
+                    player.resolveCollisions(this.platform, this.canvas.height);
+                }
             });
 
             for (let i = 0; i < playerArray.length; i++) {
@@ -464,7 +460,6 @@ window.addEventListener("DOMContentLoaded", function() {
 
                     if (playerAPunch && !playerA.punchHasHit && rectangleOverlap(playerAPunch, playerBBody)) {
                         playerA.punchHasHit = true;
-                        console.log("Player A hits player B");
                         playerB.hp -= 1;
                         if (playerB.hp == 0) {
                             playerB.isAlive = false;
@@ -474,7 +469,6 @@ window.addEventListener("DOMContentLoaded", function() {
 
                     if (playerBPunch && !playerB.punchHasHit && rectangleOverlap(playerBPunch, playerABody)) {
                         playerB.punchHasHit = true;
-                        console.log("Player B hits player A")
                         playerA.hp -= 1;
                         if (playerA.hp == 0) {
                             playerA.isAlive = false;
@@ -488,6 +482,20 @@ window.addEventListener("DOMContentLoaded", function() {
                 player.draw(this.ctx, this.time);  // Call the draw method for each player
             })
 
+            const me = this._me();
+            if (me && me.isLocal) {
+                if (this.time % 0.2 < 0.1) {
+                    this._send({
+                        Id: this.pageData.username,
+                        Action: "position_update",
+                        PosX: Math.floor(me.x),
+                        PosY: Math.floor(me.y),
+                        Facing: me.facing,
+                        Ts: Date.now(),
+                    })
+                }
+            }
+
             requestAnimationFrame(this.loop)
         }
 
@@ -612,10 +620,11 @@ window.addEventListener("DOMContentLoaded", function() {
                 if (typeof data.PosX === "number" && typeof data.PosY === "number") {
                     p._tx = data.PosX;
                     p._ty = data.PosY;
+                    p._lastUpdateTime = Date.now();
                 }
 
                 if (typeof data.Facing === "number") {
-                    p.tFacing = data.Facing;
+                    p._tFacing = data.Facing;
                 }