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

Change drum to match Switch, add fullscreen to songsel, fix tutorial

Browse Source
This commit is contained in:
LoveEevee 2018-10-06 16:24:23 +03:00
parent 57632a83e5
commit e1b8b45d88
14 changed files with 121 additions and 175 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
public/index.html
View File

@ -47,11 +47,12 @@
<script src="/src/js/viewassets.js"></script> <script src="/src/js/viewassets.js"></script>
<script src="/src/js/gamerules.js"></script> <script src="/src/js/gamerules.js"></script>
<script src="/src/js/canvasdraw.js"></script> <script src="/src/js/canvasdraw.js"></script>
<script src="/src/js/loader.js"></script>
</head> </head>
<body> <body>
<div id="assets"></div> <div id="assets"></div>
<div id="screen"></div> <div id="screen"></div>
<script src="/src/js/loader.js"></script> <script src="/src/js/main.js"></script>
</body> </body>
</html> </html>

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

@ -51,50 +51,33 @@
pointer-events: none; pointer-events: none;
z-index: 1; z-index: 1;
} }
#touch-bg{ #touch-drum{
display: none; display: none;
position: absolute; position: absolute;
right: 0; right: 0;
bottom: 0; bottom: 0;
left: 0; left: 0;
width: 50%;
height: 50%; height: 50%;
background: url(/assets/img/touch_bg.png) center bottom;
background-size: cover;
overflow: hidden;
}
#touch-bg-blue{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: url(/assets/img/touch_bg_blue.png) center bottom;
background-size: cover;
opacity: 0;
}
#touch-drum{
position: absolute;
right: 0;
bottom: 0;
left: 0;
text-align: center; text-align: center;
margin: auto; margin: auto;
} }
#touch-drum img{ #touch-drum-img{
width: 100%; width: 100%;
} }
#touch-buttons{ #touch-buttons{
display: none; display: none;
position: absolute; position: absolute;
top: 7vh; top: 6.5vh;
right: 2vh; right: 2vh;
opacity: 0.5; opacity: 0.5;
z-index: 5; z-index: 5;
} }
#touch-buttons img{ #touch-buttons img{
width: 12vh; width: 12.5vmin;
height: 12.5vmin;
} }
.touch-visible #touch-bg, .touch-visible #touch-drum,
.touch-visible #touch-buttons{ .touch-visible #touch-buttons{
display: block; display: block;
} }

12
public/src/css/main.css
View File

@ -137,8 +137,9 @@ body{
border: 5px black solid; border: 5px black solid;
border-radius: 10px; border-radius: 10px;
height: 65%; height: 65%;
width: 50%; max-width: 800px;
padding: 20px; padding: 20px;
margin: 8px;
font-size: 16pt; font-size: 16pt;
position: relative; position: relative;
} }
@ -214,3 +215,12 @@ kbd{
left: 0; left: 0;
margin: auto; margin: auto;
} }
#song-select #touch-full-btn{
display: none;
position: absolute;
top: 0;
right: 0;
width: 12.5vmin;
height: 12.5vmin;
opacity: 0.5;
}

2
public/src/js/assets.js
View File

@ -40,8 +40,6 @@ var assets = {
"bg_score_p1.png", "bg_score_p1.png",
"bg_score_p2.png", "bg_score_p2.png",
"badge_auto.png", "badge_auto.png",
"touch_bg.png",
"touch_bg_blue.png",
"touch_drum.png", "touch_drum.png",
"touch_pause.png", "touch_pause.png",
"touch_fullscreen.png" "touch_fullscreen.png"

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

@ -131,7 +131,7 @@ class Controller{
if(!fadeIn){ if(!fadeIn){
this.clean() this.clean()
} }
new SongSelect(false, fadeIn) new SongSelect(false, fadeIn, this.touchEnabled)
} }
restartSong(){ restartSong(){
this.clean() this.clean()

10
public/src/js/loader.js
View File

@ -1,5 +1,6 @@
class Loader{ class Loader{
constructor(){ constructor(callback){
this.callback = callback
this.loadedAssets = 0 this.loadedAssets = 0
this.assetsDiv = document.getElementById("assets") this.assetsDiv = document.getElementById("assets")
this.ajax("src/views/loader.html").then(this.run.bind(this)) this.ajax("src/views/loader.html").then(this.run.bind(this))
@ -83,7 +84,7 @@ class Loader{
Promise.all(this.promises).then(() => { Promise.all(this.promises).then(() => {
this.clean() this.clean()
new Titlescreen() this.callback()
}, this.errorMsg.bind(this)) }, this.errorMsg.bind(this))
} }
loadSound(name, gain){ loadSound(name, gain){
@ -132,8 +133,3 @@ class Loader{
delete this.promises delete this.promises
} }
} }
var pageEvents = new PageEvents()
var loader = new Loader()
var snd = {}
var p2

29
public/src/js/main.js Normal file
View File

@ -0,0 +1,29 @@
function toggleFullscreen(){
var root = document.documentElement
if("requestFullscreen" in root){
if(document.fullscreenElement){
document.exitFullscreen()
}else{
root.requestFullscreen()
}
}else if("webkitRequestFullscreen" in root){
if(document.webkitFullscreenElement){
document.webkitExitFullscreen()
}else{
root.webkitRequestFullscreen()
}
}else if("mozRequestFullScreen" in root){
if(document.mozFullScreenElement){
document.mozCancelFullScreen()
}else{
root.mozRequestFullScreen()
}
}
}
var pageEvents = new PageEvents()
var snd = {}
var p2
var loader = new Loader(() => {
new Titlescreen()
})

7
public/src/js/scoresheet.js
View File

@ -58,9 +58,12 @@ class Scoresheet{
event.preventDefault() event.preventDefault()
this.canvas.style.cursor = "" this.canvas.style.cursor = ""
this.state.pointerLocked = true this.state.pointerLocked = true
}else if(event.which !== 1){ }else{
this.state.pointerLocked = false
if(event.which !== 1){
return return
} }
}
this.toNext() this.toNext()
} }
toNext(){ toNext(){
@ -600,7 +603,7 @@ class Scoresheet{
if(elapsed >= 1000){ if(elapsed >= 1000){
this.clean() this.clean()
this.controller.songSelection(true) this.controller.songSelection(true, false, this.state.pointerLocked)
} }
} }

14
public/src/js/songselect.js
View File

@ -1,5 +1,7 @@
class SongSelect{ class SongSelect{
constructor(fromTutorial, fadeIn){ constructor(fromTutorial, fadeIn, touchEnabled){
this.touchEnabled = touchEnabled
loader.changePage("songselect") loader.changePage("songselect")
this.canvas = document.getElementById("song-sel-canvas") this.canvas = document.getElementById("song-sel-canvas")
this.ctx = this.canvas.getContext("2d") this.ctx = this.canvas.getContext("2d")
@ -198,6 +200,11 @@ class SongSelect{
pageEvents.add(this.canvas, "mousemove", this.mouseMove.bind(this)) pageEvents.add(this.canvas, "mousemove", this.mouseMove.bind(this))
pageEvents.add(this.canvas, "mousedown", this.mouseDown.bind(this)) pageEvents.add(this.canvas, "mousedown", this.mouseDown.bind(this))
pageEvents.add(this.canvas, "touchstart", this.mouseDown.bind(this)) pageEvents.add(this.canvas, "touchstart", this.mouseDown.bind(this))
if(touchEnabled){
this.touchFullBtn = document.getElementById("touch-full-btn")
this.touchFullBtn.style.display = "block"
pageEvents.add(this.touchFullBtn, "click", toggleFullscreen)
}
} }
keyDown(event, code){ keyDown(event, code){
@ -1135,6 +1142,11 @@ class SongSelect{
pageEvents.keyRemove(this, "all") pageEvents.keyRemove(this, "all")
pageEvents.remove(this.canvas, "mousemove") pageEvents.remove(this.canvas, "mousemove")
pageEvents.remove(this.canvas, "mousedown") pageEvents.remove(this.canvas, "mousedown")
pageEvents.remove(this.canvas, "touchstart")
if(this.touchEnabled){
pageEvents.remove(this.touchFullBtn, "click")
delete this.touchFullBtn
}
delete this.ctx delete this.ctx
delete this.canvas delete this.canvas
} }

8
public/src/js/titlescreen.js
View File

@ -15,7 +15,11 @@ class Titlescreen{
} }
}) })
} }
onPressed(){ onPressed(event){
if(event && event.type === "touchstart"){
event.preventDefault()
this.touched = true
}
this.titleScreen.style.cursor = "auto" this.titleScreen.style.cursor = "auto"
this.clean() this.clean()
assets.sounds["don"].play() assets.sounds["don"].play()
@ -25,7 +29,7 @@ class Titlescreen{
if(localStorage.getItem("tutorial") !== "true"){ if(localStorage.getItem("tutorial") !== "true"){
new Tutorial() new Tutorial()
}else{ }else{
new SongSelect() new SongSelect(false, false, this.touched)
} }
} }
clean(){ clean(){

14
public/src/js/tutorial.js
View File

@ -4,18 +4,26 @@ class Tutorial{
loader.changePage("tutorial") loader.changePage("tutorial")
assets.sounds["bgm_setsume"].playLoop(0.1, false, 0, 1.054, 16.054) assets.sounds["bgm_setsume"].playLoop(0.1, false, 0, 1.054, 16.054)
this.endButton = document.getElementById("tutorial-end-button") this.endButton = document.getElementById("tutorial-end-button")
pageEvents.once(this.endButton, "click").then(this.onEnd.bind(this))
pageEvents.once(this.endButton, "mousedown").then(this.onEnd.bind(this))
pageEvents.once(this.endButton, "touchstart").then(this.onEnd.bind(this))
pageEvents.keyOnce(this, 13, "down").then(this.onEnd.bind(this)) pageEvents.keyOnce(this, 13, "down").then(this.onEnd.bind(this))
this.gamepad = new Gamepad({ this.gamepad = new Gamepad({
"confirm": ["start", "b"] "confirm": ["start", "b"]
}, this.onEnd.bind(this)) }, this.onEnd.bind(this))
} }
onEnd(){ onEnd(event){
var touched = false
if(event && event.type === "touchstart"){
event.preventDefault()
touched = true
}
this.clean() this.clean()
assets.sounds["don"].play() assets.sounds["don"].play()
localStorage.setItem("tutorial", "true") localStorage.setItem("tutorial", "true")
setTimeout(() => { setTimeout(() => {
new SongSelect(this.fromSongSel) new SongSelect(this.fromSongSel, false, touched)
}, 500) }, 500)
} }
clean(){ clean(){

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

@ -51,32 +51,19 @@ class View{
this.beatInterval = this.controller.getSongData().beatInfo.beatInterval this.beatInterval = this.controller.getSongData().beatInfo.beatInterval
this.assets = new ViewAssets(this) this.assets = new ViewAssets(this)
this.touch = { this.touch = -Infinity
don_l: -Infinity,
don_r: -Infinity,
don_c: -Infinity,
ka_l: -Infinity,
ka_r: -Infinity,
ka_c: -Infinity,
cursor: {
ms: -Infinity,
x: 0,
y: 0
}
}
if(this.controller.touchEnabled){ if(this.controller.touchEnabled){
this.touchEnabled = true this.touchEnabled = true
this.touchBgDiv = document.getElementById("touch-bg")
this.touchBgBlueDiv = document.getElementById("touch-bg-blue")
this.touchDrumDiv = document.getElementById("touch-drum") this.touchDrumDiv = document.getElementById("touch-drum")
this.touchDrumImg = document.getElementById("touch-drum-img")
this.gameDiv.classList.add("touch-visible") this.gameDiv.classList.add("touch-visible")
pageEvents.add(this.canvas.canvas, "touchstart", this.ontouch.bind(this)) pageEvents.add(this.canvas.canvas, "touchstart", this.ontouch.bind(this))
this.touchFullBtn = document.getElementById("touch-full-btn") this.touchFullBtn = document.getElementById("touch-full-btn")
pageEvents.add(this.touchFullBtn, "click", this.toggleFullscreen) pageEvents.add(this.touchFullBtn, "click", toggleFullscreen)
this.touchPauseBtn = document.getElementById("touch-pause-btn") this.touchPauseBtn = document.getElementById("touch-pause-btn")
pageEvents.add(this.touchPauseBtn, "click", () => { pageEvents.add(this.touchPauseBtn, "click", () => {
@ -189,13 +176,11 @@ class View{
} }
})() })()
this.touchCircle = (() => { this.touchCircle = (() => {
var padTop = this.touchDrum.h * 0.062
var padLeft = this.touchDrum.h * 0.05
return { return {
x: this.winW / 2, x: this.winW / 2,
y: this.winH + padTop, y: this.winH + this.touchDrum.h * 0.1,
rx: this.touchDrum.w / 2 - padLeft * 2, rx: this.touchDrum.w / 2 - this.touchDrum.h * 0.03,
ry: this.touchDrum.h ry: this.touchDrum.h * 1.07
} }
})() })()
} }
@ -880,13 +865,7 @@ class View{
drawTouch(){ drawTouch(){
if(this.touchEnabled){ if(this.touchEnabled){
var ms = this.controller.getElapsedTime() var ms = this.controller.getElapsedTime()
this.ctx.save()
var bgHeight = (this.winH - (this.barY + this.barH + 5)) / this.canvas.scale
if(bgHeight !== this.touchBgHeight){
this.touchBgHeight = bgHeight
this.touchBgDiv.style.height = bgHeight + "px"
}
var drumWidth = this.touchDrum.w / this.canvas.scale var drumWidth = this.touchDrum.w / this.canvas.scale
var drumHeight = this.touchDrum.h / this.canvas.scale var drumHeight = this.touchDrum.h / this.canvas.scale
if(drumHeight !== this.touchDrumHeight || drumWidth !== this.touchDrumWidth){ if(drumHeight !== this.touchDrumHeight || drumWidth !== this.touchDrumWidth){
@ -895,41 +874,15 @@ class View{
this.touchDrumDiv.style.width = drumWidth + "px" this.touchDrumDiv.style.width = drumWidth + "px"
this.touchDrumDiv.style.height = drumHeight + "px" this.touchDrumDiv.style.height = drumHeight + "px"
} }
if(this.touch > ms - 150){
var lastKa = this.touch.ka_l > this.touch.ka_r ? this.touch.ka_l : this.touch.ka_r if(!this.drumPadding){
if(ms < lastKa + 150){ this.drumPadding = true
if(!this.blueBgShown){ this.touchDrumImg.style.paddingTop = "1%"
this.blueBgShown = true
this.touchBgBlueDiv.style.opacity = 0.5
} }
}else if(this.blueBgShown){ }else if(this.drumPadding){
this.blueBgShown = false this.drumPadding = false
this.touchBgBlueDiv.style.opacity = 0 this.touchDrumImg.style.paddingTop = ""
} }
var c = this.touchCircle
var pi = Math.PI
var lastDon = this.touch.don_l > this.touch.don_r ? this.touch.don_l : this.touch.don_r
if(lastDon > ms - 150){
this.ctx.fillStyle = "rgba(239, 86, 51, 0.5)"
this.ctx.beginPath()
this.ctx.ellipse(c.x, c.y, c.rx * 0.9, c.ry * 0.9, 0, pi, 0)
this.ctx.fill()
}
if(this.touch.don_c > ms - 150){
this.ctx.beginPath()
this.ctx.ellipse(c.x, c.y, c.rx * 0.6, c.ry * 0.6, 0, pi, 0)
this.ctx.fill()
}
if(this.touch.ka_c > ms - 150){
this.ctx.fillStyle = "rgba(33, 191, 211, 0.5)"
this.ctx.beginPath()
this.ctx.ellipse(c.x, c.y, c.rx * 1.3, c.ry * 1.3, 0, pi, 0)
this.ctx.ellipse(c.x, c.y, c.rx * 0.9, c.ry * 0.9, 0, 0, pi, true)
this.ctx.fill()
}
this.ctx.restore()
} }
} }
ontouch(event){ ontouch(event){
@ -939,24 +892,12 @@ class View{
var pageX = touch.pageX * scale var pageX = touch.pageX * scale
var pageY = touch.pageY * scale var pageY = touch.pageY * scale
this.touch.cursor = {
ms: this.controller.getElapsedTime(),
x: pageX,
y: pageY
}
var c = this.touchCircle var c = this.touchCircle
var pi = Math.PI var pi = Math.PI
var inPath = () => this.ctx.isPointInPath(pageX, pageY) var inPath = () => this.ctx.isPointInPath(pageX, pageY)
this.ctx.beginPath() this.ctx.beginPath()
this.ctx.ellipse(c.x, c.y, c.rx * 0.6, c.ry * 0.6, 0, pi, 0) this.ctx.ellipse(c.x, c.y, c.rx, c.ry, 0, pi, 0)
if(inPath()){
this.touchNote("don_c")
}else{
this.ctx.beginPath()
this.ctx.ellipse(c.x, c.y, c.rx * 0.9, c.ry * 0.9, 0, pi, 0)
if(inPath()){ if(inPath()){
if(pageX < this.winW / 2){ if(pageX < this.winW / 2){
@ -965,13 +906,7 @@ class View{
this.touchNote("don_r") this.touchNote("don_r")
} }
}else{ }else{
if(pageX < this.winW / 2){
this.ctx.beginPath()
this.ctx.ellipse(c.x, c.y, c.rx * 1.3, c.ry * 1.3, 0, pi, 0)
if(inPath()){
this.touchNote("ka_c")
}else if(pageX < this.winW / 2){
this.touchNote("ka_l") this.touchNote("ka_l")
}else{ }else{
this.touchNote("ka_r") this.touchNote("ka_r")
@ -979,45 +914,14 @@ class View{
} }
} }
} }
}
touchNote(note){ touchNote(note){
var keyboard = this.controller.keyboard var keyboard = this.controller.keyboard
var kbd = keyboard.getBindings() var kbd = keyboard.getBindings()
var ms = this.controller.game.getAccurateTime() var ms = this.controller.game.getAccurateTime()
this.touch[note] = ms this.touch = ms
if(note === "don_c"){
this.touchNote("don_l")
this.touchNote("don_r")
}else if(note === "ka_c"){
this.touchNote("ka_l")
this.touchNote("ka_r")
}else{
keyboard.setKey(kbd[note], false) keyboard.setKey(kbd[note], false)
keyboard.setKey(kbd[note], true, ms) keyboard.setKey(kbd[note], true, ms)
} }
}
toggleFullscreen(){
var root = document.documentElement
if("requestFullscreen" in root){
if(document.fullscreenElement){
document.exitFullscreen()
}else{
root.requestFullscreen()
}
}else if("webkitRequestFullscreen" in root){
if(document.webkitFullscreenElement){
document.webkitExitFullscreen()
}else{
root.webkitRequestFullscreen()
}
}else if("mozRequestFullScreen" in root){
if(document.mozFullScreenElement){
document.mozCancelFullScreen()
}else{
root.mozRequestFullScreen()
}
}
}
onmousemove(event){ onmousemove(event){
this.lastMousemove = this.controller.getElapsedTime() this.lastMousemove = this.controller.getElapsedTime()
this.cursorHidden = false this.cursorHidden = false
@ -1049,10 +953,10 @@ class View{
pageEvents.remove(this.touchFullBtn, "click") pageEvents.remove(this.touchFullBtn, "click")
pageEvents.remove(this.touchPauseBtn, "click") pageEvents.remove(this.touchPauseBtn, "click")
this.gameDiv.classList.remove("touch-visible") this.gameDiv.classList.remove("touch-visible")
delete this.touchBgDiv delete this.touchDrumDiv
delete this.touchDrumImg
delete this.touchFullBtn delete this.touchFullBtn
delete this.touchPauseBtn delete this.touchPauseBtn
delete this.touchBgBlueDiv
} }
delete this.pauseMenu delete this.pauseMenu
delete this.cursor delete this.cursor

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

@ -1,10 +1,7 @@
<div id="game"> <div id="game">
<h3 alt="" class="stroke-sub game-song"></h3> <h3 alt="" class="stroke-sub game-song"></h3>
<div id="touch-bg">
<div id="touch-bg-blue"></div>
<div id="touch-drum"> <div id="touch-drum">
<img src="/assets/img/touch_drum.png"> <img id="touch-drum-img" src="/assets/img/touch_drum.png">
</div>
</div> </div>
<canvas id="canvas"></canvas> <canvas id="canvas"></canvas>
<div id="pause-menu"> <div id="pause-menu">

1
public/src/views/songselect.html
View File

@ -1,3 +1,4 @@
<div id="song-select"> <div id="song-select">
<canvas id="song-sel-canvas"></canvas> <canvas id="song-sel-canvas"></canvas>
<img id="touch-full-btn" src="/assets/img/touch_fullscreen.png">
</div> </div>