diff --git a/Makefile b/Makefile index 5f6e195..891221a 100644 --- a/Makefile +++ b/Makefile @@ -7,6 +7,7 @@ www/js/escalator.js: $(shell find src -name "*.js") src/utils.js \ src/screen.js \ src/gui.js \ + src/sprite.js \ src/collectable.js \ src/scene.js \ src/box.js \ diff --git a/src/collectable.js b/src/collectable.js index 644bc7f..dcbfdfd 100644 --- a/src/collectable.js +++ b/src/collectable.js @@ -1,21 +1,53 @@ -class Collectable { +class Collectable extends AnimatedSprite { + constructor(x, y) { + super(Collectable.texture, 14); this.size = 0.1; + this.width = this.height = this.size; this.x = x; this.y = y; this.collected = false; - - this.frameNumber = 0; - this.maxFrame = 14; + this.maxTimer = 30; } update(time = 0.02) { - this.frameNumber++; - - if (this.frameNumber >= this.maxFrame) { - this.frameNumber = 0; + if (!this.collected) { + super.update(time); + } else { + this.textTimer += time * 50; } } + + collect() { + this.collected = true; + this.textTimer = 0; + } + + drawOn(canvas, context) { + if (!this.collected) { + super.drawOn(canvas, context); + } else if (this.textTimer < this.maxTimer) { + this.drawTextOn(canvas, context); + } + } + + alphaFromTimer() { + return 1 - this.textTimer / this.maxTimer; + } + + drawTextOn(canvas, context) { + context.font = "15px Dimbo"; + context.fillStyle = 'rgba(0, 200, 0, ' + this.alphaFromTimer() + ')'; + + let width = context.measureText("+1").width; + + context.fillText("+1", + this.x * canvas.width - width / 2, + (1 - this.y) * canvas.height - this.textTimer + ); + + } + } Collectable.texture = new Image(); diff --git a/src/scene.js b/src/scene.js index fa52030..a667830 100644 --- a/src/scene.js +++ b/src/scene.js @@ -179,7 +179,7 @@ class Scene extends Screen { || (collectable.y + collectable.size / 2 <= next.y - next.size / 4)) { } else { - collectable.collected = true; + collectable.collect(); this.getCollectable(1); } } @@ -230,18 +230,7 @@ class Scene extends Screen { } drawCollectable(object) { - - if (!object.collected) { - let size = object.size * this.width(); - - this.context.drawImage( - Collectable.texture, - 0, 64 * object.frameNumber, 64, 64, - (object.x - object.size / 2) * this.width(), - (1 - object.y) * this.height() - size / 2, - size, size - ); - } + object.drawOn(this.canvas, this.context); } drawHighScoreLine() { diff --git a/src/sprite.js b/src/sprite.js new file mode 100644 index 0000000..0619513 --- /dev/null +++ b/src/sprite.js @@ -0,0 +1,42 @@ +class Sprite { + constructor(spriteSheet) { + this.spriteSheet = spriteSheet; + } + + drawOn(canvas, context) { + context.drawImage( + this.spriteSheet, + 0, 0, 64, 64, + (this.x - this.width / 2) * canvas.width, + (1 - this.y) * canvas.height - this.height * canvas.width / 2, + this.width, + this.height, + ); + } +} + +class AnimatedSprite extends Sprite { + constructor(spriteSheet, numberOfFrames) { + super(spriteSheet); + this.numberOfFrames = numberOfFrames; + this.currentFrame = 0; + } + + update(time = 0.02) { + this.currentFrame++; + if (this.currentFrame >= this.numberOfFrames) { + this.currentFrame = 0; + } + } + + drawOn(canvas, context) { + context.drawImage( + this.spriteSheet, + 0, 64 * this.currentFrame, 64, 64, + (this.x - this.width / 2) * canvas.width, + (1 - this.y) * canvas.height - this.height * canvas.width / 2, + this.width * canvas.width, + this.height * canvas.width, + ); + } +}