JSON serial change & working basic gameplay

client/src/components/Game.vue

@@ -53,13 +53,13 @@ export default {
 
       this.players.forEach(player => {
         this.renderPlayer(player)
-        this.renderWalls(player.walls, player.color)
+        this.renderWalls(player)
       })
 
-      this.renderDebug()
+      this.renderDebug(this.player)
 
-      this.checkPlayerColision()
-      this.updatePlayer()
+      // this.checkPlayerColision()
+      this.updatePlayer(this.player)
     },
     renderBorders () {
       this.context.strokeStyle = 'black'
@@ -80,19 +80,19 @@ export default {
 
       this.context.restore()
     },
-    renderWalls (walls, color) {
+    renderWalls (player) {
       this.context.beginPath()
       this.context.lineWidth = this.settings.wallSize
-      this.context.strokeStyle = color
-      walls.forEach(wall => {
+      this.context.strokeStyle = player.color
+      player.walls.forEach(wall => {
         const canvasX = this.canvas.width / 2 + wall.x - this.player.x
         const canvasY = this.canvas.height / 2 + wall.y - this.player.y
         this.context.lineTo(canvasX, canvasY)
       })
-      this.context.lineTo(this.canvas.width / 2, this.canvas.height / 2)
+      this.context.lineTo(this.canvas.width / 2 + player.x - this.player.x, this.canvas.height / 2 + player.y - this.player.y)
       this.context.stroke()
     },
-    renderDebug () {
+    renderDebug (player) {
       this.context.beginPath()
       const canvasX = this.canvas.width / 2
       const canvasY = this.canvas.height / 2
@@ -102,8 +102,8 @@ export default {
       this.context.strokeStyle = 'blue'
       this.context.stroke()
 
-      const x = canvasX + 30 * Math.cos(this.player.angle) * 2
-      const y = canvasY + 30 * Math.sin(this.player.angle) * 2
+      const x = canvasX + 30 * Math.cos(player.angle) * 2
+      const y = canvasY + 30 * Math.sin(player.angle) * 2
       this.context.beginPath()
       this.context.lineTo(canvasX, canvasY)
       this.context.lineTo(x, y)
@@ -125,10 +125,10 @@ export default {
       this.context.strokeStyle = 'purple'
       this.context.stroke()
 
-      this.context.fillText('player x: ' + this.player.x + ' y:' + this.player.y, 10, 10)
-      this.context.fillText('a:' + this.player.angle + ' a_t' + this.player.targetAngle, 10, 20)
+      this.context.fillText('player x: ' + player.x + ' y:' + player.y, 10, 10)
+      this.context.fillText('a:' + player.angle + ' a_t' + player.targetAngle, 10, 20)
       this.context.fillText('canvasX: ' + canvasX + ' canvasY:' + canvasY, 10, 30)
-      this.context.fillText('walls: ' + this.player.walls.length, 10, 40)
+      this.context.fillText('walls: ' + player.walls.length, 10, 40)
     },
     mouseEvent (event) {
       var rect = this.canvas.getBoundingClientRect()
@@ -141,17 +141,19 @@ export default {
       this.player.targetAngle = Math.atan2(dy, dx)
       send({ message: this.player, type: 'update' })
     },
-    updatePlayer () {
+    updatePlayer (player) {
+      /*
       this.player.lastWall++
       if (this.player.lastWall > this.settings.wallUpdate) {
         this.player.walls.push({ x: this.player.x, y: this.player.y })
         this.player.lastWall = 0
       }
+      */
 
-      this.player.x += this.settings.playerSpeed * Math.cos(this.player.angle)
-      this.player.y += this.settings.playerSpeed * Math.sin(this.player.angle)
+      player.x += this.settings.playerSpeed * Math.cos(player.angle)
+      player.y += this.settings.playerSpeed * Math.sin(player.angle)
 
-      this.player.angle = this.player.targetAngle
+      player.angle = player.targetAngle
       // angle lag
       /*
       if (this.player.targetAngle !== this.player.angle) {