From 7cd8ce1ac16e8b2c0176f652dfc0125fd5c5e66d Mon Sep 17 00:00:00 2001 From: LoveEevee Date: Thu, 15 Nov 2018 11:42:22 +0300 Subject: [PATCH] View: Add note explosions --- public/src/js/assets.js | 1 + public/src/js/canvasasset.js | 13 +++++++----- public/src/js/mekadon.js | 2 +- public/src/js/view.js | 17 +++++++++++---- public/src/js/viewassets.js | 40 ++++++++++++++++++++++++++++++++++++ 5 files changed, 63 insertions(+), 10 deletions(-) diff --git a/public/src/js/assets.js b/public/src/js/assets.js index f4aaaac..be6c88f 100644 --- a/public/src/js/assets.js +++ b/public/src/js/assets.js @@ -5,6 +5,7 @@ var assets = { "notes.png", "notes_drumroll.png", "notes_hit.png", + "notes_explosion.png", "balloon.png", "taiko.png", "dancing-don.gif", diff --git a/public/src/js/canvasasset.js b/public/src/js/canvasasset.js index 0e9fd1b..a4dfb1c 100644 --- a/public/src/js/canvasasset.js +++ b/public/src/js/canvasasset.js @@ -14,14 +14,16 @@ class CanvasAsset{ var u = (a, b) => typeof a === "undefined" ? b : a var frame = 0 var ms = this.controller.getElapsedTime() + var beatInterval = this.frameSpeed ? 1000 / 60 : this.beatInterval + if(this.animationEnd){ - if(ms > this.animationStart + this.animationEnd.frameCount * this.speed * this.beatInterval){ + if(ms > this.animationStart + this.animationEnd.frameCount * this.speed * beatInterval){ this.animationEnd.callback() this.animationEnd = false return this.draw() } } - var index = Math.floor((ms - this.animationStart) / (this.speed * this.beatInterval)) + var index = Math.floor((ms - this.animationStart) / (this.speed * beatInterval)) if(Array.isArray(this.animation)){ frame = this.animation[this.mod(this.animation.length, index)] }else{ @@ -74,8 +76,9 @@ class CanvasAsset{ return frames } } - setUpdateSpeed(speed){ + setUpdateSpeed(speed, frameSpeed){ this.speed = speed + this.frameSpeed = frameSpeed } setAnimationStart(ms){ this.animationStart = ms @@ -91,8 +94,8 @@ class CanvasAsset{ } } changeBeatInterval(beatMS, initial){ - var ms = this.controller.getElapsedTime() - if(!initial){ + if(!initial && !this.frameSpeed){ + var ms = this.controller.getElapsedTime() this.animationStart = ms - (ms - this.animationStart) / this.beatInterval * beatMS } this.beatInterval = beatMS diff --git a/public/src/js/mekadon.js b/public/src/js/mekadon.js index 1fd6f49..eaadde8 100644 --- a/public/src/js/mekadon.js +++ b/public/src/js/mekadon.js @@ -90,7 +90,7 @@ class Mekadon{ }else if(type === "drumroll" || type === "daiDrumroll"){ this.game.checkDrumroll(circle, score === 2) }else{ - this.controller.displayScore(score) + this.controller.displayScore(score, false, keyDai) this.game.updateCombo(score) this.game.updateGlobalScore(score, keyDai ? 2 : 1, circle.gogoTime) this.game.updateCurrentCircle() diff --git a/public/src/js/view.js b/public/src/js/view.js index 25e52d2..51505e0 100644 --- a/public/src/js/view.js +++ b/public/src/js/view.js @@ -58,9 +58,8 @@ if(this.controller.autoPlayEnabled){ this.touchDrumDiv.style.display = "none" - }else{ - pageEvents.add(this.canvas, "touchstart", this.ontouch.bind(this)) } + pageEvents.add(this.canvas, "touchstart", this.ontouch.bind(this)) this.gameDiv.classList.add("touch-visible") document.getElementById("version").classList.add("version-hide") @@ -727,7 +726,7 @@ ctx.restore() // Hit notes explosion - + this.assets.drawAssets("notes") // Good, OK, Bad if(scoreMS < 300){ @@ -1319,6 +1318,16 @@ this.currentScore.ms = this.getMS() this.currentScore.type = score this.currentScore.bigNote = bigNote + + if(score > 0){ + var explosion = this.assets.explosion + explosion.type = (bigNote ? 0 : 2) + (score === 450 ? 0 : 1) + explosion.setAnimation("normal") + explosion.setAnimationStart(this.getMS()) + explosion.setAnimationEnd(bigNote ? 14 : 7, () => { + explosion.setAnimation(false) + }) + } } } posToMs(pos, speed){ @@ -1362,7 +1371,7 @@ if(moveTo !== null){ this.pauseConfirm(moveTo) } - }else{ + }else if(!this.controller.autoPlayEnabled){ var pageX = touch.pageX * this.pixelRatio var pageY = touch.pageY * this.pixelRatio diff --git a/public/src/js/viewassets.js b/public/src/js/viewassets.js index 719cc18..425fcf3 100644 --- a/public/src/js/viewassets.js +++ b/public/src/js/viewassets.js @@ -5,6 +5,7 @@ class ViewAssets{ this.allAssets = [] this.ctx = this.view.ctx + // Background this.don = this.createAsset("background", frame => { var imgw = 360 var imgh = 184 @@ -55,6 +56,8 @@ class ViewAssets{ } this.don.addFrames("clear", 30, "don_anim_clear") this.don.normalAnimation() + + // Bar this.fire = this.createAsset("bar", frame => { var imgw = 360 var imgh = 370 @@ -87,6 +90,42 @@ class ViewAssets{ }) this.fire.addFrames("normal", 7, "fire_anim") this.fire.setUpdateSpeed(1 / 8) + + // Notes + this.explosion = this.createAsset("notes", frame => { + var w = 222 + var h = 222 + var mul = this.view.slotPos.size / 106 + this.ctx.globalCompositeOperation = "screen" + var alpha = 1 + if(this.explosion.type < 2){ + if(frame < 2){ + mul *= 1 - (frame + 1) * 0.2 + }else if(frame > 9){ + alpha = Math.max(0, 1 - (frame - 10) / 4) + } + }else if(frame > 5){ + alpha = 0.5 + } + if(alpha < 1 && !this.controller.touchEnabled){ + this.ctx.globalAlpha = alpha + } + return { + sx: this.explosion.type * w, + sy: Math.min(3, Math.floor(frame / 2)) * h, + sw: w, + sh: h, + x: this.view.slotPos.x - w * mul / 2, + y: this.view.slotPos.y - h * mul / 2, + w: w * mul, + h: h * mul + } + }) + this.explosion.type = null + this.explosion.addFrames("normal", 14, "notes_explosion") + this.explosion.setUpdateSpeed(1, true) + + // Foreground this.fireworks = [] for(let i = 0; i < 5 ; i++){ var fireworksAsset = this.createAsset("foreground", frame => { @@ -112,6 +151,7 @@ class ViewAssets{ fireworksAsset.setUpdateSpeed(1 / 16) this.fireworks.push(fireworksAsset) } + this.changeBeatInterval(this.view.beatInterval, true) } createAsset(layer, position){