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

Fix drumroll, pressed keys, pause menu, hide cursor

Browse Source
This commit is contained in:
LoveEevee 2018-09-18 16:59:40 +03:00
parent 0a62088d62
commit 772dac579f
8 changed files with 118 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
public/src/css/game.css
View File

@ -1,46 +1,48 @@
#game{ #game{
width:100%; width: 100%;
height:100%; height: 100%;
overflow: hidden; overflow: hidden;
background-size:cover; background-size: cover;
} }
#canvas{ #canvas{
position:relative; position: relative;
z-index:1; z-index: 1;
width:100%; width: 100%;
height:100%; height: 100%;
} }
#pause-menu{ #pause-menu{
display:none; display: none;
width:100%; width: 100%;
height:100%; height: 100%;
position:absolute; position: absolute;
top:0; top: 0;
left:0; left: 0;
background:rgba(0,0,0,0.75); background: rgba(0, 0, 0, 0.75);
z-index: 5; z-index: 5;
} }
#pause-menu button{ #pause-menu button{
width: 90%; width: 90%;
height: 25%; height: 25%;
display: block; display: block;
margin: 0 auto; margin: 0 auto;
cursor: pointer; cursor: pointer;
border:.5vmin solid #ae7a26; border:.5vmin solid #ae7a26;
background: rgb(255, 255, 255); background: #fff;
color: black; color: #000;
font-family: TnT; font-family: TnT;
font-size: 3.5vmin; font-size: 3.5vmin;
border-radius: 1.5vmin; border-radius: 1.5vmin;
} }
#pause-menu button:hover{ #pause-menu button:hover{
border-color:#fa5d3a; border-color:#fa5d3a;
color:white; color:white;
background:#0c6577; background:#0c6577;
}
#cursor{
position: fixed;
width: 1px;
height: 1px;
cursor: none;
pointer-events: none;
z-index: 1;
} }

18
public/src/js/canvasasset.js
View File

@ -11,7 +11,7 @@ class CanvasAsset{
this.animationStart = 0 this.animationStart = 0
} }
draw(){ draw(){
var u = (a, b) => typeof a == "undefined" ? b : a var u = (a, b) => typeof a === "undefined" ? b : a
var frame = 0 var frame = 0
if(this.animation){ if(this.animation){
var ms = this.controller.getElapsedTime().ms var ms = this.controller.getElapsedTime().ms
@ -24,9 +24,9 @@ class CanvasAsset{
} }
var index = Math.floor((ms - this.animationStart) / this.speed) var index = Math.floor((ms - this.animationStart) / this.speed)
if(Array.isArray(this.animation)){ if(Array.isArray(this.animation)){
frame = this.animation[this.boundedIndex(this.animation.length, index)] frame = this.animation[this.mod(this.animation.length, index)]
}else{ }else{
frame = this.boundedIndex(this.animation, index) frame = this.mod(this.animation, index)
} }
} }
var pos = this.position(frame) var pos = this.position(frame)
@ -38,14 +38,8 @@ class CanvasAsset{
) )
} }
} }
boundedIndex(length, index){ mod(length, index){
if(length == 0){ return ((index % length) + length) % length
return
}
while(index < length){
index += length
}
return index % length
} }
addFrames(name, frames, image){ addFrames(name, frames, image){
var framesObj = { var framesObj = {
@ -82,7 +76,7 @@ class CanvasAsset{
this.animationStart = ms this.animationStart = ms
} }
setAnimationEnd(ms, callback){ setAnimationEnd(ms, callback){
if(typeof ms == "undefined"){ if(typeof ms === "undefined"){
delete this.animationEnd delete this.animationEnd
}else{ }else{
this.animationEnd = { this.animationEnd = {

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

@ -39,8 +39,8 @@ class Controller{
} }
} }
loadUIEvents(){ loadUIEvents(){
this.continueBtn = document.getElementById("song-selection-butt") this.continueBtn = document.getElementById("continue-butt")
this.restartBtn = document.getElementById("song-selection-butt") this.restartBtn = document.getElementById("restart-butt")
this.songSelBtn = document.getElementById("song-selection-butt") this.songSelBtn = document.getElementById("song-selection-butt")
pageEvents.add(this.continueBtn, "click", () => { pageEvents.add(this.continueBtn, "click", () => {
this.togglePauseMenu() this.togglePauseMenu()

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

@ -91,7 +91,9 @@ class Keyboard{
}else{ }else{
assets.sounds["note_" + sound].play() 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(){ getKeys(){

15
public/src/js/pageevents.js
View File

@ -2,8 +2,10 @@ class PageEvents{
constructor(){ constructor(){
this.allEvents = new Map() this.allEvents = new Map()
this.keyListeners = new Map() this.keyListeners = new Map()
this.mouseListeners = new Map()
this.add(window, "keydown", this.keyEvent.bind(this)) this.add(window, "keydown", this.keyEvent.bind(this))
this.add(window, "keyup", this.keyEvent.bind(this)) this.add(window, "keyup", this.keyEvent.bind(this))
this.add(window, "mousemove", this.mouseEvent.bind(this))
} }
add(target, type, callback){ add(target, type, callback){
this.remove(target, type) 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
}
} }

11
public/src/js/parsesong.js
View File

@ -112,7 +112,7 @@ class ParseSong{
if(msOrPercent < 0){ if(msOrPercent < 0){
var sliderMultiplier = this.difficulty.lastMultiplier / Math.abs(msOrPercent / 100) var sliderMultiplier = this.difficulty.lastMultiplier / Math.abs(msOrPercent / 100)
}else{ }else{
var sliderMultiplier = 500 / msOrPercent var sliderMultiplier = 1000 / msOrPercent
if(i == 0){ if(i == 0){
this.difficulty.originalMultiplier = sliderMultiplier this.difficulty.originalMultiplier = sliderMultiplier
} }
@ -250,7 +250,7 @@ class ParseSong{
var extras = values.slice(this.osu.EXTRAS) var extras = values.slice(this.osu.EXTRAS)
var pixelLength = parseFloat(extras[this.osu.PIXELLENGTH]) 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){ if(hitSound & this.osu.FINISH){
type = "daiDrumroll" type = "daiDrumroll"
txt = "連打(大)ーっ!!" txt = "連打(大)ーっ!!"
@ -261,14 +261,14 @@ class ParseSong{
circles.push(new Circle(circleID, start, type, txt, speed, endTime)) circles.push(new Circle(circleID, start, type, txt, speed, endTime))
}else if(osuType & this.osu.CIRCLE){ }else if(osuType & this.osu.CIRCLE){
var type var type
var txt var txt
if(hitSound & this.osu.FINISH){ if(hitSound & this.osu.FINISH){
if(hitSound & this.osu.WHISTLE || hitSound & this.osu.CLAP){ if(hitSound & this.osu.WHISTLE || hitSound & this.osu.CLAP){
type = "daiKa" type = "daiKa"
txt = "カッ(大)" txt = "カッ(大)"
}else if(hitSound & this.osu.NORMAL || hitSound == this.osu.FINISH){ }else if(hitSound & this.osu.NORMAL || hitSound === this.osu.FINISH){
type = "daiDon" type = "daiDon"
txt = "ドン(大)" txt = "ドン(大)"
}else{ }else{
@ -277,7 +277,7 @@ class ParseSong{
}else if(hitSound & this.osu.WHISTLE || hitSound & this.osu.CLAP){ }else if(hitSound & this.osu.WHISTLE || hitSound & this.osu.CLAP){
type = "ka" type = "ka"
txt = "カッ" txt = "カッ"
}else if(hitSound & this.osu.NORMAL || hitSound == 0){ }else if(hitSound & this.osu.NORMAL || hitSound === 0){
type = "don" type = "don"
txt = "ドン" txt = "ドン"
}else{ }else{
@ -286,7 +286,6 @@ class ParseSong{
if(!emptyValue){ if(!emptyValue){
circles.push(new Circle(circleID, start, type, txt, speed)) circles.push(new Circle(circleID, start, type, txt, speed))
} }
}else{ }else{
emptyValue = true emptyValue = true
} }

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

@ -5,6 +5,7 @@ class View{
this.diff = diff this.diff = diff
this.pauseMenu = document.getElementById("pause-menu") this.pauseMenu = document.getElementById("pause-menu")
this.cursor = document.getElementById("cursor")
var docW = document.body.offsetWidth var docW = document.body.offsetWidth
var docH = document.body.offsetHeight var docH = document.body.offsetHeight
@ -81,6 +82,10 @@ class View{
var gameSong = document.getElementsByClassName("game-song")[0] var gameSong = document.getElementsByClassName("game-song")[0]
gameSong.appendChild(document.createTextNode(this.songTitle)) gameSong.appendChild(document.createTextNode(this.songTitle))
gameSong.setAttribute("alt", this.songTitle) gameSong.setAttribute("alt", this.songTitle)
this.lastMousemove = this.controller.getElapsedTime().ms
pageEvents.mouseAdd(this, this.onmousemove.bind(this))
this.refresh() this.refresh()
} }
setBackground(){ setBackground(){
@ -99,7 +104,6 @@ class View{
if(this.controller.multiplayer == 2){ if(this.controller.multiplayer == 2){
this.winH = this.winH / 2 * 3 this.winH = this.winH / 2 * 3
} }
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
@ -156,6 +160,7 @@ class View{
this.drawCombo() this.drawCombo()
this.drawGlobalScore() this.drawGlobalScore()
this.updateDonFaces() this.updateDonFaces()
this.mouseIdle()
//this.drawTime() //this.drawTime()
} }
updateDonFaces(){ updateDonFaces(){
@ -236,7 +241,7 @@ class View{
var currentTime = this.controller.getElapsedTime().ms var currentTime = this.controller.getElapsedTime().ms
measures.forEach((measure, index)=>{ measures.forEach((measure, index)=>{
var timeForDistance = 70 / this.circleSize * this.distanceForCircle / measure.speed var timeForDistance = this.posToMs(this.distanceForCircle, measure.speed)
if( if(
currentTime >= measure.ms - timeForDistance currentTime >= measure.ms - timeForDistance
&& currentTime <= measure.ms + 350 && currentTime <= measure.ms + 350
@ -249,7 +254,7 @@ class View{
drawMeasure(measure){ drawMeasure(measure){
var z = this.canvas.scale var z = this.canvas.scale
var currentTime = this.controller.getElapsedTime().ms 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.strokeStyle = "#bab8b8"
this.ctx.lineWidth = 2 this.ctx.lineWidth = 2
this.ctx.beginPath() this.ctx.beginPath()
@ -345,11 +350,13 @@ class View{
} }
} }
drawPressedKeys(){ drawPressedKeys(){
var keys = this.controller.getKeys() var ms = this.controller.getElapsedTime().ms
var keyTime = this.controller.getKeyTime()
var kbd = this.controller.getBindings() var kbd = this.controller.getBindings()
if(keys[kbd["ka_l"]]){ if(keyTime[kbd["ka_l"]] > ms - 150){
var elemW = 0.45 * this.taikoW 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"], this.ctx.drawImage(assets.image["taiko-key-blue"],
0, 0, 68, 124, 0, 0, 68, 124,
this.taikoX + this.taikoW * 0.05, this.taikoX + this.taikoW * 0.05,
@ -358,9 +365,9 @@ class View{
124 / 68 * elemW 124 / 68 * elemW
) )
} }
if(keyTime[kbd["don_l"]] > ms - 150){
if(keys[kbd["don_l"]]){
var elemW = 0.35 * this.taikoW 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"], this.ctx.drawImage(assets.image["taiko-key-red"],
0, 0, 53, 100, 0, 0, 53, 100,
this.taikoX + this.taikoW * 0.15, this.taikoX + this.taikoW * 0.15,
@ -369,9 +376,9 @@ class View{
100 / 53 * elemW 100 / 53 * elemW
) )
} }
if(keyTime[kbd["don_r"]] > ms - 150){
if(keys[kbd["don_r"]]){
var elemW = 0.35 * this.taikoW 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"], this.ctx.drawImage(assets.image["taiko-key-red"],
53, 0, 53, 100, 53, 0, 53, 100,
this.taikoX + this.taikoW * 0.15 + elemW, this.taikoX + this.taikoW * 0.15 + elemW,
@ -380,9 +387,9 @@ class View{
100 / 53 * elemW 100 / 53 * elemW
) )
} }
if(keyTime[kbd["ka_r"]] > ms - 150){
if(keys[kbd["ka_r"]]){
var elemW = 0.45 * this.taikoW 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"], this.ctx.drawImage(assets.image["taiko-key-blue"],
68, 0, 68, 124, 68, 0, 68, 124,
this.taikoX + this.taikoW * 0.05 + elemW, this.taikoX + this.taikoW * 0.05 + elemW,
@ -391,6 +398,7 @@ class View{
124 / 68 * elemW 124 / 68 * elemW
) )
} }
this.ctx.globalAlpha = 1
} }
displayScore(score, notPlayed){ displayScore(score, notPlayed){
this.currentScore = score this.currentScore = score
@ -412,17 +420,16 @@ class View{
if(this.scoreOpacity - 0.1 >= 0 && this.currentScore != 0){ if(this.scoreOpacity - 0.1 >= 0 && this.currentScore != 0){
this.scoreOpacity -= 0.1 this.scoreOpacity -= 0.1
} }
} }else if(this.scoreDispCount === 21){
else if(this.scoreDispCount == 21){
this.scoreDispCount = -1 this.scoreDispCount = -1
} }
this.ctx.globalAlpha = 1 this.ctx.globalAlpha = 1
} }
posToMs(pos, speed){ posToMs(pos, speed){
return 70 / this.circleSize * pos / speed return 140 / this.circleSize * pos / speed
} }
msToPos(ms, speed){ msToPos(ms, speed){
return speed / (70 / this.circleSize) * ms return speed / (140 / this.circleSize) * ms
} }
drawCircles(circles){ drawCircles(circles){
for(var i = circles.length; i--;){ for(var i = circles.length; i--;){
@ -434,7 +441,7 @@ class View{
var startingTime = circle.getMS() - timeForDistance var startingTime = circle.getMS() - timeForDistance
var finishTime = circle.getEndTime() + this.posToMs(this.slotX - this.taikoSquareW + this.bigCircleSize / 2, speed) 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){ if(ms >= startingTime && ms <= finishTime){
this.drawCircle(circle) this.drawCircle(circle)
} }
@ -482,7 +489,6 @@ class View{
} }
} }
} }
return data[0] return data[0]
} }
drawCircle(circle, circlePos){ drawCircle(circle, circlePos){
@ -501,7 +507,6 @@ class View{
y: this.circleY y: this.circleY
} }
} }
if(animated){ if(animated){
var currentDonFace = 0 var currentDonFace = 0
var currentBigDonFace = 1 var currentBigDonFace = 1
@ -509,7 +514,6 @@ class View{
var currentDonFace = this.currentDonFace var currentDonFace = this.currentDonFace
var currentBigDonFace = this.currentBigDonFace var currentBigDonFace = this.currentBigDonFace
} }
switch(type){ switch(type){
case "don": case "don":
fill = "#f34728" fill = "#f34728"
@ -606,6 +610,9 @@ class View{
togglePauseMenu(){ togglePauseMenu(){
if(this.controller.game.isPaused()){ if(this.controller.game.isPaused()){
this.pauseMenu.style.display = "block" this.pauseMenu.style.display = "block"
this.lastMousemove = this.controller.getElapsedTime().ms
this.cursorHidden = false
this.mouseIdle()
}else{ }else{
this.pauseMenu.style.display = "" this.pauseMenu.style.display = ""
} }
@ -615,7 +622,6 @@ class View{
this.diffX, this.diffY, this.diffX, this.diffY,
this.diffW, this.diffH this.diffW, this.diffH
) )
this.ctx.drawImage(assets.image.taiko, this.ctx.drawImage(assets.image.taiko,
this.taikoX, this.taikoY, this.taikoX, this.taikoY,
this.taikoW, this.taikoH this.taikoW, this.taikoH
@ -652,10 +658,10 @@ class View{
this.ctx.closePath() this.ctx.closePath()
this.ctx.fill() this.ctx.fill()
var currentTime = this.controller.getElapsedTime().ms var ms = this.controller.getElapsedTime().ms
var keyTime = this.controller.getKeyTime() var keyTime = this.controller.getKeyTime()
var sound = keyTime["don"] > keyTime["ka"] ? "don" : "ka" var sound = keyTime["don"] > keyTime["ka"] ? "don" : "ka"
if(keyTime[sound] > currentTime - 200){ if(keyTime[sound] > ms - 200){
var gradients = { var gradients = {
"don": ["#f54c25", "#232323"], "don": ["#f54c25", "#232323"],
"ka": ["#75cee9", "#232323"] "ka": ["#75cee9", "#232323"]
@ -665,7 +671,7 @@ class View{
grd.addColorStop(1, gradients[sound][1]) grd.addColorStop(1, gradients[sound][1])
this.ctx.fillStyle = grd this.ctx.fillStyle = grd
this.ctx.rect(0, this.barY, this.winW, this.barH) 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.fill()
this.ctx.globalAlpha = 1 this.ctx.globalAlpha = 1
} }
@ -717,14 +723,14 @@ class View{
return asset return asset
} }
drawAssets(){ drawAssets(){
if(this.controller.multiplayer != 2){ if(this.controller.multiplayer !== 2){
this.assets.forEach(asset => { this.assets.forEach(asset => {
asset.draw() asset.draw()
}) })
} }
} }
updateCombo(combo){ 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") this.don.setAnimation("10combo")
var ms = this.controller.getElapsedTime().ms var ms = this.controller.getElapsedTime().ms
this.don.setAnimationStart(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(){ clean(){
pageEvents.mouseRemove(this)
delete this.pauseMenu delete this.pauseMenu
delete this.cursor
delete this.canvas delete this.canvas
delete this.ctx delete this.ctx
} }
} }

18
public/src/views/game.html
View File

@ -1,14 +1,12 @@
<div id='game'> <div id="game">
<h3 alt="" class="stroke-sub game-song"></h3> <h3 alt="" class="stroke-sub game-song"></h3>
<canvas id="canvas"></canvas>
<canvas id='canvas'></canvas> <div id="pause-menu">
<div class="window">
<div id='pause-menu'> <button type="button" id="continue-butt">Continue</button>
<div class='window'> <button type="button" id="restart-butt">Restart</button>
<button type='button' id='continue-butt'>Continue</button> <button type="button" id="song-selection-butt">Song selection</button>
<button type='button' id='restart-butt'>Restart</button>
<button type='button' id='song-selection-butt'>Song selection</button>
</div> </div>
</div> </div>
<div id="cursor"></div>
</div> </div>