+ 
+
+
+
diff --git a/src/scripts/game.js b/src/scripts/game.js
index 7680d70..2961c00 100644
--- a/src/scripts/game.js
+++ b/src/scripts/game.js
@@ -3,7 +3,7 @@ import Player from "./player.js"
import { Bullet, Meteor, Turret } from "./gameObjects.js"
import { Renderer } from "./renderer.js"
import { setFastTurret, setHeavyTurret, setLaserTurret, setStandardTurret } from "./turretTypes.js"
-import SoundEffect from "./soundEffect.js"
+import { SoundEffect } from "./soundEffect.js"
export default class Game {
@@ -28,7 +28,7 @@ export default class Game {
heavy: 100
}
- SoundEffect.setEffectVolume(0.3)
+ SoundEffect.setVolumeAll(0.3)
document.addEventListener("keydown", (event) => {
switch(event.key) {
@@ -85,12 +85,6 @@ export default class Game {
this.canvas.addEventListener("mouseup", () => this.setTurretFire(false))
this.canvas.addEventListener("dblclick", () => this.setTurretFire(!this.turretFire))
- const volumeInput = document.getElementById("volume")
- volumeInput.addEventListener("change", () => {
- console.log('volume', volumeInput.value)
- this.player.gain.gain.value = volumeInput.value / 10
- })
-
this.setGameOver()
this.player.audio.addEventListener('ended', () => {
this.setGameOver(true)
@@ -172,10 +166,6 @@ export default class Game {
setTurretFire(fire) {
this.turretFire = fire
this.renderer.turrets.forEach((turret) => turret.animationRunning = fire)
-
- // if (!fire) {
- // SoundEffect.play(SoundEffect.turretRelease)
- // }
}
setAmmoCounter() {
@@ -201,16 +191,14 @@ export default class Game {
const deltaLastShot = performance.now() - turret.lastShot
if (deltaLastShot > turret.firingRate) {
const angle = turret.angle - ((Math.floor(Math.random() * turret.spread) / 1000) * (Math.random() < 0.5 ? -1 : 1))
- this.renderer.bullets.push(new Bullet(turret.x , turret.y, angle, turret.bulletSprite, turret.damage))
+ this.renderer.bullets.push(new Bullet(turret.x , turret.y, angle, turret.bulletSprite, turret.damage, turret.aoe, turret.aoeSize, turret.percing, turret.bulletHealth))
turret.lastShot = performance.now()
- // SoundEffect.play(turret.sound)
}
this.nextTurretToFire = this.nextTurretToFire < this.renderer.turrets.length - 1 ? this.nextTurretToFire + 1 : 0
}
spawnMeteor() {
- // meteors[Math.floor(Math.random() * this.meteors.length)]
this.renderer.meteors.push(new Meteor(this.canvas.width, this.canvas.height, this.currentLevel.maxHealth, this.currentLevel.meteorImg, this.currentLevel.meteorImgList))
}
@@ -225,7 +213,7 @@ export default class Game {
const damageTaken = this.renderer.render()
if (damageTaken > 0 && this.currentLevel.title !== "MainMenu") {
- SoundEffect.play(SoundEffect.explosionBig)
+ SoundEffect.explosionBig.play()
this.health -= damageTaken
}
@@ -234,19 +222,13 @@ export default class Game {
// Slow updates
if ((now - this.lastSlowUpdate) > 1000) {
- console.log('SLOW')
if (this.turretFire) {
- console.log('SET AMMO', this.ammoCurrent, this.ammo)
- this.ammo.laser += this.ammo.laser < 100 ? 5 : 0
- this.ammo.fast += this.ammo.fast < 100 ? 5 : 0
- this.ammo.standard += this.ammo.standard < 100 ? 5 : 0
- this.ammo.heavy += this.ammo.heavy < 100 ? 5 : 0
+ this.ammo.laser = this.ammo.laser + 1 < 100 ? this.ammo.laser + 1 : 100
+ this.ammo.fast = this.ammo.fast + 5 < 100 ? this.ammo.fast + 5 : 100
+ this.ammo.standard = this.ammo.standard + 2 < 100 ? this.ammo.standard + 5 : 100
+ this.ammo.heavy = this.ammo.heavy + 0.5 < 100 ? this.ammo.heavy + 2 : 100
- this.ammo[this.ammoCurrent] -= 6
-
- if (this.ammo[this.ammoCurrent] <= 0) {
- this.ammo[this.ammoCurrent] = 0
- }
+ this.ammo[this.ammoCurrent] = this.ammo[this.ammoCurrent] - 5 > 0 ? this.ammo[this.ammoCurrent] - 5 : 0
this.setAmmoCounter()
}
diff --git a/src/scripts/gameObjects.js b/src/scripts/gameObjects.js
index 052a923..a87ff50 100644
--- a/src/scripts/gameObjects.js
+++ b/src/scripts/gameObjects.js
@@ -8,7 +8,6 @@ export class GameObject {
speed = 0
angle = 0
health = 0
- spriteImg = new Image()
isAnimated = false
removeAfterAnimation = false
animationRunning = false
@@ -31,11 +30,14 @@ export class GameObject {
}
// Crude collision box
- collideWith(gameObject) {
- const x = this.x - this.sizeX
- const y = this.y - this.sizeY
- const a = x + this.sizeX * 2
- const b = y + this.sizeY * 2
+ collideWith(gameObject, customSizeX, customSizeY) {
+ const sizeX = customSizeX ? customSizeX : this.sizeX
+ const sizeY = customSizeY ? customSizeY : this.sizeY
+
+ const x = this.x - sizeX
+ const y = this.y - sizeY
+ const a = x + sizeX * 2
+ const b = y + sizeY * 2
const x1 = gameObject.x - gameObject.sizeX
const y1 = gameObject.y - gameObject.sizeY
@@ -90,7 +92,7 @@ export class Meteor extends GameObject {
}
export class Bullet extends GameObject {
- constructor(x, y, angle, bulletSprite, damage) {
+ constructor(x, y, angle, bulletSprite, damage, aoe, aoeSize, percing, health) {
super()
this.x = x
this.y = y
@@ -101,8 +103,11 @@ export class Bullet extends GameObject {
this.spriteImg= bulletSprite
this.speed = 1
this.angle = angle
- this.health = 1
+ this.health = health
this.damage = damage
+ this.percing = percing
+ this.aoe = aoe
+ this.aoeSize = aoeSize
this.isAnimated = false
this.removeAfterAnimation = false
this.animationRunning = false
@@ -112,14 +117,14 @@ export class Bullet extends GameObject {
}
export class Explosion extends GameObject {
- constructor(x, y, explosionSprite) {
+ constructor(x, y, explosionSprite, size = 30) {
super()
this.x = x
this.y = y
- this.sizeX = 50
- this.sizeY = 50
- this.heightX = 256
- this.heightY = 256
+ this.sizeX = size
+ this.sizeY = size
+ this.heightX = 128
+ this.heightY = 128
this.spriteImg= explosionSprite
this.isAnimated = true
this.removeAfterAnimation = true
diff --git a/src/scripts/index.js b/src/scripts/index.js
index 35aa1d1..bb47897 100644
--- a/src/scripts/index.js
+++ b/src/scripts/index.js
@@ -6,14 +6,26 @@ import { mainMenuLevel } from './levelList.js'
const router = new Router()
const titleBack = document.getElementById("title-back")
let game
+let globalVolume = 0.5
document.addEventListener('DOMContentLoaded', async () => {
await preloadEveryThing()
- init()
+ router.showPage("start")
+ document.getElementById("start-button").addEventListener("click", () => init())
+ const volumeInput = document.getElementById("volume")
+ volumeInput.addEventListener("input", () => {
+ const volume = volumeInput.value / 100
+ globalVolume = volume
+ if (game) {
+ game.player.gain.gain.value = volume
+ }
+ SoundEffect.setVolumeAll(volume / 4)
+ })
})
async function init() {
game = new Game()
+ game.player.gain.gain.value = globalVolume
router.showPage("mainMenu")
await loadMenu()
mainRenderLoop()
diff --git a/src/scripts/level.js b/src/scripts/level.js
index 54baca4..a7e5054 100644
--- a/src/scripts/level.js
+++ b/src/scripts/level.js
@@ -19,10 +19,10 @@ export class Level {
console.log('load custom meteor', this.meteorImg)
} else {
this.meteorImgList = []
- this.meteorImgList.push(await preloadImage("assets/img/meteors/meteor.png"))
- this.meteorImgList.push(await preloadImage("assets/img/meteors/meteor_2.png"))
- this.meteorImgList.push(await preloadImage("assets/img/meteors/meteor_3.png"))
- this.meteorImgList.push(await preloadImage("assets/img/meteors/meteor_4.png"))
+ this.meteorImgList.push(await preloadImage("assets/img/meteors/meteor.webp"))
+ this.meteorImgList.push(await preloadImage("assets/img/meteors/meteor_2.webp"))
+ this.meteorImgList.push(await preloadImage("assets/img/meteors/meteor_3.webp"))
+ this.meteorImgList.push(await preloadImage("assets/img/meteors/meteor_4.webp"))
console.log('load meteor list', this.meteorImgList)
}
diff --git a/src/scripts/levelList.js b/src/scripts/levelList.js
index ac9c463..abbf5f1 100644
--- a/src/scripts/levelList.js
+++ b/src/scripts/levelList.js
@@ -6,13 +6,13 @@ 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).mp3', 'assets/img/meteors/diploma.png', 'assets/img/boss/r4.png'),
- new Level('High Tech', 'Comin from above', 20, 0.65, 150, 40,'assets/music/ABIS & Signal & Tasha Baxter - The Wall (Buunshin Remix).flac', 'assets/img/meteors/plane_A.png', 'assets/img/boss/e4.png'),
- new Level('Richard', '', 25, 0.75, 150, 40, 'assets/music/El Tigr3 - Black Star.flac', null, 'assets/img/boss/richard.png'),
- new Level('V', '', 30, 0.75, 150, 40, 'assets/music/The Only Thing They Fear is V.flac', null, 'assets/img/boss/samurai.png'),
- new Level('The End', 'Final attack', 40, 0.75, 90, 40, 'assets/music/The City Must Survive.flac', null, 'assets/img/meteors/meteor.png'),
+ 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'),
+ 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'),
]
-const mainMenuLevel = new Level('MainMenu', '', 1, 0.95, 150, 40, 'assets/music/nightcall_8bit.mp3', null, 'assets/img/meteors/meteor.png')
+const mainMenuLevel = new Level('MainMenu', '', 1, 0.95, 150, 40, 'assets/music/nightcall_8bit.ogg', null, 'assets/img/meteors/meteor.webp')
export { levelList, mainMenuLevel }
\ No newline at end of file
diff --git a/src/scripts/renderer.js b/src/scripts/renderer.js
index 0cb006b..50c23a8 100644
--- a/src/scripts/renderer.js
+++ b/src/scripts/renderer.js
@@ -1,6 +1,6 @@
import { Explosion } from "./gameObjects.js"
import { preloadImage } from "./preloader.js"
-import SoundEffect from "./soundEffect.js"
+import { SoundEffect } from "./soundEffect.js"
export class Renderer {
constructor(canvas, backgroundColor) {
@@ -24,7 +24,7 @@ export class Renderer {
}
async loadSprites() {
- this.explosionImg = await preloadImage("assets/img/effects/explosion.png")
+ this.explosionImg = await preloadImage("assets/img/effects/explosion.webp")
}
renderGameObjectSimple(gameObject) {
@@ -117,6 +117,12 @@ export class Renderer {
this.context.strokeRect(gameObject.x - gameObject.sizeX, gameObject.y - gameObject.sizeY, gameObject.sizeX * 2, gameObject.sizeY * 2)
}
+ destroyMeteor(meteor, i) {
+ SoundEffect.explosion.play()
+ this.effects.push(new Explosion(meteor.x, meteor.y, this.explosionImg))
+ this.meteors.splice(i, 1)
+ }
+
renderMeteorLoop(deltaTime) {
let damageTaken = 0
for (let i = this.meteors.length - 1; i >= 0; i--) {
@@ -130,10 +136,8 @@ export class Renderer {
} else if(meteor.x < 0 || meteor.x > this.canvas.width) {
this.meteors.splice(i, 1)
} else if (meteor.health <= 0) {
- SoundEffect.play(SoundEffect.explosion)
- this.effects.push(new Explosion(meteor.x, meteor.y, this.explosionImg))
- this.meteors.splice(i, 1)
- } else if (this.renderGameObject(meteor)) {
+ this.destroyMeteor(meteor)
+ } else if (this.renderGameObject(meteor, i)) {
this.meteors.splice(i, 1)
}
}
@@ -154,17 +158,41 @@ export class Renderer {
this.bullets.splice(i, 1)
} else {
+ let bulletDestroyed = false
for (let j = this.meteors.length - 1; j >= 0; j--) {
const meteor = this.meteors[j]
collision = bullet.collideWith(meteor)
if (collision) {
- this.bullets.splice(i, 1)
+ bullet.health--
meteor.health -= bullet.damage
- break;
+ this.effects.push(new Explosion(bullet.x, bullet.y, this.explosionImg, bullet.aoeSize * 2))
+
+ if (meteor.health <= 0) {
+ this.destroyMeteor(meteor, j)
+ }
+
+ if (!bullet.percing || bullet.health <= 0) {
+ bulletDestroyed = true
+ this.bullets.splice(i, 1)
+ break
+ }
}
}
- if (!collision) {
+ if (bullet.aoe && collision) {
+ for (let j = this.meteors.length - 1; j >= 0; j--) {
+ const meteor = this.meteors[j]
+ if (bullet.collideWith(meteor, bullet.aoeSize, bullet.aoeSize)) {
+ meteor.health -= bullet.damage
+
+ if (meteor.health <= 0) {
+ this.destroyMeteor(meteor, j)
+ }
+ }
+ }
+ }
+
+ if (!bulletDestroyed) {
this.renderGameObject(bullet)
}
}
diff --git a/src/scripts/router.js b/src/scripts/router.js
index dde76c0..abace46 100644
--- a/src/scripts/router.js
+++ b/src/scripts/router.js
@@ -1,6 +1,7 @@
export class Router {
currentPage = "none"
+ start = document.getElementById("start")
mainMenu = document.getElementById("main-menu")
customLevel = document.getElementById("custom-level")
loading = document.getElementById("loading")
@@ -8,6 +9,7 @@ export class Router {
gameOver = document.getElementById("game-over")
hideEverything() {
+ this.start.style.display = "none"
this.mainMenu.style.display = "none"
this.customLevel.style.display = "none"
this.loading.style.display = "none"
diff --git a/src/scripts/soundEffect.js b/src/scripts/soundEffect.js
index e00f96c..2cb9c1b 100644
--- a/src/scripts/soundEffect.js
+++ b/src/scripts/soundEffect.js
@@ -1,31 +1,48 @@
-export default class SoundEffect {
- static turretLaser = new Audio("assets/sounds/turret_laser.mp3")
- static turretFast = new Audio("assets/sounds/turret_fast.mp3")
- static turretStandard = new Audio("assets/sounds/turret_standard.mp3")
- static turretHeavy = new Audio("assets/sounds/turret_heavy.flac")
- static explosion = new Audio("assets/sounds/explosion.mp3")
- static explosionBig = new Audio("assets/sounds/explosion_big.mp3")
- static turretRelease = new Audio("assets/sounds/turret_release.wav")
+export class SoundContainer {
+
+ constructor(soundPath) {
+ this.lastInstance = 0
+ this.soundInstances = [
+ new Audio(soundPath),
+ new Audio(soundPath),
+ new Audio(soundPath),
+ new Audio(soundPath),
+ new Audio(soundPath),
+ new Audio(soundPath),
+ ]
+ }
+
+ async play() {
+ return new Promise((resolve) => {
+ this.lastInstance = this.lastInstance + 1 >= this.soundInstances.length ? 0 : this.lastInstance + 1
+ this.soundInstances[this.lastInstance].play()
+ resolve()
+ })
+ }
+
+ stop() {
+ this.soundInstances.forEach((sound) => sound.currentTime = 0)
+ }
+
+ setVolume(volume) {
+ this.soundInstances.forEach((sound) => sound.volume = volume)
+ }
+}
+
+export class SoundEffect {
+ static explosion = new SoundContainer("assets/sounds/explosion3.ogg")
+ static explosionBig = new SoundContainer("assets/sounds/explosion_big.ogg")
static soundList = [
- SoundEffect.turretLaser,
- SoundEffect.turretFast,
- SoundEffect.turretStandard,
- SoundEffect.turretHeavy,
SoundEffect.explosion,
- SoundEffect.explosionBig,
- SoundEffect.turretRelease
+ SoundEffect.explosionBig
]
- static setEffectVolume(volume) {
- SoundEffect.soundList.forEach((sound) => sound.volume = volume)
+ static setVolumeAll(volume) {
+ SoundEffect.soundList.forEach((sound) => sound.setVolume(volume))
}
static stopAll() {
- SoundEffect.soundList.forEach((sound) => sound.pause())
- }
-
- static play(audio) {
- audio.paused ? audio.play() : audio.currentTime = 0
+ SoundEffect.soundList.forEach((sound) => sound.stop())
}
}
\ No newline at end of file
diff --git a/src/scripts/turretTypes.js b/src/scripts/turretTypes.js
index 800e9a5..1c2aef9 100644
--- a/src/scripts/turretTypes.js
+++ b/src/scripts/turretTypes.js
@@ -1,68 +1,79 @@
import { preloadImage } from "./preloader.js"
-import SoundEffect from "./soundEffect.js"
async function setStandardTurret(turret) {
- turret.spriteImg= await preloadImage("assets/img/turrets/turret_standard.png")
- turret.bulletSprite = await preloadImage("assets/img/turrets/bullet_standard.png")
- turret.firingRate = 100
+ turret.spriteImg= await preloadImage("assets/img/turrets/turret_standard.webp")
+ turret.bulletSprite = await preloadImage("assets/img/turrets/bullet_standard.webp")
+ turret.firingRate = 150
turret.lastShot = 0
turret.spread = 100
- turret.damage = 20
+ turret.damage = 5
+ turret.percing = true
+ turret.aoe = false
+ turret.aoeSize = 20
+ turret.bulletHealth = 3
turret.isAnimated = true
turret.removeAfterAnimation = false
turret.animationRunning = false
turret.frames = 8
turret.heightX = 256
turret.heightY = 256
- turret.sound = SoundEffect.turretStandard
}
async function setFastTurret(turret) {
- turret.spriteImg= await preloadImage("assets/img/turrets/turret_fast.png")
- turret.bulletSprite = await preloadImage("assets/img/turrets/bullet_fast.png")
+ turret.spriteImg= await preloadImage("assets/img/turrets/turret_fast.webp")
+ turret.bulletSprite = await preloadImage("assets/img/turrets/bullet_fast.webp")
turret.firingRate = 20
turret.lastShot = 0
turret.spread = 200
- turret.damage = 10
+ turret.damage = 5
+ turret.aoe = false
+ turret.percing = false
+ turret.aoeSize = 10
+ turret.bulletHealth = 1
turret.isAnimated = true
turret.removeAfterAnimation = false
turret.animationRunning = false
turret.frames = 8
turret.heightX = 256
turret.heightY = 256
- turret.sound = SoundEffect.turretFast
}
async function setHeavyTurret(turret) {
- turret.spriteImg= await preloadImage("assets/img/turrets/turret_heavy.png")
- turret.bulletSprite = await preloadImage("assets/img/turrets/bullet_heavy.png")
- turret.firingRate = 200
+ turret.spriteImg= await preloadImage("assets/img/turrets/turret_heavy.webp")
+ turret.bulletSprite = await preloadImage("assets/img/turrets/bullet_heavy.webp")
+ turret.firingRate = 400
turret.lastShot = 0
turret.spread = 50
- turret.damage = 30
+ turret.damage = 10
+ turret.aoe = true
+ turret.percing = false
+ turret.aoeSize = 50
+ turret.bulletHealth = 1
turret.isAnimated = true
turret.removeAfterAnimation = false
turret.animationRunning = false
turret.frames = 16
turret.heightX = 256
turret.heightY = 256
- turret.sound = SoundEffect.turretHeavy
}
async function setLaserTurret(turret) {
- turret.spriteImg= await preloadImage("assets/img/turrets/turret_laser.png")
- turret.bulletSprite = await preloadImage("assets/img/turrets/bullet_laser.png")
- turret.firingRate = 0
+ turret.spriteImg= await preloadImage("assets/img/turrets/turret_laser.webp")
+ turret.bulletSprite = await preloadImage("assets/img/turrets/bullet_laser.webp")
+ turret.firingRate = 1000
turret.lastShot = 0
turret.spread = 10
- turret.damage = 2
+ turret.damage = 100
+ turret.aoe = true
+ turret.percing = true
+ turret.aoeSize = 20
+ turret.bulletHealth = 10000
turret.isAnimated = true
turret.removeAfterAnimation = false
turret.animationRunning = false
turret.frames = 8
turret.heightX = 256
turret.heightY = 256
- turret.sound = SoundEffect.turretLaser
}
export { setStandardTurret, setFastTurret, setHeavyTurret, setLaserTurret }
\ No newline at end of file
diff --git a/src/style/style.css b/src/style/style.css
index 5340c7c..e535e2d 100644
--- a/src/style/style.css
+++ b/src/style/style.css
@@ -141,7 +141,7 @@ button:disabled {
}
.main-game-skyline {
- background-image: url("../assets/img/skyline.png");
+ background-image: url("../assets/img/skyline.webp");
background-repeat: repeat-x;
background-size: contain;
width: 100%;
@@ -234,4 +234,11 @@ button:disabled {
opacity: 1;
transform: translateY(0%);
}
+}
+
+.volume {
+ position: fixed;
+ right: 80px;
+ bottom: 9px;
+ z-index: 10;
}
\ No newline at end of file
+
- LOADING
+
+
+
+
+ 
+ 
+ 
+ 
+ 