wip custom levels

s

src/index.html

@@ -29,7 +29,7 @@
             <div class="title-back-container">
                 <span class="title-back" id="title-back"></span>
             </div>
-            
+
             <div class="level-select" id="menuContainer">
                 <template id="menuItem">
                     <button class="level-item">
@@ -44,6 +44,9 @@
                     </button>
                 </template>
             </div>
+            
+            <div class="level-select" id="menuContainerBonus">
+            </div>
         </div>
 
         <div class="page custom-level" id="custom-level" style="display: none;">

src/scripts/game.js

@@ -1,4 +1,3 @@
-import { levelList } from "./levelList.js"
 import Player from "./player.js"
 import { Bullet, Meteor, Turret } from "./gameObjects.js"
 import { Renderer } from "./renderer.js"
@@ -11,7 +10,6 @@ export default class Game {
     this.canvas = document.getElementById("mainCanvas")
     this.renderer = new Renderer(this.canvas)
     this.player = new Player()
-    this.levelList = levelList
     this.currentLevel;
     this.nextTurretToFire = 0
     this.turretFire = false
@@ -28,7 +26,7 @@ export default class Game {
       heavy: 100
     }
 
-    SoundEffect.setVolumeAll(0.3)
+    SoundEffect.setVolumeAll(0.15)
 
     document.addEventListener("keydown", (event) => {
       switch(event.key) {

src/scripts/index.js

@@ -1,7 +1,7 @@
 import Game from './game.js'
 import { Router } from './router.js'
 import { preloadEveryThing } from './preloader.js'
-import { mainMenuLevel } from './levelList.js'
+import { levelList, bonusLevelList, mainMenuLevel } from './levelList.js'
 
 const router = new Router()
 const titleBack = document.getElementById("title-back")
@@ -68,8 +68,9 @@ async function loadMenu() {
   const itemCustomTemplate = document.getElementById("menuItemCustom");
 
   const menuContainer = document.getElementById("menuContainer");
+  const menuContainerBonus = document.getElementById("menuContainerBonus");
 
-  for (const level of game.levelList) {
+  for (const level of levelList) {
     const menuItem = document.importNode(itemTemplate.content, true)
     
     menuItem.querySelector("img").src = level.bossPath
@@ -79,9 +80,19 @@ async function loadMenu() {
     menuContainer.appendChild(menuItem)
   }
 
+  for (const level of bonusLevelList) {
+    const menuItem = document.importNode(itemTemplate.content, true)
+    
+    menuItem.querySelector("img").src = level.bossPath
+    menuItem.querySelector("p").textContent = level.title
+    menuItem.querySelector("button").addEventListener("click", () => loadLevel(level))
+
+    menuContainerBonus.appendChild(menuItem)
+  }
+
   const customItem = document.importNode(itemCustomTemplate.content, true)
   customItem.querySelector("button").addEventListener("click", () => router.showPage("customLevel"))
-  menuContainer.appendChild(customItem)
+  menuContainerBonus.appendChild(customItem)
 
   game.setGameCanvas(false)
   await game.loadMainMenu(mainMenuLevel)

src/scripts/levelList.js

@@ -6,13 +6,19 @@ import { Level } from "./level.js"
 // 400, 200 high
 
 const levelList = [
-  new Level('Great Master', 'Bearer of the thousands', 20, 0.65, 0, 40,'assets/music/The Scene Is Dead (MASTER BOOT RECORD Remix).ogg', 'assets/img/meteors/diploma.webp', 'assets/img/boss/r4.webp'),
+  new Level('1', 'Final attack', 10, 0.77, 150, 40, 'assets/music/Full Force Forward.ogg', null, 'assets/img/meteors/meteor.webp'),
-  new Level('High Tech', 'Comin from above', 20, 0.65, 150, 40,'assets/music/ABIS & Signal & Tasha Baxter - The Wall (Buunshin Remix).ogg', 'assets/img/meteors/plane_A.webp', 'assets/img/boss/e4.webp'),
+  new Level('2', 'Final attack', 20, 0.8, 0, 10, 'assets/music/Razormind.ogg', null, 'assets/img/meteors/meteor.webp'),
+  new Level('3', 'Final attack', 30, 0.8, 0, 10, 'assets/music/The Gauntlet.ogg', null, 'assets/img/meteors/meteor.webp'),
+  new Level('The End', 'Final attack', 40, 0.65, 90, 40, 'assets/music/The City Must Survive.ogg', null, 'assets/img/meteors/meteor.webp'),
+]
+
+const bonusLevelList = [
   new Level('Richard', '', 25, 0.75, 150, 40, 'assets/music/El Tigr3 - Black Star.ogg', null, 'assets/img/boss/richard.webp'),
   new Level('V', '', 30, 0.7, 150, 40, 'assets/music/The Only Thing They Fear is V.ogg', null, 'assets/img/boss/samurai.webp'),
-  new Level('The End', 'Final attack', 40, 0.7, 90, 40, 'assets/music/The City Must Survive.ogg', null, 'assets/img/meteors/meteor.webp'),
+  new Level('Great Master', 'Bearer of the thousands', 20, 0.65, 0, 40,'assets/music/The Scene Is Dead (MASTER BOOT RECORD Remix).ogg', 'assets/img/meteors/diploma.webp', 'assets/img/boss/r4.webp'),
+  new Level('High Tech', 'Comin from above', 20, 0.65, 150, 40,'assets/music/ABIS & Signal & Tasha Baxter - The Wall (Buunshin Remix).ogg', 'assets/img/meteors/plane_A.webp', 'assets/img/boss/e4.webp'),
 ]
 
 const mainMenuLevel = new Level('MainMenu', '', 1, 0.95, 150, 40, 'assets/music/nightcall_8bit.ogg', null, 'assets/img/meteors/meteor.webp')
 
-export { levelList, mainMenuLevel }
+export { levelList, bonusLevelList, mainMenuLevel }

src/scripts/preloader.js

@@ -1,4 +1,4 @@
-import { levelList, mainMenuLevel } from "./levelList.js"
+import { levelList, bonusLevelList, mainMenuLevel } from "./levelList.js"
 
 function preloadImage(path) {
   return new Promise(resolve => {
@@ -17,6 +17,11 @@ async function preloadEveryThing() {
     await level.loadLevel()
     console.log('Preloaded level:', level.title)
   }
+
+  for (const level of bonusLevelList) {
+    await level.loadLevel()
+    console.log('Preloaded bonus level:', level.title)
+  }
   await mainMenuLevel.loadLevel()
   console.log('Preloaded everything')
 }