yuuki/taiko-web
1
0
Fork 0
mirror of https://github.com/yuukiwww/taiko-web.git synced 2024-09-30 21:29:31 +02:00
Code Issues Packages Projects 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{
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;
}

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

@ -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 = {

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

@ -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()

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

@ -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(){

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

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

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

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

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

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

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