From 1d0fc88374075d26dbfdbb098714bc0299680f60 Mon Sep 17 00:00:00 2001 From: LoveEevee Date: Fri, 14 Sep 2018 01:55:23 +0300 Subject: [PATCH] Add Don-chan --- public/index.html | 1 + public/src/js/assets.js | 3 +- public/src/js/canvasasset.js | 94 ++++++++++++++++++++++++++++++++++++ public/src/js/game.js | 2 + public/src/js/mekadon.js | 2 - public/src/js/p2.js | 4 +- public/src/js/view.js | 72 ++++++++++++++++++++++++--- 7 files changed, 167 insertions(+), 11 deletions(-) create mode 100644 public/src/js/canvasasset.js diff --git a/public/index.html b/public/index.html index 8fdeb7f..6c35a2f 100644 --- a/public/index.html +++ b/public/index.html @@ -46,6 +46,7 @@ + diff --git a/public/src/js/assets.js b/public/src/js/assets.js index 4d74296..2fa85d6 100644 --- a/public/src/js/assets.js +++ b/public/src/js/assets.js @@ -27,7 +27,8 @@ var assets = { 'muzu_normal.png', 'muzu_hard.png', 'muzu_oni.png', - 'don_anim_normal.png' + 'don_anim_normal.png', + 'don_anim_10combo.png' ], audioSfx: [ diff --git a/public/src/js/canvasasset.js b/public/src/js/canvasasset.js new file mode 100644 index 0000000..4c4f989 --- /dev/null +++ b/public/src/js/canvasasset.js @@ -0,0 +1,94 @@ +class CanvasAsset{ + constructor(view, position, image){ + this.ctx = view.ctx + this.controller = view.controller + if(image){ + this.image = assets.image[image] + } + this.position = position + this.animationFrames = {} + this.speed = 1000 / 60 + this.animationStart = 0 + } + draw(){ + var u = (a, b) => typeof a == "undefined" ? b : a + var frame = 0 + if(this.animation){ + var ms = this.controller.getElapsedTime().ms + if(this.animationEnd){ + if(ms > this.animationEnd.ms){ + this.animationEnd.callback() + delete this.animationEnd + return this.draw() + } + } + var index = Math.floor((ms - this.animationStart) / this.speed) + if(Array.isArray(this.animation)){ + frame = this.animation[this.boundedIndex(this.animation.length, index)] + }else{ + frame = this.boundedIndex(this.animation, index) + } + } + var pos = this.position(frame) + if(this.image){ + this.ctx.drawImage(this.image, + u(pos.sx, pos.x), u(pos.sy, pos.y), + u(pos.sw, pos.w), u(pos.sh, pos.h), + pos.x, pos.y, pos.w, pos.h + ) + } + } + boundedIndex(length, index){ + if(length == 0){ + return + } + while(index < length){ + index += length + } + return index % length + } + addFrames(name, frames, image){ + var framesObj = { + frames: frames + } + if(image){ + framesObj.image = assets.image[image] + } + this.animationFrames[name] = framesObj + } + setAnimation(name){ + var framesObj = this.animationFrames[name] + this.animation = framesObj.frames + this.animationName = name + if(framesObj.image){ + this.image = framesObj.image + } + } + getAnimation(){ + return this.animationName + } + getAnimationLength(){ + var frames = this.animationFrames["10combo"].frames + if(Array.isArray(frames)){ + return frames.length + }else{ + return frames + } + } + setUpdateSpeed(speed){ + this.speed = speed + } + setAnimationStart(ms){ + this.animationStart = ms + } + setAnimationEnd(ms, callback){ + if(typeof ms == "undefined"){ + delete this.animationEnd + }else{ + this.animationEnd = { + ms: ms, + callback: callback + } + } + } +} diff --git a/public/src/js/game.js b/public/src/js/game.js index 24fcc68..fbfe763 100644 --- a/public/src/js/game.js +++ b/public/src/js/game.js @@ -372,6 +372,8 @@ function Game(controller, selectedSong, songData){ controller.playSoundMeka("combo-1400"); break; } + + controller.view.updateCombo(_combo) } this.getCombo = function(){ diff --git a/public/src/js/mekadon.js b/public/src/js/mekadon.js index 3ef38d9..ecbd330 100644 --- a/public/src/js/mekadon.js +++ b/public/src/js/mekadon.js @@ -19,8 +19,6 @@ class Mekadon{ miss(circle){ var currentMs = circle.getMS() - this.controller.getElapsedTime().ms if(0 > currentMs - 10){ - circle.updateStatus(-1) - circle.played(0) this.controller.displayScore(0, true) this.game.updateCurrentCircle() this.game.updateCombo(0) diff --git a/public/src/js/p2.js b/public/src/js/p2.js index 137c595..ee346d1 100644 --- a/public/src/js/p2.js +++ b/public/src/js/p2.js @@ -112,7 +112,7 @@ class P2Connection{ } } play(circle, mekadon){ - if(this.otherConnected){ + if(this.otherConnected || this.notes.length > 0){ if(this.notes.length == 0){ mekadon.play(circle) }else{ @@ -127,6 +127,8 @@ class P2Connection{ } } } + }else if(mekadon.miss(circle)){ + this.notes.shift() } } } diff --git a/public/src/js/view.js b/public/src/js/view.js index 02cceae..b7fc73c 100644 --- a/public/src/js/view.js +++ b/public/src/js/view.js @@ -14,6 +14,9 @@ class View{ } this.winW = this.canvas.scaledWidth this.winH = this.canvas.scaledHeight + if(this.controller.multiplayer == 2){ + this.winH = this.winH / 2 * 3 + } this.ctx = this.canvas.ctx this.taikoSquareW = this.winW / 4 @@ -36,14 +39,41 @@ class View{ this.songTitle = title this.songDifficulty = this.diff.split(".").slice(0, -1).join(".") + + this.beatInterval = this.controller.getSongData().beatInfo.beatInterval + this.assets = [] + this.don = this.createAsset(frame => { + var imgw = 360 + var imgh = 184 + var scale = 165 + var w = (this.barH * imgw) / scale + var h = (this.barH * imgh) / scale + return { + sx: 0, + sy: frame * imgh, + sw: imgw, + sh: imgh, + x: this.taikoSquareW - w + this.barH * 0.2, + y: this.barY - h, + w: w, + h: h + } + }) + this.don.addFrames("normal", [ + 0 ,0 ,0 ,0 ,1 ,2 ,3 ,4 ,5 ,6 ,6 ,5 ,4 ,3 ,2 ,1 , + 0 ,0 ,0 ,0 ,1 ,2 ,3 ,4 ,5 ,6 ,6 ,5 ,4 ,3 ,2 ,1 , + 0 ,0 ,0 ,0 ,1 ,2 ,3 ,4 ,5 ,6 ,6 ,5 ,7 ,8 ,9 ,10, + 11,11,11,11,10,9 ,8 ,7 ,13,12,12,13,14,15,16,17 + ], "don_anim_normal") + this.don.addFrames("10combo", 22, "don_anim_10combo") + this.don.setAnimation("normal") + this.don.setUpdateSpeed(this.beatInterval / 16) } run(){ this.ctx.font = "normal 14pt TnT" this.setBackground() - $(".game-song").attr("alt", this.songTitle).html(this.songTitle) - this.refresh() } @@ -71,16 +101,16 @@ class View{ this.barY = 0.25 * this.winH this.barH = 0.23 * this.winH this.lyricsBarH = 0.2 * this.barH + this.taikoSquareW = this.winW / 4 this.taikoH = this.barH this.taikoW = this.taikoH / 1.2 this.taikoX = this.taikoSquareW * 0.76 - this.taikoW / 2 this.taikoY = this.barY + 5 - this.taikoSquareW = this.winW / 4 - this.slotX = this.taikoSquareW + this.barH * 0.45 + this.slotX = this.taikoSquareW + this.barH * 0.5 this.scoreSquareW = this.taikoSquareW * 0.55 this.scoreSquareH = this.barH * 0.25 - this.circleSize = this.barH * 0.15 - this.bigCircleSize = this.barH * 0.25 + this.circleSize = this.barH * 0.18 + this.bigCircleSize = this.circleSize * (5 / 3) this.circleY = this.barY + (this.barH - this.lyricsBarH) / 2 this.lyricsSize = this.lyricsBarH * 0.6 var HPBarRatio = 703 / 51 @@ -111,6 +141,7 @@ class View{ this.ctx.clearRect(0, 0, this.canvas.scaledWidth, this.canvas.scaledHeight) // Draw + this.drawAssets() this.drawBar() this.drawSlot() this.drawMeasures() @@ -128,7 +159,7 @@ class View{ updateDonFaces(){ if(this.controller.getElapsedTime().ms >= this.nextBeat){ - this.nextBeat += this.controller.getSongData().beatInfo.beatInterval + this.nextBeat += this.beatInterval if(this.controller.getCombo() >= 50){ this.currentBigDonFace = (this.currentBigDonFace + 1) % 2 this.currentDonFace = (this.currentDonFace + 1) % 2 @@ -657,4 +688,31 @@ class View{ this.ctx.closePath() this.ctx.stroke() } + + createAsset(image, position){ + var asset = new CanvasAsset(this, image, position) + this.assets.push(asset) + return asset + } + + drawAssets(){ + if(this.controller.multiplayer != 2){ + this.assets.forEach(asset => { + asset.draw() + }) + } + } + + updateCombo(combo){ + if(combo > 0 && combo % 10 == 0 && this.don.getAnimation() != "10combo"){ + this.don.setAnimation("10combo") + var ms = this.controller.getElapsedTime().ms + this.don.setAnimationStart(ms) + var length = this.don.getAnimationLength("10combo") + this.don.setAnimationEnd(ms + length * this.don.speed, () => { + this.don.setAnimationStart(0) + this.don.setAnimation("normal") + }) + } + } }