From 772dac579fa4e2ead692dbb75ace72c584ffb9d3 Mon Sep 17 00:00:00 2001 From: LoveEevee Date: Tue, 18 Sep 2018 16:59:40 +0300 Subject: [PATCH] Fix drumroll, pressed keys, pause menu, hide cursor --- public/src/css/game.css | 52 ++++++++++++------------ public/src/js/canvasasset.js | 18 +++------ public/src/js/controller.js | 4 +- public/src/js/keyboard.js | 4 +- public/src/js/pageevents.js | 15 +++++++ public/src/js/parsesong.js | 11 +++-- public/src/js/view.js | 78 ++++++++++++++++++++++++------------ public/src/views/game.html | 18 ++++----- 8 files changed, 118 insertions(+), 82 deletions(-) diff --git a/public/src/css/game.css b/public/src/css/game.css index c019178..7f73bbe 100644 --- a/public/src/css/game.css +++ b/public/src/css/game.css @@ -1,46 +1,48 @@ #game{ - width:100%; - height:100%; + width: 100%; + height: 100%; overflow: hidden; - background-size:cover; + background-size: cover; } - #canvas{ - position:relative; - z-index:1; - width:100%; - height:100%; + position: relative; + z-index: 1; + width: 100%; + height: 100%; } - #pause-menu{ - display:none; - width:100%; - height:100%; - position:absolute; - top:0; - left:0; - background:rgba(0,0,0,0.75); - z-index: 5; + display: none; + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0; + 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; + color:white; + background:#0c6577; +} +#cursor{ + position: fixed; + width: 1px; + height: 1px; + cursor: none; + pointer-events: none; + z-index: 1; } - diff --git a/public/src/js/canvasasset.js b/public/src/js/canvasasset.js index 4c4f989..082d48b 100644 --- a/public/src/js/canvasasset.js +++ b/public/src/js/canvasasset.js @@ -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 = { diff --git a/public/src/js/controller.js b/public/src/js/controller.js index 613b308..0f221ef 100644 --- a/public/src/js/controller.js +++ b/public/src/js/controller.js @@ -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() diff --git a/public/src/js/keyboard.js b/public/src/js/keyboard.js index 23fc160..2a757cc 100644 --- a/public/src/js/keyboard.js +++ b/public/src/js/keyboard.js @@ -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(){ diff --git a/public/src/js/pageevents.js b/public/src/js/pageevents.js index 1847f1c..7b1fef7 100644 --- a/public/src/js/pageevents.js +++ b/public/src/js/pageevents.js @@ -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 + } } diff --git a/public/src/js/parsesong.js b/public/src/js/parsesong.js index 31fce34..587abd5 100644 --- a/public/src/js/parsesong.js +++ b/public/src/js/parsesong.js @@ -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 } diff --git a/public/src/js/view.js b/public/src/js/view.js index 068c3ed..cf11e37 100644 --- a/public/src/js/view.js +++ b/public/src/js/view.js @@ -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 - } } diff --git a/public/src/views/game.html b/public/src/views/game.html index 1d5d3ff..327f597 100644 --- a/public/src/views/game.html +++ b/public/src/views/game.html @@ -1,14 +1,12 @@ -
+

- - - -
-
- - - + +
+
+ + +
- +