View: Rewrite
This commit is contained in:
LoveEevee
parent
ab2e3d2417
commit
f90f6fe6e1
@ -1,9 +1,10 @@
|
||||
#game{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: asbolute;
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
}
|
||||
#game.default-bg{
|
||||
background-size: calc(100vh / 720 * 512);
|
||||
@ -70,7 +71,7 @@
|
||||
#touch-buttons{
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 6.5vh;
|
||||
top: 8vh;
|
||||
right: 2vh;
|
||||
opacity: 0.5;
|
||||
z-index: 5;
|
||||
@ -79,6 +80,12 @@
|
||||
width: 12.5vmin;
|
||||
height: 12.5vmin;
|
||||
}
|
||||
.portrait #touch-buttons{
|
||||
top: 11vh;
|
||||
}
|
||||
.touchp2 #touch-buttons{
|
||||
top: -1.9vh;
|
||||
}
|
||||
.touch-visible #touch-drum,
|
||||
.touch-visible #touch-buttons{
|
||||
display: block;
|
||||
|
||||
@ -2,20 +2,11 @@ var assets = {
|
||||
"img": [
|
||||
"title-screen.png",
|
||||
"logo-big.png",
|
||||
"don-0.png",
|
||||
"don-1.png",
|
||||
"big-don-0.png",
|
||||
"big-don-1.png",
|
||||
"notes.png",
|
||||
"notes_drumroll.png",
|
||||
"notes_hit.png",
|
||||
"balloon.png",
|
||||
"taiko.png",
|
||||
"taiko-key-blue.png",
|
||||
"taiko-key-red.png",
|
||||
"hp-bar-bg.png",
|
||||
"hp-bar-colour.png",
|
||||
"score-0.png",
|
||||
"score-0-b.png",
|
||||
"score-230.png",
|
||||
"score-450.png",
|
||||
"dancing-don.gif",
|
||||
"bg-pattern-1.png",
|
||||
"muzu_easy.png",
|
||||
|
||||
@ -27,6 +27,7 @@ class CanvasAsset{
|
||||
}else{
|
||||
frame = this.mod(this.animation, index)
|
||||
}
|
||||
this.ctx.save()
|
||||
var pos = this.position(frame)
|
||||
if(this.image){
|
||||
this.ctx.drawImage(this.image,
|
||||
@ -35,9 +36,7 @@ class CanvasAsset{
|
||||
pos.x, pos.y, pos.w, pos.h
|
||||
)
|
||||
}
|
||||
if(pos.callback){
|
||||
pos.callback()
|
||||
}
|
||||
this.ctx.restore()
|
||||
}
|
||||
}
|
||||
mod(length, index){
|
||||
|
||||
@ -1,14 +1,17 @@
|
||||
class CanvasCache{
|
||||
constructor(w, h, scale){
|
||||
this.canvas = document.createElement("canvas")
|
||||
this.ctx = this.canvas.getContext("2d")
|
||||
this.map = new Map()
|
||||
if(w){
|
||||
this.resize(w, h, scale)
|
||||
}
|
||||
}
|
||||
resize(w, h, scale){
|
||||
this.map.clear()
|
||||
if(this.canvas){
|
||||
this.map.clear()
|
||||
}else{
|
||||
this.map = new Map()
|
||||
this.canvas = document.createElement("canvas")
|
||||
this.ctx = this.canvas.getContext("2d")
|
||||
}
|
||||
this.scale = scale
|
||||
this.x = 0
|
||||
this.y = 0
|
||||
@ -20,8 +23,11 @@ class CanvasCache{
|
||||
this.canvas.height = this.h * this.scale
|
||||
this.ctx.scale(this.scale, this.scale)
|
||||
}
|
||||
get(config, callback){
|
||||
get(config, callback, setOnly){
|
||||
var img = this.map.get(config.id)
|
||||
if(img && setOnly || !img && !callback){
|
||||
return
|
||||
}
|
||||
var saved = false
|
||||
if(!img){
|
||||
var w = config.w
|
||||
@ -50,6 +56,10 @@ class CanvasCache{
|
||||
|
||||
callback(this.ctx)
|
||||
}
|
||||
if(setOnly){
|
||||
this.ctx.restore()
|
||||
return
|
||||
}
|
||||
var z = this.scale
|
||||
config.ctx.drawImage(this.canvas,
|
||||
img.x * z |0, img.y * z |0, img.w * z |0, img.h * z |0,
|
||||
@ -59,6 +69,9 @@ class CanvasCache{
|
||||
this.ctx.restore()
|
||||
}
|
||||
}
|
||||
set(config, callback){
|
||||
return this.get(config, callback, true)
|
||||
}
|
||||
clean(){
|
||||
delete this.map
|
||||
delete this.ctx
|
||||
|
||||
@ -39,6 +39,13 @@
|
||||
|
||||
this.crownPath = new Path2D("m82 21c0-4 3-6 5.5-6 2.5 0 5.5 2 5.5 6 0 4-3 6-5.5 6C85 27 82 25 82 21ZM41.5 6c0-4 3-6 5.5-6 2.5 0 5.5 2 5.5 6 0 4-3 6-5.5 6-2.5 0-5.5-2-5.5-6zM1 21C1 17 4 15 6.5 15 9 15 12 17 12 21 12 25 9 27 6.5 27 4 27 1 25 1 21Zm12 46h68l2 11H11ZM13 62 5 18 29 34 47 6 65 34 89 18 81 62Z")
|
||||
|
||||
this.soulPath = new Path2D("m37 29c1-4 7 2 7 4 0 1-2 2-4 2-1 0-1-4-3-6zm-4-7c3 1 5 3 4 5-1 2-3 3-3 4 3-2 5-2 5-2 0 0-1 3-5 5-4 3-5-1-3-4 2-3 3-6 0-7zm-3 8c1 3-5 10 8 7 6-1 2-4 2-4 5 1 7 3 7 5 0 3-8 4-12 4-4 0-9-2-9-5 0 0 0-6-1-8 0-3 3-3 5 1zM20 23h8C27 27 20 44 9 42 18 36 23 28 21 26 19 24 20 23 20 23Zm0-6c4-2 9-4 14-2v2c-5 0-9 1-14 2zm8-7v12h-4c2-1 1-9-1-10zm-6 12c3 0 10-2 10-2 0 0 1-10 0-10-5 1-8 3-12 3 0 0 2 5 2 9zm0-12c0 0 6-1 9-3 3-2 9 3 8 6-1 3-2 6-4 9-2 2-15 2-15 2-1 0-3-7-2-11zM21 0c8 0 10 3 8 5 0 0-6 7-15 10C22 8 23 3 23 3 23 1 21 0 21 0ZM5 9c-1 3 2 6 4 6 5-1 13-6 4-7-3 0-5 5-8 1zm7 17c2-1 4-1 6 1 2 2 1 6-2 6-1 0-2-2-2-2-1-2-3-4-2-5zm2 4c-3 2-4 5-5 6-1 1-4 2-6-2-1-2 0-3 2-5l4-4c0-1-1 0-4 1-2 1-5-2-4-4 2-5 1 0 3-1 6-4 9-5 11-3 2 2 0 3-2 5-1 1-3 4-4 6 0 1 3-1 4-2")
|
||||
|
||||
this.optionsPath = {
|
||||
shadow: new Path2D("M4-1V8H9V0l1-1 3 6v4l-4 5v10l4 5v4l-2 4-2 1V30H4L5 37 3 38 0 33V29L4 24V14L0 9V5L3 0Z"),
|
||||
main: new Path2D("M4 0V8H9V0h1l3 5v4l-4 5v10l4 5v4l-3 5H9V30H4v8H3L0 33V29L4 24V14L0 9V5L3 0Z")
|
||||
}
|
||||
|
||||
this.regex = {
|
||||
comma: /[,.]/,
|
||||
ideographicComma: /[、。]/,
|
||||
@ -76,11 +83,25 @@
|
||||
var h = config.h
|
||||
var r = config.radius
|
||||
ctx.beginPath()
|
||||
ctx.arc(x + r, y + r, r, Math.PI, Math.PI * 1.5)
|
||||
ctx.arc(x + w - r, y + r, r, Math.PI * 1.5, 0)
|
||||
ctx.arc(x + w - r, y + h - r, r, 0, Math.PI / 2)
|
||||
ctx.arc(x + r, y + h - r, r, Math.PI / 2, Math.PI)
|
||||
ctx.lineTo(x, y + r)
|
||||
this.roundedCorner(ctx, x, y, r, 0)
|
||||
this.roundedCorner(ctx, x + w, y, r, 1)
|
||||
this.roundedCorner(ctx, x + w, y + h, r, 2)
|
||||
this.roundedCorner(ctx, x, y + h, r, 3)
|
||||
ctx.closePath()
|
||||
}
|
||||
|
||||
roundedCorner(ctx, x, y, r, rotation){
|
||||
var pi = Math.PI
|
||||
switch(rotation){
|
||||
case 0:
|
||||
return ctx.arc(x + r, y + r, r, pi, pi / -2)
|
||||
case 1:
|
||||
return ctx.arc(x - r, y + r, r, pi / -2, 0)
|
||||
case 2:
|
||||
return ctx.arc(x - r, y - r, r, 0, pi / 2)
|
||||
case 3:
|
||||
return ctx.arc(x + r, y - r, r, pi / 2, pi)
|
||||
}
|
||||
}
|
||||
|
||||
songFrame(config){
|
||||
@ -428,6 +449,9 @@
|
||||
}
|
||||
|
||||
ctx.translate(config.x, config.y)
|
||||
if(config.scale){
|
||||
ctx.scale(config.scale[0], config.scale[1])
|
||||
}
|
||||
var scale = 1
|
||||
if(config.width && drawnWidth > config.width){
|
||||
scale = config.width / drawnWidth
|
||||
@ -438,7 +462,13 @@
|
||||
ctx.textAlign = "center"
|
||||
|
||||
for(let layer of layers){
|
||||
var savedLayer = false
|
||||
var action = "strokeText"
|
||||
if(layer.scale){
|
||||
savedLayer = true
|
||||
ctx.save()
|
||||
ctx.scale(layer.scale[0], layer.scale[1])
|
||||
}
|
||||
if(layer.outline){
|
||||
ctx.strokeStyle = layer.outline
|
||||
ctx.lineJoin = "round"
|
||||
@ -452,7 +482,10 @@
|
||||
action = "fillText"
|
||||
}
|
||||
if(layer.shadow){
|
||||
ctx.save()
|
||||
if(!savedLayer){
|
||||
savedLayer = true
|
||||
ctx.save()
|
||||
}
|
||||
this.shadow({
|
||||
ctx: ctx,
|
||||
fill: "rgba(0, 0, 0, " + (1 / (layer.shadow[3] || 2)) + ")",
|
||||
@ -501,7 +534,7 @@
|
||||
}
|
||||
offsetX += symbol.w * mul
|
||||
}
|
||||
if(layer.shadow){
|
||||
if(savedLayer){
|
||||
ctx.restore()
|
||||
}
|
||||
}
|
||||
@ -538,42 +571,59 @@
|
||||
diffOptionsIcon(config){
|
||||
var ctx = config.ctx
|
||||
ctx.save()
|
||||
ctx.translate(config.x - 21, config.y - 21)
|
||||
|
||||
var drawLine = y => {
|
||||
ctx.beginPath()
|
||||
ctx.moveTo(12, y)
|
||||
ctx.arc(20.5, 25, 8.5, Math.PI, Math.PI * 2, true)
|
||||
ctx.lineTo(29, 18)
|
||||
ctx.stroke()
|
||||
}
|
||||
var drawTriangle = noFill => {
|
||||
ctx.beginPath()
|
||||
ctx.moveTo(29, 5)
|
||||
ctx.lineTo(21, 19)
|
||||
ctx.lineTo(37, 19)
|
||||
ctx.closePath()
|
||||
if(!noFill){
|
||||
ctx.fill()
|
||||
if(config.iconName === "back"){
|
||||
ctx.translate(config.x - 21, config.y - 21)
|
||||
|
||||
var drawLine = y => {
|
||||
ctx.beginPath()
|
||||
ctx.moveTo(12, y)
|
||||
ctx.arc(20.5, 25, 8.5, Math.PI, Math.PI * 2, true)
|
||||
ctx.lineTo(29, 18)
|
||||
ctx.stroke()
|
||||
}
|
||||
var drawTriangle = noFill => {
|
||||
ctx.beginPath()
|
||||
ctx.moveTo(29, 5)
|
||||
ctx.lineTo(21, 19)
|
||||
ctx.lineTo(37, 19)
|
||||
ctx.closePath()
|
||||
if(!noFill){
|
||||
ctx.fill()
|
||||
}
|
||||
}
|
||||
ctx.strokeStyle = "#000"
|
||||
ctx.lineWidth = 12
|
||||
drawLine(9)
|
||||
ctx.lineWidth = 5
|
||||
drawTriangle(true)
|
||||
ctx.stroke()
|
||||
ctx.lineWidth = 7
|
||||
ctx.fillStyle = "#fff"
|
||||
ctx.strokeStyle = "#fff"
|
||||
drawLine(11)
|
||||
drawTriangle()
|
||||
ctx.translate(-1.5, -0.5)
|
||||
ctx.fillStyle = "#23a6e1"
|
||||
ctx.strokeStyle = "#23a6e1"
|
||||
ctx.globalCompositeOperation = "darken"
|
||||
drawLine(11)
|
||||
drawTriangle()
|
||||
}else if(config.iconName === "options"){
|
||||
ctx.translate(config.x, config.y)
|
||||
ctx.rotate(-55 * Math.PI / 180)
|
||||
ctx.translate(-6, -20)
|
||||
ctx.strokeStyle = "#000"
|
||||
ctx.lineWidth = 6
|
||||
ctx.stroke(this.optionsPath.main)
|
||||
ctx.translate(-2, 2)
|
||||
ctx.stroke(this.optionsPath.main)
|
||||
ctx.fillStyle = "#7e7c76"
|
||||
ctx.fill(this.optionsPath.shadow)
|
||||
ctx.translate(2, -2)
|
||||
ctx.fillStyle = "#d9d6ce"
|
||||
ctx.fill(this.optionsPath.main)
|
||||
}
|
||||
ctx.strokeStyle = "#000"
|
||||
ctx.lineWidth = 12
|
||||
drawLine(9)
|
||||
ctx.lineWidth = 5
|
||||
drawTriangle(true)
|
||||
ctx.stroke()
|
||||
ctx.lineWidth = 7
|
||||
ctx.fillStyle = "#fff"
|
||||
ctx.strokeStyle = "#fff"
|
||||
drawLine(11)
|
||||
drawTriangle()
|
||||
ctx.translate(-1.5, -0.5)
|
||||
ctx.fillStyle = "#23a6e1"
|
||||
ctx.strokeStyle = "#23a6e1"
|
||||
ctx.globalCompositeOperation = "darken"
|
||||
drawLine(11)
|
||||
drawTriangle()
|
||||
|
||||
ctx.restore()
|
||||
}
|
||||
@ -676,9 +726,13 @@
|
||||
ctx.scale(1 / mul, 1 / mul)
|
||||
}
|
||||
ctx.fillStyle = ctx.createPattern(config.img, "repeat")
|
||||
ctx.beginPath()
|
||||
ctx.rect(config.x * mul, config.y * mul, config.w * mul, config.h * mul)
|
||||
ctx.translate(config.dx, config.dy)
|
||||
if(config.shape){
|
||||
config.shape(ctx, mul)
|
||||
}else{
|
||||
ctx.beginPath()
|
||||
ctx.rect(config.x * mul, config.y * mul, config.w * mul, config.h * mul)
|
||||
}
|
||||
ctx.translate(config.dx * mul, config.dy * mul)
|
||||
ctx.fill()
|
||||
|
||||
ctx.restore()
|
||||
@ -692,6 +746,9 @@
|
||||
if(config.scale){
|
||||
ctx.scale(config.scale, config.scale)
|
||||
}
|
||||
if(config.align === "center"){
|
||||
ctx.translate(config.score === "bad" ? -49 / 2 : -23 / 2, 0)
|
||||
}
|
||||
ctx.strokeStyle = "#000"
|
||||
ctx.lineWidth = 7
|
||||
if(config.score === "good"){
|
||||
@ -790,6 +847,160 @@
|
||||
ctx.restore()
|
||||
}
|
||||
|
||||
gauge(config){
|
||||
var ctx = config.ctx
|
||||
ctx.save()
|
||||
|
||||
ctx.translate(config.x, config.y)
|
||||
if(config.scale){
|
||||
ctx.scale(config.scale, config.scale)
|
||||
}
|
||||
ctx.translate(-788, 0)
|
||||
|
||||
var firstTop = config.multiplayer ? 0 : 30
|
||||
var secondTop = config.multiplayer ? 0 : 8
|
||||
|
||||
var cleared = config.percentage - 1 / 50 >= config.clear
|
||||
|
||||
var gaugeW = 14 * 50
|
||||
var gaugeClear = gaugeW * config.clear
|
||||
var gaugeFilled = gaugeW * config.percentage
|
||||
|
||||
ctx.fillStyle = "#000"
|
||||
ctx.beginPath()
|
||||
if(config.scoresheet){
|
||||
ctx.moveTo(-4, 26)
|
||||
ctx.lineTo(gaugeClear - 4, 26)
|
||||
this.roundedCorner(ctx, gaugeClear - 4, 4, 13, 0)
|
||||
this.roundedCorner(ctx, 760, 4, 13, 1)
|
||||
ctx.lineTo(760, 56)
|
||||
ctx.lineTo(-4, 56)
|
||||
}else if(config.multiplayer){
|
||||
ctx.moveTo(gaugeClear - 7, 27)
|
||||
ctx.lineTo(788, 27)
|
||||
ctx.lineTo(788, 52)
|
||||
this.roundedCorner(ctx, gaugeClear - 7, 52, 18, 3)
|
||||
}else{
|
||||
ctx.moveTo(gaugeClear - 7, 24)
|
||||
this.roundedCorner(ctx, gaugeClear - 7, 0, 18, 0)
|
||||
ctx.lineTo(788, 0)
|
||||
ctx.lineTo(788, 24)
|
||||
}
|
||||
ctx.fill()
|
||||
|
||||
if(gaugeFilled <= gaugeClear){
|
||||
ctx.fillStyle = "#680000"
|
||||
var x = Math.max(0, gaugeFilled - 5)
|
||||
ctx.fillRect(x, firstTop, gaugeClear - x + 2, 22)
|
||||
}
|
||||
if(gaugeFilled > 0){
|
||||
var w = Math.min(gaugeClear + 1, gaugeFilled - 4)
|
||||
ctx.fillStyle = "#ff3508"
|
||||
ctx.fillRect(0, firstTop + 2, w, 20)
|
||||
ctx.fillStyle = "#ff9e94"
|
||||
ctx.fillRect(0, firstTop, w, 3)
|
||||
}
|
||||
if(gaugeFilled < gaugeW - 4){
|
||||
ctx.fillStyle = "#684c00"
|
||||
var x = Math.max(gaugeClear + 9, gaugeFilled - gaugeClear + 9)
|
||||
ctx.fillRect(x, secondTop, gaugeW - 4 - x, 44)
|
||||
}
|
||||
if(gaugeFilled > gaugeClear + 14){
|
||||
var w = Math.min(gaugeW - 4, gaugeFilled - gaugeClear - 14)
|
||||
ctx.fillStyle = "#ff0"
|
||||
ctx.fillRect(gaugeClear + 9, secondTop + 2, w, 42)
|
||||
ctx.fillStyle = "#fff"
|
||||
ctx.fillRect(gaugeClear + 9, secondTop, w, 3)
|
||||
}
|
||||
ctx.fillStyle = cleared ? "#ff0" : "#684c00"
|
||||
ctx.beginPath()
|
||||
if(config.multiplayer){
|
||||
this.roundedCorner(ctx, gaugeClear, secondTop + 44, 10, 3)
|
||||
ctx.lineTo(gaugeClear, secondTop)
|
||||
ctx.lineTo(gaugeClear + 10, secondTop)
|
||||
}else{
|
||||
ctx.moveTo(gaugeClear, secondTop + 44)
|
||||
this.roundedCorner(ctx, gaugeClear, secondTop, 10, 0)
|
||||
ctx.lineTo(gaugeClear + 10, secondTop + 44)
|
||||
}
|
||||
ctx.fill()
|
||||
if(cleared){
|
||||
ctx.save()
|
||||
ctx.clip()
|
||||
ctx.fillStyle = "#fff"
|
||||
ctx.fillRect(gaugeClear, secondTop, 10, 3)
|
||||
ctx.restore()
|
||||
}
|
||||
|
||||
ctx.strokeStyle = "rgba(0, 0, 0, 0.16)"
|
||||
ctx.beginPath()
|
||||
ctx.lineWidth = 5
|
||||
for(var i = 0; i < 49; i++){
|
||||
var x = 14 + i * 14 - ctx.lineWidth / 2
|
||||
if(i === 26){
|
||||
ctx.stroke()
|
||||
ctx.beginPath()
|
||||
ctx.lineWidth = 4
|
||||
}
|
||||
ctx.moveTo(x, x < gaugeClear ? firstTop : secondTop)
|
||||
ctx.lineTo(x, x < gaugeClear ? firstTop + 22 : secondTop + 44)
|
||||
}
|
||||
ctx.stroke()
|
||||
this.layeredText({
|
||||
ctx: ctx,
|
||||
text: "クリア",
|
||||
fontSize: 18,
|
||||
fontFamily: config.font,
|
||||
x: gaugeClear - 6,
|
||||
y: config.multiplayer ? 22 : 11,
|
||||
letterSpacing: -2
|
||||
}, [
|
||||
{scale: [1.1, 1.01], outline: "#000", letterBorder: 6},
|
||||
{scale: [1.11, 1], fill: cleared ? "#fff" : "#737373"}
|
||||
])
|
||||
|
||||
ctx.restore()
|
||||
}
|
||||
|
||||
soul(config){
|
||||
var ctx = config.ctx
|
||||
ctx.save()
|
||||
|
||||
ctx.translate(config.x, config.y)
|
||||
if(config.scale){
|
||||
ctx.scale(config.scale, config.scale)
|
||||
}
|
||||
ctx.translate(-23, -21)
|
||||
|
||||
ctx.fillStyle = config.cleared ? "#fff" : "#737373"
|
||||
ctx.fill(this.soulPath)
|
||||
|
||||
ctx.restore()
|
||||
}
|
||||
|
||||
slot(ctx, x, y, size){
|
||||
var mul = size / 106
|
||||
|
||||
ctx.save()
|
||||
ctx.globalAlpha = 0.7
|
||||
ctx.globalCompositeOperation = "screen"
|
||||
ctx.fillStyle = "#444544"
|
||||
ctx.beginPath()
|
||||
ctx.arc(x, y, 26 * mul, 0, Math.PI * 2)
|
||||
ctx.fill()
|
||||
ctx.lineWidth = 3
|
||||
ctx.strokeStyle = "#9c9e9c"
|
||||
ctx.beginPath()
|
||||
ctx.arc(x, y, 33.5 * mul, 0, Math.PI * 2)
|
||||
ctx.stroke()
|
||||
ctx.lineWidth = 3.5
|
||||
ctx.strokeStyle = "#5d5e5d"
|
||||
ctx.beginPath()
|
||||
ctx.arc(x, y, 51.5 * mul, 0, Math.PI * 2)
|
||||
ctx.stroke()
|
||||
ctx.restore()
|
||||
}
|
||||
|
||||
alpha(amount, ctx, callback){
|
||||
if(amount >= 1){
|
||||
return callback(ctx)
|
||||
|
||||
@ -81,6 +81,17 @@ class Controller{
|
||||
if(this.syncWith){
|
||||
this.syncWith.mainLoop()
|
||||
}
|
||||
|
||||
if(this.scoresheet){
|
||||
if(this.view.ctx){
|
||||
this.view.ctx.save()
|
||||
this.view.ctx.setTransform(1, 0, 0, 1, 0, 0)
|
||||
}
|
||||
this.scoresheet.redraw()
|
||||
if(this.view.ctx){
|
||||
this.view.ctx.restore()
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
var ms = this.game.elapsedTime
|
||||
@ -104,10 +115,6 @@ class Controller{
|
||||
this.view.refresh()
|
||||
}
|
||||
this.keyboard.checkMenuKeys()
|
||||
|
||||
if(this.scoresheet){
|
||||
this.scoresheet.redraw()
|
||||
}
|
||||
}
|
||||
}
|
||||
togglePauseMenu(){
|
||||
@ -117,11 +124,13 @@ class Controller{
|
||||
gameEnded(){
|
||||
var score = this.getGlobalScore()
|
||||
var vp
|
||||
if(score.bad === 0){
|
||||
vp = "fullcombo"
|
||||
this.playSoundMeka("fullcombo", 1.350)
|
||||
}else if(score.gauge >= 50){
|
||||
vp = "clear"
|
||||
if(Math.round(score.gauge / 2) - 1 >= 25){
|
||||
if(score.bad === 0){
|
||||
vp = "fullcombo"
|
||||
this.playSoundMeka("fullcombo", 1.350)
|
||||
}else{
|
||||
vp = "clear"
|
||||
}
|
||||
}else{
|
||||
vp = "fail"
|
||||
}
|
||||
@ -132,8 +141,8 @@ class Controller{
|
||||
this.scoresheet = new Scoresheet(this, this.getGlobalScore(), this.multiplayer)
|
||||
}
|
||||
}
|
||||
displayScore(score, notPlayed){
|
||||
this.view.displayScore(score, notPlayed)
|
||||
displayScore(score, notPlayed, bigNote){
|
||||
this.view.displayScore(score, notPlayed, bigNote)
|
||||
}
|
||||
songSelection(fadeIn){
|
||||
if(!fadeIn){
|
||||
|
||||
@ -117,6 +117,10 @@ class Debug{
|
||||
break
|
||||
}
|
||||
}
|
||||
if(game.mainMusicPlaying){
|
||||
game.mainMusicPlaying = false
|
||||
game.mainAsset.stop()
|
||||
}
|
||||
}
|
||||
this.autoplayCheckbox.checked = this.controller.autoPlayEnabled
|
||||
}
|
||||
|
||||
@ -1,49 +0,0 @@
|
||||
function element(){
|
||||
var parent
|
||||
var lasttag
|
||||
var createdtag
|
||||
var toreturn={}
|
||||
for(var i=0;i<arguments.length;i++){
|
||||
var current=arguments[i]
|
||||
if(current){
|
||||
if(current.nodeType){
|
||||
parent=lasttag=current
|
||||
}else if(Array.isArray(current)){
|
||||
lasttag=parent
|
||||
for(var j=0;j<current.length;j++){
|
||||
if(current[j]){
|
||||
if(j==0&&typeof current[j]=="string"){
|
||||
var tagname=current[0].split("#")
|
||||
lasttag=createdtag=document.createElement(tagname[0])
|
||||
if(tagname[1]){
|
||||
toreturn[tagname[1]]=createdtag
|
||||
}
|
||||
}else if(current[j].constructor==Object){
|
||||
if(lasttag){
|
||||
for(var value in current[j]){
|
||||
if(value!="style"&&value in lasttag){
|
||||
lasttag[value]=current[j][value]
|
||||
}else{
|
||||
lasttag.setAttribute(value,current[j][value])
|
||||
}
|
||||
}
|
||||
}
|
||||
}else{
|
||||
var returned=element(lasttag,current[j])
|
||||
for(var k in returned){
|
||||
toreturn[k]=returned[k]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}else if(current){
|
||||
createdtag=document.createTextNode(current)
|
||||
}
|
||||
if(parent&&createdtag){
|
||||
parent.appendChild(createdtag)
|
||||
}
|
||||
createdtag=0
|
||||
}
|
||||
}
|
||||
return toreturn
|
||||
}
|
||||
@ -116,9 +116,6 @@ class Game{
|
||||
}
|
||||
}
|
||||
}
|
||||
setHPGain(gain){
|
||||
this.HPGain = gain
|
||||
}
|
||||
checkPlays(){
|
||||
var circles = this.songData.circles
|
||||
var circle = circles[this.currentCircle]
|
||||
@ -200,14 +197,15 @@ class Game{
|
||||
if(circleStatus === 230 || circleStatus === 450){
|
||||
score = circleStatus
|
||||
}
|
||||
this.controller.displayScore(score)
|
||||
circle.played(score, score === 0 ? typeDai : keyDai)
|
||||
this.controller.displayScore(score, false, typeDai && keyDai)
|
||||
}else{
|
||||
this.controller.displayScore(score, true)
|
||||
circle.played(-1, typeDai)
|
||||
this.controller.displayScore(score, true, false)
|
||||
}
|
||||
this.updateCombo(score)
|
||||
this.updateGlobalScore(score, typeDai && keyDai ? 2 : 1, circle.gogoTime)
|
||||
this.updateCurrentCircle()
|
||||
circle.played(score, score === 0 ? typeDai : keyDai)
|
||||
if(this.controller.multiplayer == 1){
|
||||
p2.send("note", {
|
||||
score: score,
|
||||
|
||||
@ -111,7 +111,7 @@ class Keyboard{
|
||||
this.controller.togglePauseMenu()
|
||||
for(var key in this.keyTime){
|
||||
this.keys[key] = null
|
||||
this.keyTime[key] = null
|
||||
this.keyTime[key] = -Infinity
|
||||
}
|
||||
})
|
||||
var moveMenuMinus = () => {
|
||||
|
||||
@ -94,7 +94,7 @@ class loadSong{
|
||||
this.clean()
|
||||
loader.changePage("game")
|
||||
var taikoGame1 = new Controller(this.selectedSong, this.songData, false, 1, this.touchEnabled)
|
||||
var taikoGame2 = new Controller(this.selectedSong2, this.song2Data, true, 2)
|
||||
var taikoGame2 = new Controller(this.selectedSong2, this.song2Data, true, 2, this.touchEnabled)
|
||||
taikoGame1.run(taikoGame2)
|
||||
}
|
||||
})
|
||||
|
||||
@ -1,42 +0,0 @@
|
||||
class ScalableCanvas{
|
||||
constructor(id, width, height, noStyle){
|
||||
var oldCanvas = document.getElementById(id)
|
||||
if(oldCanvas){
|
||||
this.canvas = oldCanvas
|
||||
}else{
|
||||
this.canvas = document.createElement("canvas")
|
||||
this.canvas.id = id
|
||||
}
|
||||
this.ctx = this.canvas.getContext("2d")
|
||||
this.rescale()
|
||||
this.resize(width, height, noStyle)
|
||||
}
|
||||
resize(width, height, noStyle){
|
||||
if(width != this.width || height != this.height){
|
||||
this.width = width
|
||||
this.height = height
|
||||
this.scaledWidth = width * this.scale
|
||||
this.canvas.width = this.scaledWidth
|
||||
this.scaledHeight = height * this.scale
|
||||
this.canvas.height = this.scaledHeight
|
||||
if(noStyle || this.scale == 1){
|
||||
if(this.canvas.style.width){
|
||||
this.canvas.style.width = ""
|
||||
}
|
||||
if(this.canvas.style.height){
|
||||
this.canvas.style.height = ""
|
||||
}
|
||||
}else{
|
||||
this.canvas.style.width = width + "px"
|
||||
this.canvas.style.height = height + "px"
|
||||
}
|
||||
}
|
||||
}
|
||||
rescale(){
|
||||
var scale = window.devicePixelRatio || 1
|
||||
if(scale != this.scale){
|
||||
this.ctx.scale(scale, scale)
|
||||
this.scale = scale
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -416,16 +416,25 @@ class Scoresheet{
|
||||
results = p2.results
|
||||
ctx.translate(0, p2Offset)
|
||||
}
|
||||
ctx.drawImage(assets.image["hp-bar-bg"],
|
||||
552, 120, 688, 48
|
||||
)
|
||||
var gauge = results.gauge / 100
|
||||
if(gauge > 0){
|
||||
ctx.drawImage(assets.image["hp-bar-colour"],
|
||||
0, 0, 650 * gauge, 40,
|
||||
557, 127, 635 * gauge, 37,
|
||||
)
|
||||
}
|
||||
var gaugePercent = Math.round(results.gauge / 2) / 50
|
||||
var w = 712
|
||||
this.draw.gauge({
|
||||
ctx: ctx,
|
||||
x: 558 + w,
|
||||
y: 116,
|
||||
clear: 25 / 50,
|
||||
percentage: gaugePercent,
|
||||
font: this.font,
|
||||
scale: w / 788,
|
||||
scoresheet: true
|
||||
})
|
||||
this.draw.soul({
|
||||
ctx: ctx,
|
||||
x: 1215,
|
||||
y: 144,
|
||||
scale: 36 / 42,
|
||||
cleared: gaugePercent - 1 / 50 >= 25 / 50
|
||||
})
|
||||
}
|
||||
ctx.restore()
|
||||
}
|
||||
@ -441,10 +450,8 @@ class Scoresheet{
|
||||
results = p2.results
|
||||
}
|
||||
var crownType = null
|
||||
if(results.bad === "0"){
|
||||
crownType = "gold"
|
||||
}else if(results.gauge >= 50){
|
||||
crownType = "silver"
|
||||
if(Math.round(results.gauge / 2) - 1 >= 25){
|
||||
crownType = results.bad === "0" ? "gold" : "silver"
|
||||
}
|
||||
if(crownType !== null){
|
||||
noCrownResultWait = 0;
|
||||
|
||||
@ -156,6 +156,21 @@ class SongSelect{
|
||||
letterBorder: 12
|
||||
}
|
||||
|
||||
this.diffOptions = [{
|
||||
text: "もどる",
|
||||
fill: "#efb058",
|
||||
iconName: "back",
|
||||
iconFill: "#f7d39c",
|
||||
letterSpacing: 4
|
||||
}, {
|
||||
text: "演奏オプション",
|
||||
fill: "#b2e442",
|
||||
iconName: "options",
|
||||
iconFill: "#d9f19f",
|
||||
letterSpacing: 0
|
||||
}]
|
||||
this.optionsList = ["なし", "オート", "ネットプレイ"]
|
||||
|
||||
this.draw = new CanvasDraw()
|
||||
this.songTitleCache = new CanvasCache()
|
||||
this.selectTextCache = new CanvasCache()
|
||||
@ -185,7 +200,7 @@ class SongSelect{
|
||||
this.playBgm(false)
|
||||
}
|
||||
if("selectedDiff" in localStorage){
|
||||
this.selectedDiff = Math.min(Math.max(0, localStorage["selectedDiff"] |0), 4)
|
||||
this.selectedDiff = Math.min(Math.max(0, localStorage["selectedDiff"] |0), this.diffOptions.length + 3)
|
||||
}
|
||||
|
||||
this.songSelect = document.getElementById("song-select")
|
||||
@ -202,7 +217,8 @@ class SongSelect{
|
||||
ura: 0,
|
||||
moveHover: null,
|
||||
locked: true,
|
||||
hasPointer: false
|
||||
hasPointer: false,
|
||||
options: 0
|
||||
}
|
||||
this.songSelecting = {
|
||||
speed: 800,
|
||||
@ -218,6 +234,8 @@ class SongSelect{
|
||||
"8": ["a"],
|
||||
"37": ["l", "lb", "lt", "lsl"],
|
||||
"39": ["r", "rb", "rt", "lsr"],
|
||||
"38": ["u", "lsu"],
|
||||
"40": ["d", "lsd"],
|
||||
"ctrl": ["y"],
|
||||
"shift": ["x"]
|
||||
})
|
||||
@ -259,10 +277,14 @@ class SongSelect{
|
||||
// Enter, Space, F, J
|
||||
cancel: code == 27 || code == 8,
|
||||
// Esc, Backspace
|
||||
left: code == 68,
|
||||
left: code == 37 || code == 68,
|
||||
// Left, D
|
||||
right: code == 75
|
||||
right: code == 39 || code == 75,
|
||||
// Right, K
|
||||
up: code == 38,
|
||||
// Up
|
||||
down: code == 40
|
||||
// Down
|
||||
}
|
||||
if(key.cancel && event){
|
||||
event.preventDefault()
|
||||
@ -281,8 +303,10 @@ class SongSelect{
|
||||
if(key.confirm){
|
||||
if(this.selectedDiff === 0){
|
||||
this.toSongSelect()
|
||||
}else if(this.selectedDiff === 1){
|
||||
this.toOptions(1)
|
||||
}else{
|
||||
this.toLoadSong(this.selectedDiff - 1, modifiers.shift, modifiers.ctrl)
|
||||
this.toLoadSong(this.selectedDiff - this.diffOptions.length, modifiers.shift, modifiers.ctrl)
|
||||
}
|
||||
}else if(key.cancel){
|
||||
this.toSongSelect()
|
||||
@ -290,6 +314,8 @@ class SongSelect{
|
||||
this.moveToDiff(-1)
|
||||
}else if(key.right){
|
||||
this.moveToDiff(1)
|
||||
}else if(this.selectedDiff === 1 && (key.up || key.down)){
|
||||
this.toOptions(key.up ? -1 : 1)
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -319,20 +345,21 @@ class SongSelect{
|
||||
}
|
||||
}else if(this.state.screen === "difficulty"){
|
||||
var moveBy = this.diffSelMouse(mouse.x, mouse.y)
|
||||
if(
|
||||
moveBy === 0
|
||||
|| mouse.x < 55 || mouse.x > 967
|
||||
|| mouse.y < 40 || mouse.y > 540
|
||||
){
|
||||
if(mouse.x < 55 || mouse.x > 967 || mouse.y < 40 || mouse.y > 540){
|
||||
this.toSongSelect()
|
||||
}else if(moveBy === 5){
|
||||
}else if(moveBy === 0){
|
||||
this.selectedDiff = 0
|
||||
this.toSongSelect()
|
||||
}else if(moveBy === 1){
|
||||
this.toOptions(1)
|
||||
}else if(moveBy === this.diffOptions.length + 4){
|
||||
this.state.ura = !this.state.ura
|
||||
assets.sounds["ka"].play()
|
||||
if(this.selectedDiff === 5 && !this.state.ura){
|
||||
if(this.selectedDiff === this.diffOptions.length + 4 && !this.state.ura){
|
||||
this.state.move = -1
|
||||
}
|
||||
}else if(moveBy !== null){
|
||||
this.toLoadSong(moveBy - 1, shift, ctrl, touch)
|
||||
this.toLoadSong(moveBy - this.diffOptions.length, shift, ctrl, touch)
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -393,12 +420,12 @@ class SongSelect{
|
||||
}
|
||||
diffSelMouse(x, y){
|
||||
if(this.state.locked === 0){
|
||||
if(100 < x && x < 160 && 120 < y && y < 420){
|
||||
return 0
|
||||
if(95 < x && x < 239 && 118 < y && y < 422){
|
||||
return Math.floor((x - 95) / ((239 - 95) / 2))
|
||||
}else if(422 < x && x < 922 && 95 < y && y < 524){
|
||||
var moveBy = Math.floor((x - 422) / ((922 - 422) / 5)) + 1
|
||||
var moveBy = Math.floor((x - 422) / ((922 - 422) / 5)) + this.diffOptions.length
|
||||
var currentSong = this.songs[this.selectedSong]
|
||||
if(this.state.ura && moveBy === 4 || currentSong.stars[moveBy - 1]){
|
||||
if(this.state.ura && moveBy === this.diffOptions + 3 || currentSong.stars[moveBy - this.diffOptions.length]){
|
||||
return moveBy
|
||||
}
|
||||
}
|
||||
@ -451,8 +478,8 @@ class SongSelect{
|
||||
this.state.locked = true
|
||||
this.state.moveHover = null
|
||||
this.state.ura = 0
|
||||
if(this.selectedDiff === 5){
|
||||
this.selectedDiff = 4
|
||||
if(this.selectedDiff === this.diffOptions.length + 4){
|
||||
this.selectedDiff = this.diffOptions.length + 3
|
||||
}
|
||||
|
||||
assets.sounds["don"].play()
|
||||
@ -497,11 +524,22 @@ class SongSelect{
|
||||
assets.sounds["don"].play()
|
||||
|
||||
localStorage["selectedSong"] = this.selectedSong
|
||||
localStorage["selectedDiff"] = difficulty + 1
|
||||
localStorage["selectedDiff"] = difficulty + this.diffOptions.length
|
||||
|
||||
if(difficulty === 3 && this.state.ura){
|
||||
difficulty = 4
|
||||
}
|
||||
var autoplay = false
|
||||
var multiplayer = false
|
||||
if(this.state.options === 1){
|
||||
autoplay = true
|
||||
}else if(this.state.options === 2){
|
||||
multiplayer = true
|
||||
}else if(shift){
|
||||
autoplay = shift
|
||||
}else{
|
||||
multiplayer = ctrl
|
||||
}
|
||||
|
||||
new loadSong({
|
||||
"title": selectedSong.title,
|
||||
@ -510,7 +548,12 @@ class SongSelect{
|
||||
"category": selectedSong.category,
|
||||
"type": selectedSong.type,
|
||||
"offset": selectedSong.offset
|
||||
}, shift, ctrl, touch)
|
||||
}, autoplay, multiplayer, touch)
|
||||
}
|
||||
toOptions(moveBy){
|
||||
assets.sounds["ka"].play()
|
||||
this.selectedDiff = 1
|
||||
this.state.options = this.mod(this.optionsList.length, this.state.options + moveBy)
|
||||
}
|
||||
toTitleScreen(){
|
||||
assets.sounds["cancel"].play()
|
||||
@ -745,25 +788,25 @@ class SongSelect{
|
||||
do{
|
||||
if(hasUra && this.state.move > 0){
|
||||
this.selectedDiff += this.state.move
|
||||
if(this.selectedDiff > 5){
|
||||
if(this.selectedDiff > this.diffOptions.length + 4){
|
||||
this.state.ura = !this.state.ura
|
||||
if(this.state.ura){
|
||||
this.selectedDiff = previousSelection === 4 ? 5 : previousSelection
|
||||
this.selectedDiff = previousSelection === this.diffOptions.length + 3 ? this.diffOptions.length + 4 : previousSelection
|
||||
break
|
||||
}else{
|
||||
this.state.move = -1
|
||||
}
|
||||
}
|
||||
}else{
|
||||
this.selectedDiff = this.mod(6, this.selectedDiff + this.state.move)
|
||||
this.selectedDiff = this.mod(this.diffOptions.length + 5, this.selectedDiff + this.state.move)
|
||||
}
|
||||
}while(
|
||||
this.selectedDiff !== 0 && !currentSong.stars[this.selectedDiff - 1]
|
||||
|| this.selectedDiff === 4 && this.state.ura
|
||||
|| this.selectedDiff === 5 && !this.state.ura
|
||||
this.selectedDiff >= this.diffOptions.length && !currentSong.stars[this.selectedDiff - this.diffOptions.length]
|
||||
|| this.selectedDiff === this.diffOptions.length + 3 && this.state.ura
|
||||
|| this.selectedDiff === this.diffOptions.length + 4 && !this.state.ura
|
||||
)
|
||||
this.state.move = 0
|
||||
}else if(!currentSong.stars[this.selectedDiff - 1]){
|
||||
}else if(this.selectedDiff < 0 || this.selectedDiff >= this.diffOptions.length && !currentSong.stars[this.selectedDiff - this.diffOptions.length]){
|
||||
this.selectedDiff = 0
|
||||
}
|
||||
}
|
||||
@ -897,70 +940,80 @@ class SongSelect{
|
||||
})
|
||||
var opened = 1
|
||||
var songSel = false
|
||||
var _x = x + 62
|
||||
var _y = y + 67
|
||||
ctx.fillStyle = "#efb058"
|
||||
ctx.lineWidth = 5
|
||||
this.draw.roundedRect({
|
||||
ctx: ctx,
|
||||
x: _x - 28,
|
||||
y: _y,
|
||||
w: 56,
|
||||
h: 298,
|
||||
radius: 24
|
||||
})
|
||||
ctx.fill()
|
||||
ctx.stroke()
|
||||
ctx.fillStyle = "#f7d39c"
|
||||
ctx.beginPath()
|
||||
ctx.arc(_x, _y + 28, 20, 0, Math.PI * 2)
|
||||
ctx.fill()
|
||||
this.draw.diffOptionsIcon({
|
||||
ctx: ctx,
|
||||
x: _x,
|
||||
y: _y + 28
|
||||
})
|
||||
|
||||
this.draw.verticalText({
|
||||
ctx: ctx,
|
||||
text: "もどる",
|
||||
x: _x,
|
||||
y: _y + 57,
|
||||
width: 56,
|
||||
height: 220,
|
||||
fill: "#fff",
|
||||
outline: "#000",
|
||||
outlineSize: this.songAsset.letterBorder,
|
||||
letterBorder: 4,
|
||||
fontSize: 28,
|
||||
fontFamily: this.font,
|
||||
letterSpacing: 4
|
||||
})
|
||||
var highlight = 0
|
||||
if(this.state.moveHover === 0){
|
||||
highlight = 2
|
||||
}else if(this.selectedDiff === 0){
|
||||
highlight = 1
|
||||
}
|
||||
if(highlight){
|
||||
this.draw.highlight({
|
||||
for(var i = 0; i < this.diffOptions.length; i++){
|
||||
var _x = x + 62 + i * 72
|
||||
var _y = y + 67
|
||||
ctx.fillStyle = this.diffOptions[i].fill
|
||||
ctx.lineWidth = 5
|
||||
this.draw.roundedRect({
|
||||
ctx: ctx,
|
||||
x: _x - 32,
|
||||
y: _y - 3,
|
||||
w: 64,
|
||||
h: 304,
|
||||
animate: highlight === 1,
|
||||
animateMS: this.state.moveMS,
|
||||
opacity: highlight === 2 ? 0.8 : 1,
|
||||
x: _x - 28,
|
||||
y: _y,
|
||||
w: 56,
|
||||
h: 298,
|
||||
radius: 24
|
||||
})
|
||||
if(this.selectedDiff === 0){
|
||||
this.draw.diffCursor({
|
||||
ctx.fill()
|
||||
ctx.stroke()
|
||||
ctx.fillStyle = this.diffOptions[i].iconFill
|
||||
ctx.beginPath()
|
||||
ctx.arc(_x, _y + 28, 20, 0, Math.PI * 2)
|
||||
ctx.fill()
|
||||
this.draw.diffOptionsIcon({
|
||||
ctx: ctx,
|
||||
x: _x,
|
||||
y: _y + 28,
|
||||
iconName: this.diffOptions[i].iconName
|
||||
})
|
||||
|
||||
var text = this.diffOptions[i].text
|
||||
if(this.diffOptions[i].iconName === "options" && (this.selectedDiff === i || this.state.options !== 0)){
|
||||
text = this.optionsList[this.state.options]
|
||||
}
|
||||
|
||||
this.draw.verticalText({
|
||||
ctx: ctx,
|
||||
text: text,
|
||||
x: _x,
|
||||
y: _y + 57,
|
||||
width: 56,
|
||||
height: 220,
|
||||
fill: "#fff",
|
||||
outline: "#000",
|
||||
outlineSize: this.songAsset.letterBorder,
|
||||
letterBorder: 4,
|
||||
fontSize: 28,
|
||||
fontFamily: this.font,
|
||||
letterSpacing: this.diffOptions[i].letterSpacing
|
||||
})
|
||||
|
||||
var highlight = 0
|
||||
if(this.state.moveHover === i){
|
||||
highlight = 2
|
||||
}else if(this.selectedDiff === i){
|
||||
highlight = 1
|
||||
}
|
||||
if(highlight){
|
||||
this.draw.highlight({
|
||||
ctx: ctx,
|
||||
font: this.font,
|
||||
x: _x,
|
||||
y: _y - 45
|
||||
x: _x - 32,
|
||||
y: _y - 3,
|
||||
w: 64,
|
||||
h: 304,
|
||||
animate: highlight === 1,
|
||||
animateMS: this.state.moveMS,
|
||||
opacity: highlight === 2 ? 0.8 : 1,
|
||||
radius: 24
|
||||
})
|
||||
if(this.selectedDiff === i && !this.touchEnabled){
|
||||
this.draw.diffCursor({
|
||||
ctx: ctx,
|
||||
font: this.font,
|
||||
x: _x,
|
||||
y: _y - 45
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1057,8 +1110,8 @@ class SongSelect{
|
||||
})
|
||||
}
|
||||
}
|
||||
var currentDiff = this.selectedDiff - 1
|
||||
if(this.selectedDiff === 5){
|
||||
var currentDiff = this.selectedDiff - this.diffOptions.length
|
||||
if(this.selectedDiff === 4 + this.diffOptions.length){
|
||||
currentDiff = 3
|
||||
}
|
||||
if(i === currentSong.p2Cursor){
|
||||
@ -1074,12 +1127,12 @@ class SongSelect{
|
||||
}
|
||||
if(!songSel){
|
||||
var highlight = 0
|
||||
if(this.state.moveHover - 1 === i){
|
||||
if(this.state.moveHover - this.diffOptions.length === i){
|
||||
highlight = 2
|
||||
}else if(currentDiff === i){
|
||||
highlight = 1
|
||||
}
|
||||
if(currentDiff === i){
|
||||
if(currentDiff === i && !this.touchEnabled){
|
||||
this.draw.diffCursor({
|
||||
ctx: ctx,
|
||||
font: this.font,
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -9,17 +9,17 @@ class ViewAssets{
|
||||
var imgw = 360
|
||||
var imgh = 184
|
||||
var scale = 165
|
||||
var w = (this.view.barH * imgw) / scale
|
||||
var h = (this.view.barH * imgh) / scale
|
||||
var w = imgw
|
||||
var h = imgh
|
||||
return {
|
||||
sx: Math.floor(frame / 10) * imgw,
|
||||
sy: (frame % 10) * imgh,
|
||||
sy: (frame % 10) * imgh + 1,
|
||||
sw: imgw,
|
||||
sh: imgh,
|
||||
x: this.view.taikoSquareW - w + this.view.barH * 0.2,
|
||||
y: this.view.barY - h,
|
||||
sh: imgh - 1,
|
||||
x: view.portrait ? -60 : 0,
|
||||
y: view.portrait ? (view.multiplayer === 2 ? 560 : 35) : (view.multiplayer === 2 ? 360 : 2),
|
||||
w: w,
|
||||
h: h
|
||||
h: h - 1
|
||||
}
|
||||
})
|
||||
this.don.addFrames("normal", [
|
||||
@ -41,7 +41,7 @@ class ViewAssets{
|
||||
var length = this.don.getAnimationLength("gogo")
|
||||
this.don.setUpdateSpeed(4 / length)
|
||||
this.don.setAnimation("gogo")
|
||||
}else if(this.controller.getGlobalScore().gauge >= 50){
|
||||
}else if(Math.round(this.controller.getGlobalScore().gauge / 2) - 1 >= 25){
|
||||
this.don.setAnimationStart(0)
|
||||
var length = this.don.getAnimationLength("clear")
|
||||
this.don.setUpdateSpeed(2 / length)
|
||||
@ -58,31 +58,31 @@ class ViewAssets{
|
||||
this.fire = this.createAsset("bar", frame => {
|
||||
var imgw = 360
|
||||
var imgh = 370
|
||||
var scale = 175
|
||||
var ms = this.controller.getElapsedTime()
|
||||
var scale = 130
|
||||
var ms = this.view.getMS()
|
||||
var elapsed = ms - this.view.gogoTimeStarted
|
||||
|
||||
var mul = this.view.slotPos.size / 106
|
||||
var barH = 130 * mul
|
||||
|
||||
if(this.view.gogoTime){
|
||||
var grow = 3 - Math.min(200, elapsed) / 100
|
||||
this.ctx.globalAlpha = Math.min(200, elapsed) / 200
|
||||
}else{
|
||||
var grow = 1 - Math.min(100, elapsed) / 100
|
||||
}
|
||||
var w = (this.view.barH * imgw) / scale * grow
|
||||
var h = (this.view.barH * imgh) / scale * grow
|
||||
var w = (barH * imgw) / scale * grow
|
||||
var h = (barH * imgh) / scale * grow
|
||||
this.ctx.globalCompositeOperation = "lighter"
|
||||
return {
|
||||
sx: frame * imgw,
|
||||
sy: 0,
|
||||
sw: imgw,
|
||||
sh: imgh,
|
||||
x: this.view.slotX - w / 2,
|
||||
y: this.view.circleY - h / 2,
|
||||
x: this.view.slotPos.x - w / 2,
|
||||
y: this.view.slotPos.y - h / 2,
|
||||
w: w,
|
||||
h: h,
|
||||
callback: () => {
|
||||
this.ctx.globalCompositeOperation = "source-over"
|
||||
this.ctx.globalAlpha = 1
|
||||
}
|
||||
h: h
|
||||
}
|
||||
})
|
||||
this.fire.addFrames("normal", 7, "fire_anim")
|
||||
@ -93,15 +93,17 @@ class ViewAssets{
|
||||
var imgw = 230
|
||||
var imgh = 460
|
||||
var scale = 165
|
||||
var w = (this.view.barH * imgw) / scale
|
||||
var h = (this.view.barH * imgh) / scale
|
||||
var w = imgw
|
||||
var h = imgh
|
||||
var winW = this.view.winW / this.view.ratio
|
||||
var winH = this.view.winH / this.view.ratio
|
||||
return {
|
||||
sx: Math.floor(frame / 4) * imgw,
|
||||
sy: (frame % 4) * imgh,
|
||||
sw: imgw,
|
||||
sh: imgh,
|
||||
x: this.view.winW / 4 * i - w / 2 * (i / 2),
|
||||
y: this.view.winH - h,
|
||||
x: winW / 4 * i - w / 2 * (i / 2),
|
||||
y: winH - h,
|
||||
w: w,
|
||||
h: h
|
||||
}
|
||||
@ -118,13 +120,11 @@ class ViewAssets{
|
||||
return asset
|
||||
}
|
||||
drawAssets(layer){
|
||||
if(this.controller.multiplayer !== 2 || layer === "bar"){
|
||||
this.allAssets.forEach(asset => {
|
||||
if(layer === asset.layer){
|
||||
asset.draw()
|
||||
}
|
||||
})
|
||||
}
|
||||
this.allAssets.forEach(asset => {
|
||||
if(layer === asset.layer){
|
||||
asset.draw()
|
||||
}
|
||||
})
|
||||
}
|
||||
changeBeatInterval(beatMS, initial){
|
||||
this.allAssets.forEach(asset => {
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
<div id="game">
|
||||
<h3 alt="" class="stroke-sub game-song"></h3>
|
||||
<div id="touch-drum">
|
||||
<img id="touch-drum-img" src="/assets/img/touch_drum.png">
|
||||
</div>
|
||||
|
||||
@ -39,8 +39,6 @@
|
||||
<script src="/src/js/mekadon.js?{{version.commit_short}}"></script>
|
||||
<script src="/src/js/gamepad.js?{{version.commit_short}}"></script>
|
||||
<script src="/src/js/tutorial.js?{{version.commit_short}}"></script>
|
||||
<script src="/src/js/scalablecanvas.js?{{version.commit_short}}"></script>
|
||||
<script src="/src/js/element.js?{{version.commit_short}}"></script>
|
||||
<script src="/src/js/soundbuffer.js?{{version.commit_short}}"></script>
|
||||
<script src="/src/js/p2.js?{{version.commit_short}}"></script>
|
||||
<script src="/src/js/canvasasset.js?{{version.commit_short}}"></script>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user