alert("sorry, ios and older devices not supported"); class Animatable { constructor(dims, delayFactor = 1) { this.anim = []; this.animIndex = 0; this.acc = 0; this.animDelay = 2.5; this.interruptible = true; this.delayFactor = delayFactor; this.callback = () => {}; this.dims = dims.copy(); } updateDims() { const texture = this.anim[this.animIndex]; this.dims.x = this.dims.y * texture.width / texture.height; } updateAnim() { this.acc++; this.animDelay = (25 / this.anim.length) / this.delayFactor; this.acc %= (this.anim.length * this.animDelay) | 0; this.animIndex = (this.acc / this.animDelay) | 0; if(this.animIndex === this.anim.length - 1) { this.callback(); this.callback = () => {}; } } setAnim(anim, options = { interruptible: true, priority: false, callback: () => {} }) { let { interruptible, priority, callback } = options; if(anim === this.anim) return; if(interruptible === undefined) interruptible = true; if(priority === undefined) priority = false; if(callback === undefined) callback = () => {}; if(this.interruptible || this.acc === 0 || priority) { this.animIndex = 0; this.acc = 1; this.anim = anim; this.interruptible = interruptible; this.callback = callback; } this.updateDims(); } } class Player extends Animatable { constructor(pos) { super(new Vec2(adapt(200), adapt(200))); this.pos = pos.copy(); this.dir = 1; this.hb = new HealthBar(10); this.ableToThrow = true; this.charging = false; this.ableToCharge = true; } update() { this.updateAnim(); if(this.anim === textures.player.run) { if((player.dir < 0 && adapt(-offset.x) > adapt(20)) || (this.dir > 0 && adapt(-offset.x) < adapt(height) * textures.background.width / textures.background.height - adapt(width + 20))) offset.x -= adapt(this.dir * (8 + this.charging * 30)); } if(this.anim === textures.player.attack) { for(const zombie of zombies) { const dims = this.dims.copy().div(2); const playerPos = this.getTopLeft(dims); const dirVec = zombie.getTopLeft().copy().sub(playerPos); if(zombie.collided(playerPos, dims.copy()) && dirVec.x * this.dir >= 0 && !zombie.hit) { zombie.damage(2); zombie.vel.set(20 * this.dir, -5).modify(adapt); zombie.hit = true; } } } for(const healing of healings) { if(healing.collided(this.getTopLeft(), this.dims.copy())) { this.hb.increase(2); healings.splice(healings.indexOf(healing), 1); } } } damage(amount) { this.hb.decrease(amount); if(this.hb.dead) { this.setAnim(textures.player.dead, { interruptible: false, priority: false, callback: () => { playerDead = true; $(".panel").style.transform = "scale(1, 1) rotate(90deg)"; $(".score").innerHTML = "Your score is: " + scoreBoard.value; } }); } } getTopLeft(dims = this.dims) { const halfdims = dims.copy().div(2); const pos = this.pos.copy().sub(halfdims).add(offset.copy().mult(-1)); return pos; } setDir(dir) { if(!this.interruptible) return; if(dir === 0) return; this.dir = dir < 0 ? -1 : 1; } render() { ctx.save(); const texture = this.anim[this.animIndex]; const halfdims = this.dims.copy().div(2); halfdims.x *= this.dir; const pos = this.pos.copy().sub(halfdims); ctx.translate(...pos); ctx.scale(this.dir, 1); ctx.drawImage(texture, 0, 0, ...this.dims); // ctx.strokeStyle = "red"; // ctx.strokeRect(0, 0, ...this.dims); ctx.restore() ctx.save(); ctx.translate(...this.pos.copy().add(new Vec2(0, adapt(-120)))); this.hb.render(); ctx.restore(); } } class Projectile { constructor(pos, dir, tex) { this.pos = pos.copy(); this.dir = dir; this.vel = new Vec2(adapt(this.dir * 10), 0); this.texture = tex; this.dims = new Vec2(adapt(100), adapt(100) * tex.height / tex.width); } getTopLeft(dims = this.dims) { const halfdims = dims.copy().div(2); const pos = this.pos.copy().sub(halfdims); return pos; } update() { this.pos.add(this.vel); for(const zombie of zombies) { const projectilePos = this.getTopLeft(); if(zombie.collided(projectilePos, this.dims.copy())) { zombie.damage(zombie.hb.max * 0.75); this.remove(); break; } } if(this.pos.x + offset.x < 0 || this.pos.x + offset.x > width) this.remove(); } remove() { projectiles.splice(projectiles.indexOf(this), 1); } render() { ctx.save(); const halfdims = this.dims.copy().div(2); halfdims.x *= this.dir; const pos = this.pos.copy().sub(halfdims); ctx.translate(...pos); ctx.scale(this.dir, 1); ctx.drawImage(this.texture, 0, 0, ...this.dims); ctx.restore(); } } class ScoreBoard { constructor(pos) { this.pos = pos.copy(); this.value = 0; } update(val) { this.value = val; } add(amount) { this.value += amount; } remove(amount) { if(this.value >= amount) this.value -= amount; } render() { ctx.fillStyle = "white"; ctx.font = `${adapt(30)}px Arial`; ctx.fillText(this.value, ...this.pos); } } class Vec2 { constructor(x = 0, y = 0) { this.x = x; this.y = y; } add(v) { this.x += v.x; this.y += v.y; return this; } sub(v) { this.x -= v.x; this.y -= v.y; return this; } mult(n) { this.x *= n; this.y *= n; return this; } div(n) { return this.mult(1 / n); } copy() { return new Vec2(...this); } equals(v) { return this.x === v.x && this.y == v.y; } dist(v = new Vec2()) { return Math.sqrt(Math.pow(v.x - this.x, 2) + Math.pow(v.y - this.y, 2)); } dot(v) { return this.x * v.x + this.y * v.y; } normalize() { const len = this.dist(); this.x /= len; this.y /= len; return this; } angle(v = new Vec2(1, 0)) { const norm = this.normalize(); const dot = norm.dot(v); const aMod = this.dist(); const bMod = v.dist(); const fact = (norm.y > 0 ? 1 : -1); return fact * Math.acos(dot) / (aMod * bMod); } limit(r) { return this.normalize().mult(r); } set(x, y) { this.x = x; this.y = y; return this; } multMat(mat) { const x = this.x * mat[0][0] + this.y * mat[0][1]; const y = this.x * mat[1][0] + this.y * mat[1][1]; return this.set(x, y); } toFixed(n) { this.x = this.x.toFixed(n); this.y = this.y.toFixed(n); return this; } modify(func) { this.x = func(this.x); this.y = func(this.y); return this; } [Symbol.iterator] = function*() { yield this.x; yield this.y; } }; class Zombie extends Animatable { constructor(pos, tex) { super(new Vec2(adapt(200), adapt(200)), 0.5); this.pos = pos.copy(); this.setAnim(tex.idle); this.dir = 1; this.textures = tex; this.speed = random(1, 4); this.hb = new HealthBar(5); this.vel = new Vec2(); this.elevation = this.pos.y; this.hit = false; } update() { this.updateAnim(); const dirVec = player.pos.copy().sub(offset).sub(this.pos); if(dirVec.dist() > adapt(100)) { if(this.vel.dist() < 1 && this.pos.y >= this.elevation) { this.setAnim(this.textures.walk); const vel = dirVec.copy().normalize().mult(this.speed).modify(adapt); this.setDir(vel.x); this.pos.add(vel); this.hit = false; } else { this.setAnim(this.textures.idle); } } else if(this.anim !== this.textures.dead) { if(!player.charging) { this.setAnim(this.textures.attack); player.damage(0.03); } else { this.damage(1); } } this.pos.add(this.vel); this.vel.mult(0.85); if(this.pos.y < this.elevation) { const gravity = adapt(2); this.pos.y += gravity; } } setDir(dir) { if(dir === 0) return; this.dir = dir < 0 ? -1 : 1; } damage(amount) { this.hb.decrease(amount); if(this.hb.dead) { this.setAnim(this.textures.dead, { interruptible: false, priority: true, callback: () => { zombies.push(spawnZombie()); if(Math.random() < 0.3) zombies.push(spawnZombie()); if(Math.random() < 0.5) healings.push(new Healing(new Vec2(this.pos.x, height - adapt(150)))); scoreBoard.add(20); zombies.splice(zombies.indexOf(this), 1); } }) } } getTopLeft() { const halfdims = this.dims.copy().div(2); const pos = this.pos.copy().sub(halfdims); return pos; } collided(pos, dims) { const zombiePos = this.getTopLeft(); const [ x1, y1 ] = [...zombiePos]; const [ w1, h1 ] = [...this.dims]; const [ x2, y2 ] = [...pos]; const [ w2, h2 ] = [...dims]; return (x1 < x2 + w2 && x1 + w1 > x2 && y1 < y2 + h2 && y1 + h1 > y2); } render() { ctx.save(); const texture = this.anim[this.animIndex]; const halfdims = this.dims.copy().div(2); halfdims.x *= this.dir; const pos = this.pos.copy().sub(halfdims); ctx.translate(...pos); ctx.scale(this.dir, 1); ctx.drawImage(texture, 0, 0, ...this.dims); // ctx.strokeStyle = "red"; // ctx.strokeRect(0, 0, ...this.dims); ctx.restore(); ctx.save(); ctx.translate(...this.pos.copy().add(new Vec2(0, adapt(-120)))); this.hb.render(); ctx.restore(); } } class Interactive { constructor(left, top, width, height) { this.bounds = { left, top, width, height }; } clicked(pos) { const { left, top, width, height } = this.bounds; const { x, y } = pos; return (x >= left && x <= left + width && y >= top && y <= top + height); } }; class Button extends Interactive { constructor(pos, letter) { const r = adapt(40); super(pos.x - r, pos.y - r, r * 2, r * 2); this.pos = pos.copy(); this.r = r; this.letter = letter; this.pressed = false; this.disabled = false; } press() { this.pressed = true; } release() { this.pressed = false; } render() { ctx.strokeStyle = this.pressed ? "red" : "#00ccff"; if(this.disabled) { ctx.fillStyle = "grey"; } else { ctx.fillStyle = this.pressed ? "rgba(99, 159, 255, 0.8)" : "rgba(28, 106, 232, 0.5)"; } ctx.beginPath(); ctx.arc(...this.pos, this.r, 0, 2 * Math.PI); ctx.stroke(); ctx.fill(); ctx.font = `${adapt(30)}px Arial`; ctx.fillStyle = this.pressed ? "red" : "#000"; ctx.fillText(this.letter, ...this.pos.copy().add(new Vec2(-adapt(10), adapt(10)))); } } class Healing { constructor(pos) { this.pos = pos.copy(); this.dims = new Vec2(50, 50).modify(adapt); } getTopLeft() { const halfdims = this.dims.copy().div(2); const pos = this.pos.copy().sub(halfdims); return pos; } collided(pos, dims) { const healingPos = this.getTopLeft(); const [ x1, y1 ] = [...healingPos]; const [ w1, h1 ] = [...this.dims]; const [ x2, y2 ] = [...pos]; const [ w2, h2 ] = [...dims]; return (x1 < x2 + w2 && x1 + w1 > x2 && y1 < y2 + h2 && y1 + h1 > y2); } render() { ctx.save(); const pos = this.getTopLeft(); ctx.translate(...pos); ctx.drawImage(textures.heart, 0, 0, ...this.dims); ctx.restore(); } } class HealthBar { constructor(max, curr = 1) { this.max = max; this.curr = max * curr; this.len = adapt(max) * 10; this.dead = false; } set(amount) { this.curr = this.max * amount; if(this.curr > 0) this.dead = false; } decrease(amount) { this.curr -= amount; if(this.curr <= 0) { this.curr = 0; this.dead = true; } } increase(amount) { this.curr += amount; if(this.curr > this.max) this.curr = this.max; } render() { ctx.save(); ctx.fillStyle = "white"; ctx.strokeStyle = "black"; ctx.lineWidth = adapt(2); ctx.translate(-this.len / 2, 0); ctx.fillRect(0, 0, this.len, adapt(7)); ctx.fillStyle = "lightgreen"; ctx.fillRect(0, 0, adapt(this.curr) * 10, adapt(7)); ctx.strokeRect(0, 0, this.len, adapt(7)); ctx.restore(); } } class Joystick extends Interactive { constructor(pos) { const r = adapt(60); super(pos.x - r, pos.y - r, r * 2, r * 2); this.r = r; this.pos = pos.copy(); this.ballPos = this.pos.copy(); this.lastPos = this.pos.copy(); this.touchID = null; } setTouch(id, pos) { if(this.touchID === null) { this.touchID = id; this.update(pos); } } removeTouch() { this.touchID = null; this.ballPos = this.pos.copy(); } update(pos) { const dist = this.pos.dist(pos); if(dist < this.r) { this.ballPos = pos.copy(); } else { const dir = pos.copy().sub(this.pos); this.ballPos = dir.limit(this.r).add(this.pos); } this.lastPos = pos.copy(); } dir() { return this.ballPos.copy().sub(this.pos); } render() { ctx.strokeStyle = "#00ccff"; ctx.lineWidth = adapt(5); ctx.fillStyle = "rgba(0, 255, 255, 0.7)"; ctx.beginPath(); ctx.arc(...this.pos, this.r, 0, 2 * Math.PI); ctx.stroke(); ctx.fill(); ctx.beginPath(); ctx.fillStyle = "#1c6ae8"; ctx.arc(...this.ballPos, this.r / 1.5, 0, 2 * Math.PI); ctx.fill(); } }; window.onload = main; const $ = name => document.querySelector(name); let cvs, ctx, joystick, player, ratio, playerDead = false, scoreBoard; const offset = new Vec2(0, 0); let zombies = []; let healings = []; const buttons = []; const projectiles = []; const resolutions = [ [ 384, 216 ], [ 640, 360 ], [ 854, 480 ], [ 960, 540 ], [ 1024, 576 ], [ 1280, 720 ], [ 1366, 768 ], [ 1600, 900 ], [ 1920, 1080 ] ]; const [ width, height ] = resolutions[0]; const adapt = val => width / 960 * val; const random = (min, max) => Math.random() * (max - min) + min; const textures = { player: { idle: [], run: [], attack: [], throw: [], dead: [], }, zombie: { male: { idle: [], walk: [], attack: [], dead: [], }, female: { idle: [], walk: [], attack: [], dead: [], }, }, background: null, projectile: null, heart: null, }; const sounds = { music: null, }; function loadAudio(filename) { return new Promise(resolve => { const audio = new Audio(`https://raw.githubusercontent.com/Cosmin765/combat-game/main/assets/audio/${filename}`); audio.addEventListener("canplaythrough", () => resolve(audio)); }); } function loadTexture(filename) { return new Promise(resolve => { const img = new Image(); img.src = `https://raw.githubusercontent.com/Cosmin765/combat-game/main/assets/${filename}`; img.onload = () => resolve(img); }); } async function loadAnimations(options) { for(const option of options) { const [ name, container, count ] = option; for(let i = 0; i < count; ++i) { const filename = name + `${i}.png`; const img = await loadTexture(filename, container); container.push(img); } } } function adjustCanvas() { if(innerHeight / innerWidth > 16 / 9) { cvs.style.width = "100vw"; ratio = height / innerWidth; } else { cvs.style.height = "100vh"; ratio = width / innerHeight; } } async function main() { cvs = $("#c"); cvs.width = height; cvs.height = width; adjustCanvas(); const options = [ ["player/Idle__00", textures.player.idle, 10], ["player/Run__00", textures.player.run, 10], ["player/Attack__00", textures.player.attack, 10], ["player/Throw__00", textures.player.throw, 10], ["player/Dead__00", textures.player.dead, 10], ["zombie/male/Idle", textures.zombie.male.idle, 15], ["zombie/male/Walk", textures.zombie.male.walk, 10], ["zombie/male/Attack", textures.zombie.male.attack, 8], ["zombie/male/Dead", textures.zombie.male.dead, 12], ["zombie/female/Idle", textures.zombie.female.idle, 15], ["zombie/female/Walk", textures.zombie.female.walk, 10], ["zombie/female/Attack", textures.zombie.female.attack, 8], ["zombie/female/Dead", textures.zombie.female.dead, 12], ]; await loadAnimations(options); textures.background = await loadTexture("Background.png"); textures.projectile = await loadTexture("player/Kunai.png"); textures.heart = await loadTexture("heart.png"); sounds.music = await loadAudio("suspense.mp3"); sounds.music.loop = true; $(".loader").style.display = "none"; $(".start").style.display = "block"; alert("music here 🔈\nlike and comment your score 😉") ctx = cvs.getContext("2d"); setupEvents(); joystick = new Joystick(new Vec2(adapt(150), height - adapt(150))); buttons.push(new Button(new Vec2(width - adapt(150), height - adapt(200)), "A")); buttons.push(new Button(new Vec2(width - adapt(210), height - adapt(100)), "B")); buttons.push(new Button(new Vec2(width - adapt(90), height - adapt(100)), "C")); player = new Player(new Vec2(width / 2, height / 2 + adapt(60))); scoreBoard = new ScoreBoard(new Vec2(50, 50).modify(adapt)); for(let i = 0; i < 4; ++i) zombies.push(spawnZombie()); offset.x = -(height * textures.background.width / textures.background.height) / 2; $(".start").addEventListener("click", () => { cvs.style.display = "block"; $(".start").style.display = "none"; sounds.music.play().catch(e => {}); requestAnimationFrame(render); }); } function spawnZombie() { const tex = Math.random() > 0.5 ? textures.zombie.male : textures.zombie.female; const x = Math.random() > 0.5 ? adapt(-50) : height * textures.background.width / textures.background.height + adapt(50); const pos = new Vec2(x, height / 2 + adapt(60)); const zombie = new Zombie(pos, tex); return zombie; } function update() { const dir = joystick.dir(); if(!playerDead) { if(dir.dist() > 0) player.setAnim(textures.player.run); else player.setAnim(textures.player.idle); if(buttons[0].pressed) player.setAnim(textures.player.attack, { interruptible: false }); if(buttons[1].pressed) if(player.ableToThrow) { player.setAnim(textures.player.throw, { interruptible: false, callback: () => { const projectile = new Projectile(new Vec2(player.pos.x - offset.x, height / 2), player.dir, textures.projectile); projectiles.push(projectile); player.ableToThrow = false; buttons[1].disabled = true; setTimeout(() => { player.ableToThrow = true; buttons[1].disabled = false; }, 1000); } }); } if(buttons[2].pressed && player.ableToCharge) { player.charging = true; player.ableToCharge = false; buttons[2].disabled = true; setTimeout(() => { player.charging = false; setTimeout(() => { player.ableToCharge = true; buttons[2].disabled = false; }, 5000); }, 250); } player.setDir(dir.x); player.update(); } for(const projectile of projectiles) projectile.update(); for(const zombie of zombies) zombie.update(); } function render() { ctx.save(); update(); ctx.translate(width / 2, height / 2); ctx.rotate(Math.PI / 2); ctx.translate(-width / 2, -height / 2); ctx.translate(adapt(210), adapt(210)); // 210, because its a hard-coded value, specific to the third resolution ctx.fillStyle = "#00ff00"; ctx.fillRect(0, 0, width, height); { ctx.save(); ctx.translate(offset.x, 0); const tex = textures.background; ctx.drawImage(tex, 0, 0, height * tex.width / tex.height, height); for(const zombie of zombies) zombie.render(); for(const projectile of projectiles) projectile.render(); for(const healing of healings) healing.render(); ctx.restore(); } player.render(); scoreBoard.render(); joystick.render(); for(const btn of buttons) btn.render(); ctx.restore(); requestAnimationFrame(render); } function getRot(angle) { return [ [ Math.cos(angle), -Math.sin(angle) ], [ Math.sin(angle), Math.cos(angle) ] ]; } function adjustVec(v) { v.mult(ratio).multMat(getRot(-Math.PI / 2)); v.y = height + v.y; return v; } function setupEvents() { addEventListener("touchstart", e => { for(let i = 0; i < e.touches.length; ++i) { const touch = e.touches[i]; const pos = adjustVec(new Vec2(touch.pageX, touch.pageY)); if(joystick.clicked(pos)) { joystick.setTouch(touch.identifier, pos); continue; } for(const btn of buttons) { if(btn.clicked(pos)) { btn.press(); } } } }); addEventListener("touchmove", e => { for(let i = 0; i < e.touches.length; ++i) { const touch = e.touches[i]; const pos = adjustVec(new Vec2(touch.pageX, touch.pageY)); if(joystick.touchID === touch.identifier) joystick.update(pos); } }); addEventListener("touchend", e => { let present = false; for(let i = 0; i < e.touches.length; ++i) { const touch = e.touches[i]; const pos = adjustVec(new Vec2(touch.pageX, touch.pageY)); if(pos.equals(joystick.lastPos)) { present = true; break; } } if(!present) { joystick.removeTouch(); } for(const btn of buttons) { let present = false; for(let i = 0; i < e.touches.length; ++i) { const touch = e.touches[i]; const pos = adjustVec(new Vec2(touch.pageX, touch.pageY)); if(btn.clicked(pos)) { present = true; break; } } if(!present) { btn.release(); } } }); $(".panel button").addEventListener("click", () => { zombies = []; healings = []; for(let i = 0; i < 4; ++i) zombies.push(spawnZombie()); scoreBoard.update(0); playerDead = false; player.hb.set(1); offset.x = -(height * textures.background.width / textures.background.height) / 2; $(".panel").style.transform = "scale(0, 0) rotate(90deg)"; }); }

🧟‍♀️ Zombie Hunt 🧟‍♂️ Game