nanahira/taiko-web
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Add Don-chan

Browse Source
This commit is contained in:
LoveEevee 2018-09-14 01:55:23 +03:00
parent a8b05df75e
commit 1d0fc88374
7 changed files with 167 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
public/index.html
View File

@ -46,6 +46,7 @@
<script src="/src/js/element.js"></script> <script src="/src/js/element.js"></script>
<script src="/src/js/soundbuffer.js"></script> <script src="/src/js/soundbuffer.js"></script>
<script src="/src/js/p2.js"></script> <script src="/src/js/p2.js"></script>
<script src="/src/js/canvasasset.js"></script>
</head> </head>
<body> <body>

3
public/src/js/assets.js
View File

@ -27,7 +27,8 @@ var assets = {
'muzu_normal.png', 'muzu_normal.png',
'muzu_hard.png', 'muzu_hard.png',
'muzu_oni.png', 'muzu_oni.png',
'don_anim_normal.png' 'don_anim_normal.png',
'don_anim_10combo.png'
], ],
audioSfx: [ audioSfx: [

94
public/src/js/canvasasset.js Normal file
View File

@ -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
}
}
}
}

2
public/src/js/game.js
View File

@ -372,6 +372,8 @@ function Game(controller, selectedSong, songData){
controller.playSoundMeka("combo-1400"); controller.playSoundMeka("combo-1400");
break; break;
} }
controller.view.updateCombo(_combo)
} }
this.getCombo = function(){ this.getCombo = function(){

2
public/src/js/mekadon.js
View File

@ -19,8 +19,6 @@ class Mekadon{
miss(circle){ miss(circle){
var currentMs = circle.getMS() - this.controller.getElapsedTime().ms var currentMs = circle.getMS() - this.controller.getElapsedTime().ms
if(0 > currentMs - 10){ if(0 > currentMs - 10){
circle.updateStatus(-1)
circle.played(0)
this.controller.displayScore(0, true) this.controller.displayScore(0, true)
this.game.updateCurrentCircle() this.game.updateCurrentCircle()
this.game.updateCombo(0) this.game.updateCombo(0)

4
public/src/js/p2.js
View File

@ -112,7 +112,7 @@ class P2Connection{
} }
} }
play(circle, mekadon){ play(circle, mekadon){
if(this.otherConnected){ if(this.otherConnected || this.notes.length > 0){
if(this.notes.length == 0){ if(this.notes.length == 0){
mekadon.play(circle) mekadon.play(circle)
}else{ }else{
@ -127,6 +127,8 @@ class P2Connection{
} }
} }
} }
}else if(mekadon.miss(circle)){
this.notes.shift()
} }
} }
} }

72
public/src/js/view.js
View File

@ -14,6 +14,9 @@ class View{
} }
this.winW = this.canvas.scaledWidth this.winW = this.canvas.scaledWidth
this.winH = this.canvas.scaledHeight this.winH = this.canvas.scaledHeight
if(this.controller.multiplayer == 2){
this.winH = this.winH / 2 * 3
}
this.ctx = this.canvas.ctx this.ctx = this.canvas.ctx
this.taikoSquareW = this.winW / 4 this.taikoSquareW = this.winW / 4
@ -36,14 +39,41 @@ class View{
this.songTitle = title this.songTitle = title
this.songDifficulty = this.diff.split(".").slice(0, -1).join(".") 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(){ run(){
this.ctx.font = "normal 14pt TnT" this.ctx.font = "normal 14pt TnT"
this.setBackground() this.setBackground()
$(".game-song").attr("alt", this.songTitle).html(this.songTitle) $(".game-song").attr("alt", this.songTitle).html(this.songTitle)
this.refresh() this.refresh()
} }
@ -71,16 +101,16 @@ class View{
this.barY = 0.25 * this.winH this.barY = 0.25 * this.winH
this.barH = 0.23 * this.winH this.barH = 0.23 * this.winH
this.lyricsBarH = 0.2 * this.barH this.lyricsBarH = 0.2 * this.barH
this.taikoSquareW = this.winW / 4
this.taikoH = this.barH this.taikoH = this.barH
this.taikoW = this.taikoH / 1.2 this.taikoW = this.taikoH / 1.2
this.taikoX = this.taikoSquareW * 0.76 - this.taikoW / 2 this.taikoX = this.taikoSquareW * 0.76 - this.taikoW / 2
this.taikoY = this.barY + 5 this.taikoY = this.barY + 5
this.taikoSquareW = this.winW / 4 this.slotX = this.taikoSquareW + this.barH * 0.5
this.slotX = this.taikoSquareW + this.barH * 0.45
this.scoreSquareW = this.taikoSquareW * 0.55 this.scoreSquareW = this.taikoSquareW * 0.55
this.scoreSquareH = this.barH * 0.25 this.scoreSquareH = this.barH * 0.25
this.circleSize = this.barH * 0.15 this.circleSize = this.barH * 0.18
this.bigCircleSize = this.barH * 0.25 this.bigCircleSize = this.circleSize * (5 / 3)
this.circleY = this.barY + (this.barH - this.lyricsBarH) / 2 this.circleY = this.barY + (this.barH - this.lyricsBarH) / 2
this.lyricsSize = this.lyricsBarH * 0.6 this.lyricsSize = this.lyricsBarH * 0.6
var HPBarRatio = 703 / 51 var HPBarRatio = 703 / 51
@ -111,6 +141,7 @@ class View{
this.ctx.clearRect(0, 0, this.canvas.scaledWidth, this.canvas.scaledHeight) this.ctx.clearRect(0, 0, this.canvas.scaledWidth, this.canvas.scaledHeight)
// Draw // Draw
this.drawAssets()
this.drawBar() this.drawBar()
this.drawSlot() this.drawSlot()
this.drawMeasures() this.drawMeasures()
@ -128,7 +159,7 @@ class View{
updateDonFaces(){ updateDonFaces(){
if(this.controller.getElapsedTime().ms >= this.nextBeat){ if(this.controller.getElapsedTime().ms >= this.nextBeat){
this.nextBeat += this.controller.getSongData().beatInfo.beatInterval this.nextBeat += this.beatInterval
if(this.controller.getCombo() >= 50){ if(this.controller.getCombo() >= 50){
this.currentBigDonFace = (this.currentBigDonFace + 1) % 2 this.currentBigDonFace = (this.currentBigDonFace + 1) % 2
this.currentDonFace = (this.currentDonFace + 1) % 2 this.currentDonFace = (this.currentDonFace + 1) % 2
@ -657,4 +688,31 @@ class View{
this.ctx.closePath() this.ctx.closePath()
this.ctx.stroke() 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")
})
}
}
} }