Fix drumroll, pressed keys, pause menu, hide cursor
This commit is contained in:
LoveEevee
parent
0a62088d62
commit
772dac579f
@ -4,14 +4,12 @@
|
||||
overflow: hidden;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
#canvas{
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#pause-menu{
|
||||
display: none;
|
||||
width: 100%;
|
||||
@ -22,25 +20,29 @@
|
||||
background: rgba(0, 0, 0, 0.75);
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
#pause-menu button{
|
||||
|
||||
width: 90%;
|
||||
height: 25%;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
cursor: pointer;
|
||||
border:.5vmin solid #ae7a26;
|
||||
background: rgb(255, 255, 255);
|
||||
color: black;
|
||||
background: #fff;
|
||||
color: #000;
|
||||
font-family: TnT;
|
||||
font-size: 3.5vmin;
|
||||
border-radius: 1.5vmin;
|
||||
}
|
||||
|
||||
#pause-menu button:hover{
|
||||
border-color:#fa5d3a;
|
||||
color:white;
|
||||
background:#0c6577;
|
||||
}
|
||||
|
||||
#cursor{
|
||||
position: fixed;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
cursor: none;
|
||||
pointer-events: none;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
@ -11,7 +11,7 @@ class CanvasAsset{
|
||||
this.animationStart = 0
|
||||
}
|
||||
draw(){
|
||||
var u = (a, b) => typeof a == "undefined" ? b : a
|
||||
var u = (a, b) => typeof a === "undefined" ? b : a
|
||||
var frame = 0
|
||||
if(this.animation){
|
||||
var ms = this.controller.getElapsedTime().ms
|
||||
@ -24,9 +24,9 @@ class CanvasAsset{
|
||||
}
|
||||
var index = Math.floor((ms - this.animationStart) / this.speed)
|
||||
if(Array.isArray(this.animation)){
|
||||
frame = this.animation[this.boundedIndex(this.animation.length, index)]
|
||||
frame = this.animation[this.mod(this.animation.length, index)]
|
||||
}else{
|
||||
frame = this.boundedIndex(this.animation, index)
|
||||
frame = this.mod(this.animation, index)
|
||||
}
|
||||
}
|
||||
var pos = this.position(frame)
|
||||
@ -38,14 +38,8 @@ class CanvasAsset{
|
||||
)
|
||||
}
|
||||
}
|
||||
boundedIndex(length, index){
|
||||
if(length == 0){
|
||||
return
|
||||
}
|
||||
while(index < length){
|
||||
index += length
|
||||
}
|
||||
return index % length
|
||||
mod(length, index){
|
||||
return ((index % length) + length) % length
|
||||
}
|
||||
addFrames(name, frames, image){
|
||||
var framesObj = {
|
||||
@ -82,7 +76,7 @@ class CanvasAsset{
|
||||
this.animationStart = ms
|
||||
}
|
||||
setAnimationEnd(ms, callback){
|
||||
if(typeof ms == "undefined"){
|
||||
if(typeof ms === "undefined"){
|
||||
delete this.animationEnd
|
||||
}else{
|
||||
this.animationEnd = {
|
||||
|
||||
@ -39,8 +39,8 @@ class Controller{
|
||||
}
|
||||
}
|
||||
loadUIEvents(){
|
||||
this.continueBtn = document.getElementById("song-selection-butt")
|
||||
this.restartBtn = document.getElementById("song-selection-butt")
|
||||
this.continueBtn = document.getElementById("continue-butt")
|
||||
this.restartBtn = document.getElementById("restart-butt")
|
||||
this.songSelBtn = document.getElementById("song-selection-butt")
|
||||
pageEvents.add(this.continueBtn, "click", () => {
|
||||
this.togglePauseMenu()
|
||||
|
||||
@ -91,7 +91,9 @@ class Keyboard{
|
||||
}else{
|
||||
assets.sounds["note_" + sound].play()
|
||||
}
|
||||
this.keyTime[sound] = this.controller.getElapsedTime().ms
|
||||
var ms = this.controller.getElapsedTime().ms
|
||||
this.keyTime[keyCode] = ms
|
||||
this.keyTime[sound] = ms
|
||||
})
|
||||
}
|
||||
getKeys(){
|
||||
|
||||
@ -2,8 +2,10 @@ class PageEvents{
|
||||
constructor(){
|
||||
this.allEvents = new Map()
|
||||
this.keyListeners = new Map()
|
||||
this.mouseListeners = new Map()
|
||||
this.add(window, "keydown", this.keyEvent.bind(this))
|
||||
this.add(window, "keyup", this.keyEvent.bind(this))
|
||||
this.add(window, "mousemove", this.mouseEvent.bind(this))
|
||||
}
|
||||
add(target, type, callback){
|
||||
this.remove(target, type)
|
||||
@ -112,4 +114,17 @@ class PageEvents{
|
||||
})
|
||||
})
|
||||
}
|
||||
mouseEvent(event){
|
||||
this.lastMouse = event
|
||||
this.mouseListeners.forEach(callback => callback(event))
|
||||
}
|
||||
mouseAdd(target, callback){
|
||||
this.mouseListeners.set(target, callback)
|
||||
}
|
||||
mouseRemove(target){
|
||||
this.mouseListeners.delete(target)
|
||||
}
|
||||
getMouse(){
|
||||
return this.lastMouse
|
||||
}
|
||||
}
|
||||
|
||||
@ -112,7 +112,7 @@ class ParseSong{
|
||||
if(msOrPercent < 0){
|
||||
var sliderMultiplier = this.difficulty.lastMultiplier / Math.abs(msOrPercent / 100)
|
||||
}else{
|
||||
var sliderMultiplier = 500 / msOrPercent
|
||||
var sliderMultiplier = 1000 / msOrPercent
|
||||
if(i == 0){
|
||||
this.difficulty.originalMultiplier = sliderMultiplier
|
||||
}
|
||||
@ -250,7 +250,7 @@ class ParseSong{
|
||||
|
||||
var extras = values.slice(this.osu.EXTRAS)
|
||||
var pixelLength = parseFloat(extras[this.osu.PIXELLENGTH])
|
||||
var endTime = start + pixelLength / (this.difficulty.originalMultiplier * 100) * this.beatInfo.beatInterval
|
||||
var endTime = start + pixelLength / (speed * 100) * this.beatInfo.beatInterval
|
||||
if(hitSound & this.osu.FINISH){
|
||||
type = "daiDrumroll"
|
||||
txt = "連打(大)ーっ!!"
|
||||
@ -261,14 +261,14 @@ class ParseSong{
|
||||
circles.push(new Circle(circleID, start, type, txt, speed, endTime))
|
||||
|
||||
}else if(osuType & this.osu.CIRCLE){
|
||||
|
||||
var type
|
||||
var txt
|
||||
|
||||
if(hitSound & this.osu.FINISH){
|
||||
if(hitSound & this.osu.WHISTLE || hitSound & this.osu.CLAP){
|
||||
type = "daiKa"
|
||||
txt = "カッ(大)"
|
||||
}else if(hitSound & this.osu.NORMAL || hitSound == this.osu.FINISH){
|
||||
}else if(hitSound & this.osu.NORMAL || hitSound === this.osu.FINISH){
|
||||
type = "daiDon"
|
||||
txt = "ドン(大)"
|
||||
}else{
|
||||
@ -277,7 +277,7 @@ class ParseSong{
|
||||
}else if(hitSound & this.osu.WHISTLE || hitSound & this.osu.CLAP){
|
||||
type = "ka"
|
||||
txt = "カッ"
|
||||
}else if(hitSound & this.osu.NORMAL || hitSound == 0){
|
||||
}else if(hitSound & this.osu.NORMAL || hitSound === 0){
|
||||
type = "don"
|
||||
txt = "ドン"
|
||||
}else{
|
||||
@ -286,7 +286,6 @@ class ParseSong{
|
||||
if(!emptyValue){
|
||||
circles.push(new Circle(circleID, start, type, txt, speed))
|
||||
}
|
||||
|
||||
}else{
|
||||
emptyValue = true
|
||||
}
|
||||
|
||||
@ -5,6 +5,7 @@ class View{
|
||||
this.diff = diff
|
||||
|
||||
this.pauseMenu = document.getElementById("pause-menu")
|
||||
this.cursor = document.getElementById("cursor")
|
||||
|
||||
var docW = document.body.offsetWidth
|
||||
var docH = document.body.offsetHeight
|
||||
@ -81,6 +82,10 @@ class View{
|
||||
var gameSong = document.getElementsByClassName("game-song")[0]
|
||||
gameSong.appendChild(document.createTextNode(this.songTitle))
|
||||
gameSong.setAttribute("alt", this.songTitle)
|
||||
|
||||
this.lastMousemove = this.controller.getElapsedTime().ms
|
||||
pageEvents.mouseAdd(this, this.onmousemove.bind(this))
|
||||
|
||||
this.refresh()
|
||||
}
|
||||
setBackground(){
|
||||
@ -99,7 +104,6 @@ class View{
|
||||
if(this.controller.multiplayer == 2){
|
||||
this.winH = this.winH / 2 * 3
|
||||
}
|
||||
|
||||
this.barY = 0.25 * this.winH
|
||||
this.barH = 0.23 * this.winH
|
||||
this.lyricsBarH = 0.2 * this.barH
|
||||
@ -156,6 +160,7 @@ class View{
|
||||
this.drawCombo()
|
||||
this.drawGlobalScore()
|
||||
this.updateDonFaces()
|
||||
this.mouseIdle()
|
||||
//this.drawTime()
|
||||
}
|
||||
updateDonFaces(){
|
||||
@ -236,7 +241,7 @@ class View{
|
||||
var currentTime = this.controller.getElapsedTime().ms
|
||||
|
||||
measures.forEach((measure, index)=>{
|
||||
var timeForDistance = 70 / this.circleSize * this.distanceForCircle / measure.speed
|
||||
var timeForDistance = this.posToMs(this.distanceForCircle, measure.speed)
|
||||
if(
|
||||
currentTime >= measure.ms - timeForDistance
|
||||
&& currentTime <= measure.ms + 350
|
||||
@ -249,7 +254,7 @@ class View{
|
||||
drawMeasure(measure){
|
||||
var z = this.canvas.scale
|
||||
var currentTime = this.controller.getElapsedTime().ms
|
||||
var measureX = this.slotX + measure.speed / (70 / this.circleSize) * (measure.ms - currentTime)
|
||||
var measureX = this.slotX + this.msToPos(measure.ms - currentTime, measure.speed)
|
||||
this.ctx.strokeStyle = "#bab8b8"
|
||||
this.ctx.lineWidth = 2
|
||||
this.ctx.beginPath()
|
||||
@ -345,11 +350,13 @@ class View{
|
||||
}
|
||||
}
|
||||
drawPressedKeys(){
|
||||
var keys = this.controller.getKeys()
|
||||
var ms = this.controller.getElapsedTime().ms
|
||||
var keyTime = this.controller.getKeyTime()
|
||||
var kbd = this.controller.getBindings()
|
||||
|
||||
if(keys[kbd["ka_l"]]){
|
||||
if(keyTime[kbd["ka_l"]] > ms - 150){
|
||||
var elemW = 0.45 * this.taikoW
|
||||
this.ctx.globalAlpha = Math.min(1, 4 - (ms - keyTime[kbd["ka_l"]]) / 37.5)
|
||||
this.ctx.drawImage(assets.image["taiko-key-blue"],
|
||||
0, 0, 68, 124,
|
||||
this.taikoX + this.taikoW * 0.05,
|
||||
@ -358,9 +365,9 @@ class View{
|
||||
124 / 68 * elemW
|
||||
)
|
||||
}
|
||||
|
||||
if(keys[kbd["don_l"]]){
|
||||
if(keyTime[kbd["don_l"]] > ms - 150){
|
||||
var elemW = 0.35 * this.taikoW
|
||||
this.ctx.globalAlpha = Math.min(1, 4 - (ms - keyTime[kbd["don_l"]]) / 37.5)
|
||||
this.ctx.drawImage(assets.image["taiko-key-red"],
|
||||
0, 0, 53, 100,
|
||||
this.taikoX + this.taikoW * 0.15,
|
||||
@ -369,9 +376,9 @@ class View{
|
||||
100 / 53 * elemW
|
||||
)
|
||||
}
|
||||
|
||||
if(keys[kbd["don_r"]]){
|
||||
if(keyTime[kbd["don_r"]] > ms - 150){
|
||||
var elemW = 0.35 * this.taikoW
|
||||
this.ctx.globalAlpha = Math.min(1, 4 - (ms - keyTime[kbd["don_r"]]) / 37.5)
|
||||
this.ctx.drawImage(assets.image["taiko-key-red"],
|
||||
53, 0, 53, 100,
|
||||
this.taikoX + this.taikoW * 0.15 + elemW,
|
||||
@ -380,9 +387,9 @@ class View{
|
||||
100 / 53 * elemW
|
||||
)
|
||||
}
|
||||
|
||||
if(keys[kbd["ka_r"]]){
|
||||
if(keyTime[kbd["ka_r"]] > ms - 150){
|
||||
var elemW = 0.45 * this.taikoW
|
||||
this.ctx.globalAlpha = Math.min(1, 4 - (ms - keyTime[kbd["ka_r"]]) / 37.5)
|
||||
this.ctx.drawImage(assets.image["taiko-key-blue"],
|
||||
68, 0, 68, 124,
|
||||
this.taikoX + this.taikoW * 0.05 + elemW,
|
||||
@ -391,6 +398,7 @@ class View{
|
||||
124 / 68 * elemW
|
||||
)
|
||||
}
|
||||
this.ctx.globalAlpha = 1
|
||||
}
|
||||
displayScore(score, notPlayed){
|
||||
this.currentScore = score
|
||||
@ -412,17 +420,16 @@ class View{
|
||||
if(this.scoreOpacity - 0.1 >= 0 && this.currentScore != 0){
|
||||
this.scoreOpacity -= 0.1
|
||||
}
|
||||
}
|
||||
else if(this.scoreDispCount == 21){
|
||||
}else if(this.scoreDispCount === 21){
|
||||
this.scoreDispCount = -1
|
||||
}
|
||||
this.ctx.globalAlpha = 1
|
||||
}
|
||||
posToMs(pos, speed){
|
||||
return 70 / this.circleSize * pos / speed
|
||||
return 140 / this.circleSize * pos / speed
|
||||
}
|
||||
msToPos(ms, speed){
|
||||
return speed / (70 / this.circleSize) * ms
|
||||
return speed / (140 / this.circleSize) * ms
|
||||
}
|
||||
drawCircles(circles){
|
||||
for(var i = circles.length; i--;){
|
||||
@ -434,7 +441,7 @@ class View{
|
||||
var startingTime = circle.getMS() - timeForDistance
|
||||
var finishTime = circle.getEndTime() + this.posToMs(this.slotX - this.taikoSquareW + this.bigCircleSize / 2, speed)
|
||||
|
||||
if(!circle.getPlayed() || circle.getScore() == 0){
|
||||
if(!circle.getPlayed() || circle.getScore() === 0){
|
||||
if(ms >= startingTime && ms <= finishTime){
|
||||
this.drawCircle(circle)
|
||||
}
|
||||
@ -482,7 +489,6 @@ class View{
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return data[0]
|
||||
}
|
||||
drawCircle(circle, circlePos){
|
||||
@ -501,7 +507,6 @@ class View{
|
||||
y: this.circleY
|
||||
}
|
||||
}
|
||||
|
||||
if(animated){
|
||||
var currentDonFace = 0
|
||||
var currentBigDonFace = 1
|
||||
@ -509,7 +514,6 @@ class View{
|
||||
var currentDonFace = this.currentDonFace
|
||||
var currentBigDonFace = this.currentBigDonFace
|
||||
}
|
||||
|
||||
switch(type){
|
||||
case "don":
|
||||
fill = "#f34728"
|
||||
@ -606,6 +610,9 @@ class View{
|
||||
togglePauseMenu(){
|
||||
if(this.controller.game.isPaused()){
|
||||
this.pauseMenu.style.display = "block"
|
||||
this.lastMousemove = this.controller.getElapsedTime().ms
|
||||
this.cursorHidden = false
|
||||
this.mouseIdle()
|
||||
}else{
|
||||
this.pauseMenu.style.display = ""
|
||||
}
|
||||
@ -615,7 +622,6 @@ class View{
|
||||
this.diffX, this.diffY,
|
||||
this.diffW, this.diffH
|
||||
)
|
||||
|
||||
this.ctx.drawImage(assets.image.taiko,
|
||||
this.taikoX, this.taikoY,
|
||||
this.taikoW, this.taikoH
|
||||
@ -652,10 +658,10 @@ class View{
|
||||
this.ctx.closePath()
|
||||
this.ctx.fill()
|
||||
|
||||
var currentTime = this.controller.getElapsedTime().ms
|
||||
var ms = this.controller.getElapsedTime().ms
|
||||
var keyTime = this.controller.getKeyTime()
|
||||
var sound = keyTime["don"] > keyTime["ka"] ? "don" : "ka"
|
||||
if(keyTime[sound] > currentTime - 200){
|
||||
if(keyTime[sound] > ms - 200){
|
||||
var gradients = {
|
||||
"don": ["#f54c25", "#232323"],
|
||||
"ka": ["#75cee9", "#232323"]
|
||||
@ -665,7 +671,7 @@ class View{
|
||||
grd.addColorStop(1, gradients[sound][1])
|
||||
this.ctx.fillStyle = grd
|
||||
this.ctx.rect(0, this.barY, this.winW, this.barH)
|
||||
this.ctx.globalAlpha = 1 - (currentTime - keyTime[sound]) / 200
|
||||
this.ctx.globalAlpha = 1 - (ms - keyTime[sound]) / 200
|
||||
this.ctx.fill()
|
||||
this.ctx.globalAlpha = 1
|
||||
}
|
||||
@ -717,14 +723,14 @@ class View{
|
||||
return asset
|
||||
}
|
||||
drawAssets(){
|
||||
if(this.controller.multiplayer != 2){
|
||||
if(this.controller.multiplayer !== 2){
|
||||
this.assets.forEach(asset => {
|
||||
asset.draw()
|
||||
})
|
||||
}
|
||||
}
|
||||
updateCombo(combo){
|
||||
if(combo > 0 && combo % 10 == 0 && this.don.getAnimation() != "10combo"){
|
||||
if(combo > 0 && combo % 10 === 0 && this.don.getAnimation() != "10combo"){
|
||||
this.don.setAnimation("10combo")
|
||||
var ms = this.controller.getElapsedTime().ms
|
||||
this.don.setAnimationStart(ms)
|
||||
@ -735,10 +741,30 @@ class View{
|
||||
})
|
||||
}
|
||||
}
|
||||
onmousemove(event){
|
||||
this.lastMousemove = this.controller.getElapsedTime().ms
|
||||
this.cursorHidden = false
|
||||
}
|
||||
mouseIdle(){
|
||||
var lastMouse = pageEvents.getMouse()
|
||||
if(lastMouse && !this.cursorHidden){
|
||||
if(this.controller.getElapsedTime().ms >= this.lastMousemove + 2000){
|
||||
this.cursor.style.top = lastMouse.clientY + "px"
|
||||
this.cursor.style.left = lastMouse.clientX + "px"
|
||||
this.cursor.style.pointerEvents = "auto"
|
||||
this.cursorHidden = true
|
||||
}else{
|
||||
this.cursor.style.top = ""
|
||||
this.cursor.style.left = ""
|
||||
this.cursor.style.pointerEvents = ""
|
||||
}
|
||||
}
|
||||
}
|
||||
clean(){
|
||||
pageEvents.mouseRemove(this)
|
||||
delete this.pauseMenu
|
||||
delete this.cursor
|
||||
delete this.canvas
|
||||
delete this.ctx
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,14 +1,12 @@
|
||||
<div id='game'>
|
||||
<div id="game">
|
||||
<h3 alt="" class="stroke-sub game-song"></h3>
|
||||
|
||||
<canvas id='canvas'></canvas>
|
||||
|
||||
<div id='pause-menu'>
|
||||
<div class='window'>
|
||||
<button type='button' id='continue-butt'>Continue</button>
|
||||
<button type='button' id='restart-butt'>Restart</button>
|
||||
<button type='button' id='song-selection-butt'>Song selection</button>
|
||||
<canvas id="canvas"></canvas>
|
||||
<div id="pause-menu">
|
||||
<div class="window">
|
||||
<button type="button" id="continue-butt">Continue</button>
|
||||
<button type="button" id="restart-butt">Restart</button>
|
||||
<button type="button" id="song-selection-butt">Song selection</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="cursor"></div>
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user