Sound & collision fix, wall render 2

client/src/components/Game.vue

@@ -101,9 +101,12 @@ export default {
         }
 
         if (player.state === 'DEAD') this.context.globalAlpha = 0.1
-        render.walls(this.context, this.canvas, this.camera, this.settings, player)
+
+        render.wallsBezier(this.context, this.canvas, this.camera, this.settings, player)
+
         if (player.name === 'e' || player.name === 'q' || player.name === 'r' || player.name === 't') render.playerFace(this.context, this.canvas, this.camera, this.settings, player, player.name)
         else render.player(this.context, this.canvas, this.camera, this.settings, player)
+
         if (player.state === 'DEAD') this.context.globalAlpha = 1
 
         this.stats.totalWalls += player.walls.length

client/src/game/render.js

@@ -64,6 +64,40 @@ export const render = {
     context.lineTo(canvas.width / 2 + player.x - camera.x, canvas.height / 2 + player.y - camera.y)
     context.stroke()
   },
+  wallsBezier (context, canvas, camera, settings, player) {
+    if (player.walls.length === 0) return
+
+    context.beginPath()
+    context.lineWidth = settings.wallSize
+    context.strokeStyle = player.color
+
+    var canvasX1, canvasY1, canvasX2, canvasY2
+
+    canvasX1 = canvas.width / 2 + player.walls[0].x - camera.x
+    canvasY1 = canvas.height / 2 + player.walls[0].y - camera.y
+
+    context.moveTo(canvasX1, canvasY1)
+
+    for (var i = 1; i < player.walls.length - 1; i++) {
+      canvasX1 = canvas.width / 2 + player.walls[i].x - camera.x
+      canvasY1 = canvas.height / 2 + player.walls[i].y - camera.y
+
+      canvasX2 = canvas.width / 2 + player.walls[i + 1].x - camera.x
+      canvasY2 = canvas.height / 2 + player.walls[i + 1].y - camera.y
+
+      context.quadraticCurveTo(canvasX1, canvasY1, canvasX2, canvasY2)
+    }
+
+    canvasX1 = canvas.width / 2 + player.walls[player.walls.length - 1].x - camera.x
+    canvasY1 = canvas.height / 2 + player.walls[player.walls.length - 1].y - camera.y
+
+    canvasX2 = canvas.width / 2 + player.x - camera.x
+    canvasY2 = canvas.height / 2 + player.y - camera.y
+
+    context.quadraticCurveTo(canvasX1, canvasY1, canvasX2, canvasY2)
+
+    context.stroke()
+  },
   debug (context, camera, mouse, canvas, stats) {
     const canvasX = canvas.width / 2
     const canvasY = canvas.height / 2

client/src/game/sound.js

@@ -1,29 +1,27 @@
 const music1 = new Audio(require('@/assets/sound/revengeOfCats.mp3'))
 const music2 = new Audio(require('@/assets/sound/1992.mp3'))
-const music3 = new Audio()
 // const motor = new Audio(require('@/assets/sound/motor.mp3'))
 const explosion = new Audio(require('@/assets/sound/explosion.mp3'))
 const taunt = new Audio(require('@/assets/sound/tmauvais.mp3'))
 
+taunt.volume = 0.2
+explosion.volume = 0.2
+
+music1.loop = true
+music1.volume = 0.2
+music2.loop = true
+music2.volume = 0.2
+
 export const sound = {
   startBackgroundMusic (n) {
-    music1.loop = true
-    music1.volume = 0.5
-    music2.loop = true
-    music2.volume = 0.5
-    music3.loop = true
-    music3.volume = 0.5
-
     switch (n) {
       case '1': music1.play(); break
       case '2': music2.play(); break
-      case '3': music3.play(); break
     }
   },
   stopBackgroundMusic () {
     music1.pause()
     music2.pause()
-    music3.pause()
   },
   explosion () {
     if (Math.floor(Math.random() * Math.floor(10)) === 0) taunt.play()