make independet volume for sfx

Author: ZeroDragon

engine/game.js

@@ -2,7 +2,7 @@
 const ctxSight = document.getElementById('sight').getContext('2d')
 
 // eslint-disable-next-line no-unused-vars
-const [drawCollitions, noShadows] = [false, false]
+const [drawCollitions, noShadows, noSounds] = [true, true, true]
 // eslint-disable-next-line no-unused-vars
 const game = {
   objects: {},
@@ -13,10 +13,13 @@ const game = {
   ticker () {
     if (this.stepValue === 10) this.stepValue = 0
     this.stepValue += 1
-    const stepSound = ['F2', 'C2'][this.stepValue % 2]
-    playNote(createSoundMap([stepSound], [400]))
+    if (!noSounds) {
+      const stepSound = ['F2', 'C2'][this.stepValue % 2]
+      playNote(createSoundMap([stepSound], [400]))
+    }
     if (this.timer) clearInterval(this.timer)
     Vigilance.ctx.clearRect(0, 0, 512, 512)
+    Vigilance.ctxSight.clearRect(0, 0, 512, 512)
     Vigilance.instances
       .filter(vg => vg.props.start)
       .forEach(vg => {
@@ -156,14 +159,14 @@ const game = {
       }
     }
 
-    Vigilance.ctx.beginPath()
+    Vigilance.ctxSight.beginPath()
     sombra.forEach((val, index) => {
       if (val === 0) return
-      Vigilance.ctx.rect((index % 32) * 16, Math.floor(index / 32) * 16, 16, 16)
+      Vigilance.ctxSight.rect((index % 32) * 16, Math.floor(index / 32) * 16, 16, 16)
     })
-    Vigilance.ctx.fillStyle = `${this.palette[11]}66`
-    Vigilance.ctx.fill()
-    Vigilance.ctx.closePath()
+    Vigilance.ctxSight.fillStyle = `${this.palette[11]}66`
+    Vigilance.ctxSight.fill()
+    Vigilance.ctxSight.closePath()
   },
   setSight () {
     if (noShadows) return

engine/objects.js

@@ -152,6 +152,7 @@ class Obj {
       this.combination = [
         ...new Array(Math.round(Math.random() * 5) + 5)
       ].map(_ => Math.round(Math.random() * 5) + 1)
+      this.combination[0] = Math.max(2, this.combination[0])
     }
     if (this.combinationStep === 0) {
       this.combinationStep += 1
@@ -173,21 +174,21 @@ class Obj {
     } else {
       this.combinationFailed = true
       this.combinationSuccess = false
-      playNote(createSoundMap(['G4'], [60]))
+      playNote(createSoundMap(['E4', '', 'A3'], [60, 200, 250]), 0.4)
       return
     }
 
     if (this.combination[this.combinationStep] - this.combinationTicks === 0) {
       this.combinationStep += 1
       this.combinationTicks = 0
-      if (this.combination[this.combinationStep]) playNote(createSoundMap(['A3'], [60]))
+      if (this.combination[this.combinationStep]) playNote(createSoundMap(['A3'], [60]), 0.4)
     } else {
-      playNote(createSoundMap(['A2'], [60]))
+      playNote(createSoundMap(['A2'], [60]), 0.4)
     }
 
     if (!this.combination[this.combinationStep]) {
       this.combinationSuccess = true
-      playNote(createSoundMap(['G5', ' ', 'A5'], [50, 50, 50]))
+      playNote(createSoundMap(['G5', ' ', 'A5'], [50, 50, 50]), 0.4)
     }
   }
 }

engine/sfx.js

@@ -109,13 +109,13 @@ const tableOfFreq = {
   B8: 7902.13
 }
 const audioCtx = new (window.AudioContext || window.webkitAudioContext || window.audioContext)()
-const beep = (duration, frequency, type = 'triangle') => {
+const beep = (duration, frequency, type = 'triangle', volume) => {
   const noteLength = duration / 1000
   const oscillator = audioCtx.createOscillator()
   const gainNode = audioCtx.createGain()
   gainNode.connect(audioCtx.destination)
   const attackTime = 0.01
-  const sustainLevel = 0.1
+  const sustainLevel = volume
   const releaseTime = 0.4
   gainNode.gain.setValueAtTime(0, 0)
   gainNode.gain.linearRampToValueAtTime(sustainLevel, audioCtx.currentTime + noteLength * attackTime)
@@ -129,10 +129,10 @@ const beep = (duration, frequency, type = 'triangle') => {
 }
 
 // eslint-disable-next-line no-unused-vars
-const playNote = ([note, ...notes]) => {
+const playNote = ([note, ...notes], volume = 0.1) => {
   if (!note) return
   const [duration, frequency] = note
-  beep(duration, frequency)
+  beep(duration, frequency, 'triangle', volume)
   const timer = setTimeout(() => {
     clearTimeout(timer)
     playNote(notes)

engine/user.js

@@ -106,8 +106,8 @@ const setPalette = tileset => {
 }
 
 const preload = level => {
-  // Player.create(ctxPlayer1, 280, 160, true)
-  Player.create(ctxPlayer1, -8, 0, true)
+  Player.create(ctxPlayer1, 280, 160, true)
+  // Player.create(ctxPlayer1, -8, 0, true)
   Player.create(ctxPlayer2, -8, 32)
   fetch(`${level}/map.json`)
     .then(response => response.json())
@@ -149,7 +149,7 @@ const preload = level => {
               )
             })
           })
-        // game.ticker()
+        // game.ticker() // inicia animaciones
       }
       tileset.src = `${level}/${tileSource.value}`
     })

engine/vigilance.js

@@ -10,6 +10,7 @@ class Vigilance {
   }
 
   static ctx = document.getElementById('vigilance').getContext('2d')
+  static ctxSight = document.getElementById('light').getContext('2d')
 
   static getCamera (id) {
     return Vigilance.instances.find(itm => itm.id === id)
@@ -82,6 +83,7 @@ class Vigilance {
     if (next.x === this.position.x && next.y === this.position.y) {
       this.id = next.id
     }
+    this.step = !this.step
     this.draw()
   }
 

index.html

@@ -117,9 +117,10 @@
   <body>
     <section class="gameHolder">
       <canvas id="background" width="512px" height="512px"></canvas>
-      <canvas id="vigilance" width="512px" height="512px"></canvas>
+      <canvas id="light" width="512px" height="512px"></canvas>
       <canvas id="walls" width="512px" height="512px"></canvas>
       <canvas id="objects" width="512px" height="512px"></canvas>
+      <canvas id="vigilance" width="512px" height="512px"></canvas>
       <canvas id="player1" width="512px" height="512px"></canvas>
       <canvas id="player2" width="512px" height="512px"></canvas>
       <canvas id="overlayer" width="512px" height="512px"></canvas>

levels/0001/0001.tiled-session

@@ -25,7 +25,7 @@
                 13
             ],
             "scale": 1.38974609375,
-            "selectedLayer": 8,
+            "selectedLayer": 9,
             "viewCenter": {
                 "x": 233.13611130630312,
                 "y": 225.22099641627435
@@ -53,8 +53,8 @@
     "project": "0001.tiled-project",
     "property.type": "bool",
     "recentFiles": [
-        "map.json",
         "map.tmx",
+        "map.json",
         "paleta.tsx"
     ],
     "tileset.lastUsedFormat": "tsx",