diff --git a/assets/background/outside.png b/assets/background/outside.png index 4434a6f..42435df 100644 Binary files a/assets/background/outside.png and b/assets/background/outside.png differ diff --git a/index.html b/index.html index 05c1c56..94c3d64 100644 --- a/index.html +++ b/index.html @@ -3,22 +3,22 @@ - Final v0.2 + SpLit
-

You Won

+

You Won!

Some info
goes here

diff --git a/main.css b/main.css index 1d7122c..34dd9ed 100644 --- a/main.css +++ b/main.css @@ -29,7 +29,6 @@ body { } canvas { - background-color: white; border-radius: 10px; } diff --git a/main.js b/main.js index dc0fcbd..c7fa956 100644 --- a/main.js +++ b/main.js @@ -1,11 +1,13 @@ import { Game } from './modules/game.mjs'; import { Canvas } from './modules/canvas.mjs'; import { Texture } from './modules/texture.mjs'; +import { Sandwich } from './modules/sandwich.mjs'; import { Animated } from './modules/animated.mjs'; import { Player } from './modules/player.mjs'; import { Sprite } from './modules/sprite.mjs'; import { Input } from './modules/input.mjs'; import { Level } from './modules/level.mjs'; +import { Background } from './modules/background.mjs'; import { Spawn } from './modules/spawn.mjs'; import { Ground } from './modules/ground.mjs'; import { Cracked } from './modules/cracked.mjs'; @@ -46,7 +48,7 @@ document.addEventListener('keydown', e => { if (GAME.debug) speed = 0; break; case '9': - if (GAME.debug) speed = 300; + if (GAME.debug) speed = 1000; break; case '8': if (GAME.debug) speed = 100; @@ -79,28 +81,88 @@ function generateLevels() { GAME.addInput(new Input(players[0])); GAME.addInput(new Input(players[1], { left: 'arrowleft', right: 'arrowright', up: 'arrowup' })); - let stair = new Level(); + let outside = new Background(new Texture('../assets/background/outside.png', { w: 1024, h: 1024 }), ['#89c9e4', '#477553']) - stair.addBackground(new Texture('../assets/background/outside.png', { w: 1024, h: 1024 })); + let buttonTextures = { + up: new Texture('../assets/interactive/button-up.png', { w: 16, h: 6 }), + down: new Texture('../assets/interactive/button-down.png', { w: 16, h: 6 }) + }; - stair.addSpawn(new Spawn({ x: 300, y: 475 }, players[0])); - stair.addSpawn(new Spawn({ x: 325, y: 475 }, players[1])); + let ground = ['../assets/ground/ground-side.png', '../assets/ground/ground-middle.png']; + let cracked = ['../assets/ground/brick-cracked-side.png', '../assets/ground/brick-cracked-middle.png']; + let spike = { + big: '../assets/interactive/spike-small.png', + small: '../assets/interactive/spike-small.png' + }; + let brick = { + big: ['../assets/ground/brick-big-side.png', '../assets/ground/brick-big-middle.png'], + small: ['../assets/ground/brick-small-side.png', '../assets/ground/brick-small-middle.png'] + }; - stair.addObject(new Ground({ x: 310, y: 525 }, { w: 40, h: 50 }, new Texture('../assets/ground/brick-small-middle.png', { w: 40, h: 50 }))); - stair.addObject(new Ground({ x: 360, y: 475 }, { w: 40, h: 50 }, new Texture('../assets/ground/brick-small-middle.png', { w: 40, h: 50 }))); - stair.addObject(new Ground({ x: 410, y: 425 }, { w: 40, h: 50 }, new Texture('../assets/ground/brick-small-middle.png', { w: 40, h: 50 }))); + let links = new Level(); + links.setBackground(outside); - let stairP1 = new Platform([{ x: 335, y: 525 }, { x: 335, y: 475 }], { w: 10, h: 50 }, new Texture('../assets/ground/brick-cracked-middle.png', { w: 10, h: 50 }), { x: 0, y: 0 }, 3, 'pause'); - let stairP2 = new Platform([{ x: 385, y: 475 }, { x: 385, y: 425 }], { w: 10, h: 50 }, new Texture('../assets/ground/brick-cracked-middle.png', { w: 10, h: 50 }), { x: 0, y: 0 }, 3, 'pause'); + links.addSpawn(new Spawn({ x: 400, y: 240 }, players[0])); + links.addSpawn(new Spawn({ x: 400, y: 400 }, players[1])); - stair.addObject(stairP1); - stair.addObject(stairP2); + links.addObject(new Ground({ x: 440, y: 280 }, { w: 160, h: 32 }, new Sandwich(ground, { w: 160, h: 32 }))); + links.addObject(new Ground({ x: 440, y: 440 }, { w: 160, h: 32 }, new Sandwich(ground, { w: 160, h: 32 }))); + + let linksC1 = new Cracked({ x: 600, y: 272 }, { w: 80, h: 16 }, new Sandwich(cracked, { w: 80, h: 16 })); + links.addObject(linksC1); + links.addObject(new Spike({ x: 600, y: 288 }, { w: 80, h: 16 }, new Texture(spike.small, { w: 80, h: 16 }))); + links.addObject(new Ground({ x: 600, y: 304 }, { w: 80, h: 16 }, new Sandwich(brick.small, { w: 80, h: 16 }))); + links.addObject(new Link({ x: 600, y: 432 }, { w: 80, h: 16 }, new Sandwich(brick.small, { w: 80, h: 16 }), { x: 0, y: 0 }, linksC1)); + + let linksC2 = new Cracked({ x: 760, y: 432 }, { w: 80, h: 16 }, new Sandwich(cracked, { w: 80, h: 16 })); + links.addObject(linksC2); + links.addObject(new Link({ x: 760, y: 272 }, { w: 80, h: 16 }, new Sandwich(brick.small, { w: 80, h: 16 }), { x: 0, y: 0 }, linksC2)); + + let linksC3 = new Cracked({ x: 920, y: 272 }, { w: 80, h: 16 }, new Sandwich(cracked, { w: 80, h: 16 })); + links.addObject(linksC3); + links.addObject(new Spike({ x: 920, y: 288 }, { w: 80, h: 16 }, new Texture(spike.small, { w: 80, h: 16 }))); + links.addObject(new Ground({ x: 920, y: 304 }, { w: 80, h: 16 }, new Sandwich(brick.small, { w: 80, h: 16 }))); + links.addObject(new Link({ x: 920, y: 432 }, { w: 80, h: 16 }, new Sandwich(brick.small, { w: 80, h: 16 }), { x: 0, y: 0 }, linksC3)); + + links.addObject(new Ground({ x: 1080, y: 280 }, { w: 160, h: 32 }, new Sandwich(ground, { w: 160, h: 32 }))); + links.addObject(new Ground({ x: 1080, y: 440 }, { w: 160, h: 32 }, new Sandwich(ground, { w: 160, h: 32 }))); - stair.addObject(new Door({ x: 360, y: 448.5 }, { w: 16, h: 3 }, [new Texture('../assets/interactive/button-up.png', { w: 16, h: 6 }), new Texture('../assets/interactive/button-down.png', { w: 16, h: 6 })], { x: 0, y: -1.5 }, stairP1)); - stair.addObject(new Door({ x: 410, y: 398.5 }, { w: 16, h: 3 }, [new Texture('../assets/interactive/button-up.png', { w: 16, h: 6 }), new Texture('../assets/interactive/button-down.png', { w: 16, h: 6 })], { x: 0, y: -1.5 }, stairP2)); + links.addGoal(new Goal({ x: 1176, y: 280 })); + links.addObject(new Ground({ x: 1176, y: 288 }, { w: 32, h: 16 }, new Sandwich(brick.small, { w: 32, h: 32 }), { x: 0, y: -8 })); + links.addGoal(new Goal({ x: 1176, y: 440 })); + links.addObject(new Ground({ x: 1176, y: 448 }, { w: 32, h: 16 }, new Sandwich(brick.small, { w: 32, h: 32 }), { x: 0, y: -8 })); - stair.addGoal(new Goal({ x: 470, y: 425 }, { w: 16, h: 6 }, new Texture('../assets/ground/brick-cracked-middle.png', { w: 16, h: 6 }))); - stair.addGoal(new Goal({ x: 450, y: 425 }, { w: 16, h: 6 }, new Texture('../assets/ground/brick-cracked-middle.png', { w: 16, h: 6 }))); + GAME.addLevel(links); + + let stair = new Level(); + stair.setBackground(outside); + + stair.addSpawn(new Spawn({ x: 400, y: 400 }, players[0])); + stair.addSpawn(new Spawn({ x: 440, y: 400 }, players[1])); + + stair.addObject(new Ground({ x: 440, y: 440 }, { w: 160, h: 32 }, new Sandwich(ground, { w: 160, h: 32 }))); + + let stairP1 = new Platform([{ x: 536, y: 472 }, { x: 536, y: 376 }], { w: 32, h: 96 }, new Sandwich(cracked, { w: 32, h: 96 }), { x: 0, y: 0 }, 2, 'pause'); + stair.addObject(stairP1); + stair.addObject(new Ground({ x: 584, y: 376 }, { w: 64, h: 96 }, new Sandwich(brick.big, { w: 64, h: 96 }))); + stair.addObject(new Door({ x: 584, y: 326.5 }, { w: 16, h: 3 }, [buttonTextures.up, buttonTextures.down], { x: 0, y: -1.5 }, stairP1)); + + let stairP2 = new Platform([{ x: 632, y: 376 }, { x: 632, y: 280 }], { w: 32, h: 96 }, new Sandwich(cracked, { w: 32, h: 96 }), { x: 0, y: 0 }, 2, 'pause'); + stair.addObject(stairP2); + stair.addObject(new Ground({ x: 680, y: 280 }, { w: 64, h: 96 }, new Sandwich(brick.big, { w: 64, h: 96 }))); + stair.addObject(new Door({ x: 680, y: 230.5 }, { w: 16, h: 3 }, [buttonTextures.up, buttonTextures.down], { x: 0, y: -1.5 }, stairP2)); + + let stairP3 = new Platform([{ x: 728, y: 280 }, { x: 728, y: 184 }], { w: 32, h: 96 }, new Sandwich(cracked, { w: 32, h: 96 }), { x: 0, y: 0 }, 2, 'pause'); + stair.addObject(stairP3); + stair.addObject(new Ground({ x: 776, y: 184 }, { w: 64, h: 96 }, new Sandwich(brick.big, { w: 64, h: 96 }))); + stair.addObject(new Door({ x: 776, y: 134.5 }, { w: 16, h: 3 }, [buttonTextures.up, buttonTextures.down], { x: 0, y: -1.5 }, stairP3)); + + stair.addObject(new Ground({ x: 888, y: 152 }, { w: 160, h: 32 }, new Sandwich(ground, { w: 160, h: 32 }))); + + stair.addGoal(new Goal({ x: 984, y: 152 })); + stair.addGoal(new Goal({ x: 1048, y: 152 })); + stair.addObject(new Ground({ x: 1016, y: 160 }, { w: 96, h: 16 }, new Sandwich(brick.big, { w: 96, h: 32 }), { x: 0, y: -8 })); + stair.addObject(new Ground({ x: 1016, y: 152 }, { w: 32, h: 32 }, new Texture(brick.big[1], { w: 32, h: 32 }), { x: 0, y: 0 })); GAME.addLevel(stair); } \ No newline at end of file diff --git a/modules/background.mjs b/modules/background.mjs new file mode 100644 index 0000000..a0af00d --- /dev/null +++ b/modules/background.mjs @@ -0,0 +1,8 @@ +class Background { + constructor (texture, colors) { + this.texture = texture; + this.colors = colors; + } +} + +export { Background }; \ No newline at end of file diff --git a/modules/camera.mjs b/modules/camera.mjs index 3667b46..5cef1a2 100644 --- a/modules/camera.mjs +++ b/modules/camera.mjs @@ -8,7 +8,23 @@ class Camera { } update(players) { - let target = { + let target = this.position(players); + + this.zoom = this.smooth.zoom * this.zoom + (1 - this.smooth.zoom) * target.zoom; + this.pos.x = this.smooth.pos * this.pos.x + (1 - this.smooth.pos) * target.pos.x; + this.pos.y = this.smooth.pos * this.pos.y + (1 - this.smooth.pos) * target.pos.y; + } + + snap(players) { + let target = this.position(players); + + this.zoom = target.zoom; + this.pos.x = target.pos.x; + this.pos.y = target.pos.y; + } + + position(players) { + return { pos: { x: (players[0].pos.x + players[1].pos.x) / 2, y: (players[0].pos.y + players[1].pos.y) / 2 @@ -16,10 +32,6 @@ class Camera { zoom: Math.min(500 / Math.abs(players[0].pos.x - players[1].pos.x), 500 / Math.abs(players[0].pos.y - players[1].pos.y), this.limit) }; - - this.zoom = this.smooth.zoom * this.zoom + (1 - this.smooth.zoom) * target.zoom; - this.pos.x = this.smooth.pos * this.pos.x + (1 - this.smooth.pos) * target.pos.x; - this.pos.y = this.smooth.pos * this.pos.y + (1 - this.smooth.pos) * target.pos.y; } } diff --git a/modules/game.mjs b/modules/game.mjs index eb6e957..148bafc 100644 --- a/modules/game.mjs +++ b/modules/game.mjs @@ -48,6 +48,7 @@ class Game { } this.resetLevel(); + this.camera.snap(this.players); } addPlayer(player) { @@ -69,6 +70,7 @@ class Game { gameTick() { let level = this.levels[this.level]; let objects = level.objects.concat(this.players).filter(o => !o.dead); + let ghosts = level.objects.concat(this.players).filter(o => o.dead); this.players[0].tag = "P1"; this.context.clearRect(0, 0, this.canvas.width, this.canvas.height); @@ -99,9 +101,15 @@ class Game { this.draw(objects[i]); } + for (let i = 0; i < ghosts.length; i++) { + this.draw(ghosts[i], ghosts[i].dying()); + } + this.camera.update(this.players); - if (level.goals[0].player && level.goals[1].player) { + if (this.players[0].fade === 0 || this.players[1].fade === 0) { + this.resetLevel(); + } else if (level.goals[0].player && level.goals[1].player) { this.nextLevel(); } @@ -139,22 +147,42 @@ class Game { background(level) { let real = this.camera.zoom * this.canvas.width / 1000; - this.context.drawImage(level.background.draw(), - this.canvas.width / 2 - this.camera.pos.x * real, - this.canvas.height / 2 - this.camera.pos.y * real, - 1024 * real, - 1024 * real); + for (let x = 1024 * Math.floor(Math.min(this.players[0].pos.x, this.players[1].pos.x) / 1024 - 1); + x < 1024 * Math.ceil(Math.max(this.players[0].pos.x, this.players[1].pos.x) / 1024 + 1); x += 1024) { + this.context.drawImage(level.background.texture.draw(), + this.canvas.width / 2 - this.camera.pos.x * real + x * real, + this.canvas.height / 2 - this.camera.pos.y * real, + 1024 * real, + 1024 * real); + this.context.fillStyle = level.background.colors[0]; + this.context.fillRect( + this.canvas.width / 2 - this.camera.pos.x * real + x * real - 1, + this.canvas.height / 2 - this.camera.pos.y * real - 1024 * real - 1, + 1024 * real + 3, + 1024 * real + 3); + this.context.fillStyle = level.background.colors[1]; + this.context.fillRect( + this.canvas.width / 2 - this.camera.pos.x * real + x * real - 1, + this.canvas.height / 2 - this.camera.pos.y * real + 1024 * real - 1, + 1024 * real + 3, + 1024 * real + 3); + } } - draw(object) { + draw(object, opacity = 1) { let real = this.camera.zoom * this.canvas.width / 1000; + this.context.save(); + this.context.globalAlpha = opacity; + this.context.drawImage(object.texture.draw(), 0, 0, object.texture.dim.w, object.texture.dim.h, this.canvas.width / 2 + (object.pos.x + object.offset.x - object.texture.dim.w / 2 - this.camera.pos.x) * real, this.canvas.height / 2 + (object.pos.y + object.offset.y - object.texture.dim.h / 2 - this.camera.pos.y) * real, object.texture.dim.w * real, object.texture.dim.h * real); + this.context.restore(); + if (!this.debug) return; this.context.strokeStyle = object.touch && object.touch.bottom ? 'green' : 'red'; diff --git a/modules/goal.mjs b/modules/goal.mjs index d246b7e..a530958 100644 --- a/modules/goal.mjs +++ b/modules/goal.mjs @@ -1,9 +1,10 @@ import { Interactive } from './interactive.mjs'; import { Player } from './player.mjs'; +import { Texture } from './texture.mjs'; class Goal extends Interactive { - constructor(pos, dim, texture, offset) { - super(pos, dim, texture, offset); + constructor(pos) { + super(pos, { w: 32, h: 32 }, new Texture('../assets/ground/brick-door.png', { w: 32, h: 32 }), { x: 0, y: -32 }); this.player = false; } diff --git a/modules/level.mjs b/modules/level.mjs index 386b180..5251e2d 100644 --- a/modules/level.mjs +++ b/modules/level.mjs @@ -19,7 +19,7 @@ class Level { this.goals.push(goal); } - addBackground(background) { + setBackground(background) { this.background = background; } } diff --git a/modules/link.mjs b/modules/link.mjs index 4001c4e..15fdb7d 100644 --- a/modules/link.mjs +++ b/modules/link.mjs @@ -5,11 +5,21 @@ class Link extends Interactive { super(pos, dim, texture, offset); this.object = object; + + this.object.wait(); + this.played = false; + } + + init() { + this.played = false; + + super.init(); } trigger() { - if (this.pressed.length) { + if (this.pressed.length && !this.played) { this.object.die(false); + this.played = true; } super.trigger(); diff --git a/modules/mover.mjs b/modules/mover.mjs index 9dc8545..0deb9e9 100644 --- a/modules/mover.mjs +++ b/modules/mover.mjs @@ -13,7 +13,7 @@ class Mover extends Object { this.ground = this.touch.bottom; while (this.ground) { - if (!this.ground.touch) break; + if (!this.ground.touch || !this.ground.touch.bottom) break; this.ground = this.ground.touch.bottom; } @@ -36,28 +36,39 @@ class Mover extends Object { (this.pos.x + this.dim.w / 2 < that.pos.x - that.dim.w / 2 && this.npos.x + this.dim.w / 2 < that.npos.x - that.dim.w / 2) || (this.pos.x - this.dim.w / 2 > that.pos.x + that.dim.w / 2 && this.npos.x - this.dim.w / 2 > that.npos.x + that.dim.w / 2)) return; - let y = false; - - if (this.vel.y >= that.nvel.y && this.pos.y < that.box.top && that.box.top > this.box.top && that.box.top <= this.box.bottom) { - if (!this.touch.bottom || (this.touch.bottom.npos.y - this.touch.bottom.dim.h / 2 > that.npos.y - that.dim.h / 2)) { + if (this.pos.y < that.box.top && that.box.top > this.box.top && that.box.top <= this.box.bottom && this.nvel.y >= that.nvel.y && + this.pos.x + this.dim.w / 2 > that.pos.x - that.dim.w / 2 && this.pos.x - this.dim.w / 2 < that.pos.x + that.dim.w / 2) { + if (!this.touch.bottom || + (this.touch.bottom.npos.y - this.touch.bottom.dim.h / 2 > that.npos.y - that.dim.h / 2) || + (this.touch.bottom.npos.y - this.touch.bottom.dim.h / 2 === that.npos.y - that.dim.h / 2 && + Math.abs(this.touch.bottom.npos.x - this.npos.x) > Math.abs(that.npos.x - this.npos.x))) { this.touch.bottom = that; } - y = true; } - if (this.vel.y <= that.nvel.y && this.pos.y > that.box.bottom && that.box.bottom >= this.box.top && that.box.bottom < this.box.bottom) { - if (!this.touch.top || (this.touch.top.npos.y + this.touch.top.dim.h / 2 > that.npos.y + that.dim.h / 2)) { + if (this.pos.y > that.box.bottom && that.box.bottom >= this.box.top && that.box.bottom < this.box.bottom && this.nvel.y <= that.nvel.y && + this.pos.x + this.dim.w / 2 > that.pos.x - that.dim.w / 2 && this.pos.x - this.dim.w / 2 < that.pos.x + that.dim.w / 2) { + if (!this.touch.top || + (this.touch.top.npos.y + this.touch.top.dim.h / 2 > that.npos.y + that.dim.h / 2) || + (this.touch.top.npos.y + this.touch.top.dim.h / 2 === that.npos.y + that.dim.h / 2 && + Math.abs(this.touch.top.npos.x - this.npos.x) > Math.abs(that.npos.x - this.npos.x))) { this.touch.top = that; } - y = true; } - if (y) return; - if (this.vel.x >= that.nvel.x && this.pos.x < that.box.left && that.box.left > this.box.left && that.box.left <= this.box.right) { - if (!this.touch.right || (this.touch.right.npos.x - this.touch.right.dim.h / 2 > that.npos.x - that.dim.w / 2)) { + if (this.pos.x < that.box.left && that.box.left > this.box.left && that.box.left <= this.box.right && this.nvel.x >= that.nvel.x && + this.pos.y + this.dim.h / 2 > that.pos.y - that.dim.h / 2 && this.pos.y - this.dim.h / 2 < that.pos.y + that.dim.h / 2) { + if (!this.touch.right || + (this.touch.right.npos.x - this.touch.right.dim.h / 2 > that.npos.x - that.dim.w / 2) || + (this.touch.right.npos.x - this.touch.right.dim.h / 2 === that.npos.x - that.dim.w / 2 && + Math.abs(this.touch.right.npos.y - this.npos.y) > Math.abs(that.npos.y - this.npos.y))) { this.touch.right = that; } } - if (this.vel.x <= that.nvel.x && this.pos.x > that.box.right && that.box.right >= this.box.left && that.box.right < this.box.right) { - if (!this.touch.left || (this.touch.left.npos.x + this.touch.left.dim.h / 2 > that.npos.x + that.dim.w / 2)) { + if (this.pos.x > that.box.right && that.box.right >= this.box.left && that.box.right < this.box.right && this.nvel.x <= that.nvel.x && + this.pos.y + this.dim.h / 2 > that.pos.y - that.dim.h / 2 && this.pos.y - this.dim.h / 2 < that.pos.y + that.dim.h / 2) { + if (!this.touch.left || + (this.touch.left.npos.x + this.touch.left.dim.h / 2 > that.npos.x + that.dim.w / 2) || + (this.touch.left.npos.x + this.touch.left.dim.h / 2 > that.npos.x + that.dim.w / 2 && + Math.abs(this.touch.left.npos.y - this.npos.y) > Math.abs(that.npos.y - this.npos.y))) { this.touch.left = that; } } @@ -88,7 +99,7 @@ class Mover extends Object { this.ground = this.touch.bottom; while (this.ground) { - if (!this.ground.touch) break; + if (!this.ground.touch || !this.ground.touch.bottom) break; this.ground = this.ground.touch.bottom; } @@ -99,7 +110,7 @@ class Mover extends Object { } this.vel.x *= this.touch.bottom ? 0.5 : 0.75; - this.vel.y *= 0.875; + this.vel.y *= 0.9375; this.vel.y += 0.5; } diff --git a/modules/object.mjs b/modules/object.mjs index 301cfac..b92971c 100644 --- a/modules/object.mjs +++ b/modules/object.mjs @@ -17,12 +17,14 @@ class Object { this.dead = false; this.waiting = false; + this.fade = 100; } init() { this.pos = { ...this.base }; this.vel = { x: 0, y: 0 }; this.dead = this.waiting; + this.fade = this.waiting ? 0 : 50; } update() { @@ -47,6 +49,10 @@ class Object { move() { this.pos = { ...this.cpos }; this.vel = { ...this.cvel }; + + if (this.pos.y > 1024) { + this.die(); + } } die(state = true) { @@ -56,6 +62,12 @@ class Object { wait() { this.waiting = true; this.dead = true; + this.fade = 0; + } + + dying() { + this.fade = this.fade === 0 ? 0 : this.fade - 1; + return this.fade / 100; } } diff --git a/modules/player.mjs b/modules/player.mjs index d516994..22676ba 100644 --- a/modules/player.mjs +++ b/modules/player.mjs @@ -10,14 +10,22 @@ class Player extends Mover { this.state = 'idle'; } + init() { + this.dir = 1; + this.state = 'idle'; + + super.init(); + } + move() { let nstate = 'idle'; + let real = this.nvel.x - (this.ground ? this.ground.nvel.x : 0); + this.dir = real === 0 ? this.dir : (real > 0 ? 1 : 0); - this.dir = this.vel.x === 0 ? this.dir : (this.vel.x > 0 ? 1 : 0); if (!this.touch.bottom) { this.texture = this.sprite.data.jump[this.dir]; nstate = 'jump'; - } else if (Math.abs(this.vel.x) > 0.5) { + } else if (Math.abs(real) > 0.25) { this.texture = this.sprite.data.run[this.dir]; nstate = 'run'; } else { @@ -31,6 +39,15 @@ class Player extends Mover { super.move(); } + + die() { + let real = this.nvel.x - (this.ground ? this.ground.nvel.x : 0); + this.dir = real === 0 ? this.dir : (real > 0 ? 1 : 0); + + this.texture = this.sprite.data.dead[this.dir]; + + super.die(); + } } export { Player }; \ No newline at end of file diff --git a/modules/sandwich.mjs b/modules/sandwich.mjs new file mode 100644 index 0000000..af7b834 --- /dev/null +++ b/modules/sandwich.mjs @@ -0,0 +1,46 @@ +import { Texture } from "./texture.mjs"; + +class Sandwich extends Texture { + constructor(urls, dim) { + super(urls[0], dim, false); + + this.urls = urls; + + this.image = document.createElement('canvas'); + this.image.width = this.dim.w; + this.image.height = this.dim.h; + + this.load(this.urls, 0); + this.load(this.urls, 1); + } + + load(urls, part) { + let source = new Image(); + source.src = urls[part]; + source.addEventListener('load', () => { + switch (part) { + case 0: + for (let y = 0; y < this.dim.h; y += source.height) { + this.image.getContext('2d').drawImage(source, 0, y); + } + this.image.getContext('2d').save(); + this.image.getContext('2d').translate(source.width, 0); + this.image.getContext('2d').scale(-1, 1); + for (let y = 0; y < this.dim.h; y += source.height) { + this.image.getContext('2d').drawImage(source, source.width - this.dim.w, y); + } + this.image.getContext('2d').restore(); + break; + case 1: + for (let x = source.width; x < this.dim.w - source.width; x += source.width) { + for (let y = 0; y < this.dim.h; y += source.height) { + this.image.getContext('2d').drawImage(source, x, y); + } + } + break; + } + }); + } +} + +export { Sandwich }; \ No newline at end of file