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

View: Add touch controls

Browse Source
This commit is contained in:
LoveEevee 2018-10-05 20:03:59 +03:00
parent 724c82814e
commit c8acfc3188
12 changed files with 362 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/index.html
View File

@ -14,7 +14,7 @@
<meta charset="utf-8">
<title>太鼓の達人ウェブ - Taiko no Tatsujin Web</title>
<link rel="icon" href="/assets/img/favicon.png" type="image/png">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="viewport" content="width=device-width, user-scalable=no">
<link rel="stylesheet" href="/src/css/main.css"/>
<link rel="stylesheet" href="/src/css/loader.css">

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

@ -51,3 +51,62 @@
pointer-events: none;
z-index: 1;
}
#touch-bg{
display: none;
position: absolute;
right: 0;
bottom: 0;
left: 0;
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;
margin: auto;
}
#touch-drum img{
width: 100%;
}
#touch-buttons{
display: none;
position: absolute;
top: 7vh;
right: 2vh;
opacity: 0.5;
z-index: 5;
}
#touch-buttons img{
width: 12vh;
}
.touch-visible #touch-bg,
.touch-visible #touch-buttons{
display: block;
}
.touch-visible .window{
width: 80vmin;
height: 53vmin;
}
.touch-visible #pause-menu .window button{
font-size: 5vmin;
}
.touch-visible #pause-menu .window button.selected{
color: #000;
background: #fff;
border-color: #ae7a26;
}

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

@ -39,7 +39,12 @@ var assets = {
"bg_genre_7.png",
"bg_score_p1.png",
"bg_score_p2.png",
"badge_auto.png"
"badge_auto.png",
"touch_bg.png",
"touch_bg_blue.png",
"touch_drum.png",
"touch_pause.png",
"touch_fullscreen.png"
],
"audioSfx": [
"don.wav",

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

@ -1,9 +1,10 @@
class Controller{
constructor(selectedSong, songData, autoPlayEnabled, multiplayer){
constructor(selectedSong, songData, autoPlayEnabled, multiplayer, touchEnabled){
this.selectedSong = selectedSong
this.songData = songData
this.autoPlayEnabled = autoPlayEnabled
this.multiplayer = multiplayer
this.touchEnabled = touchEnabled
this.snd = this.multiplayer ? "_p" + this.multiplayer : ""
var backgroundURL = "/songs/" + this.selectedSong.folder + "/bg.png"
@ -202,6 +203,9 @@ class Controller{
}
}
clean(){
if(this.syncWith){
this.syncWith.clean()
}
this.stopMainLoop()
this.keyboard.clean()
this.view.clean()

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

@ -289,10 +289,10 @@ class Game{
this.controller.displayResults()
this.musicFadeOut++
}else if(this.musicFadeOut === 3 && (ms >= started + 9600 && ms >= this.controller.mainAsset.duration * 1000 + 1250)){
this.controller.clean()
if(this.controller.scoresheet){
this.controller.scoresheet.startRedraw()
}
this.controller.clean()
}
}
}

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

@ -79,12 +79,13 @@ class Keyboard{
this.setKey(keyCode, false)
}
})
}
}else{
this.checkKeySound(this.kbd["don_l"], "don")
this.checkKeySound(this.kbd["don_r"], "don")
this.checkKeySound(this.kbd["ka_l"], "ka")
this.checkKeySound(this.kbd["ka_r"], "ka")
}
}
checkMenuKeys(){
if(!this.controller.multiplayer){
var moveMenu = 0
@ -171,7 +172,7 @@ class Keyboard{
var circles = this.controller.getCircles()
var circle = circles[this.controller.getCurrentCircle()]
if(
(keyCode === this.kbd["don_l"] || keyCode === this.kbd["don_r"])
sound === "don"
&& circle
&& !circle.getPlayed()
&& circle.getType() === "balloon"
@ -191,6 +192,11 @@ class Keyboard{
if(down){
this.keys[keyCode] = true
this.keyTime[keyCode] = ms
if(keyCode == this.kbd.don_l || keyCode == this.kbd.don_r){
this.checkKeySound(keyCode, "don")
}else if(keyCode == this.kbd.ka_l || keyCode == this.kbd.ka_r){
this.checkKeySound(keyCode, "ka")
}
}else{
this.keys[keyCode] = false
this.waitKeyupScore[keyCode] = false

9
public/src/js/loadsong.js
View File

@ -1,8 +1,9 @@
class loadSong{
constructor(selectedSong, autoPlayEnabled, multiplayer){
constructor(selectedSong, autoPlayEnabled, multiplayer, touchEnabled){
this.selectedSong = selectedSong
this.multiplayer = multiplayer
this.autoPlayEnabled = autoPlayEnabled
this.multiplayer = multiplayer
this.touchEnabled = touchEnabled
loader.changePage("loadsong")
this.run()
}
@ -81,7 +82,7 @@ class loadSong{
}else if(event.type === "gamestart"){
this.clean()
loader.changePage("game")
var taikoGame1 = new Controller(this.selectedSong, this.songData, false, 1)
var taikoGame1 = new Controller(this.selectedSong, this.songData, false, 1, this.touchEnabled)
var taikoGame2 = new Controller(this.selectedSong2, this.song2Data, true, 2)
taikoGame1.run(taikoGame2)
}
@ -93,7 +94,7 @@ class loadSong{
}else{
this.clean()
loader.changePage("game")
var taikoGame = new Controller(this.selectedSong, this.songData, this.autoPlayEnabled)
var taikoGame = new Controller(this.selectedSong, this.songData, this.autoPlayEnabled, false, this.touchEnabled)
taikoGame.run()
}
}

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

@ -29,8 +29,6 @@ class Scoresheet{
this.redrawRunning = true
this.redrawBind = this.redraw.bind(this)
this.redraw()
pageEvents.keyAdd(this, "all", "down", this.keyDown.bind(this))
pageEvents.add(this.canvas, "mousedown", this.mouseDown.bind(this))
assets.sounds["results"].play()
assets.sounds["bgm_result"].playLoop(3, false, 0, 0.847, 17.689)
@ -56,7 +54,11 @@ class Scoresheet{
}
}
mouseDown(event){
if(event.which !== 1){
if(event.type === "touchstart"){
event.preventDefault()
this.canvas.style.cursor = ""
this.state.pointerLocked = true
}else if(event.which !== 1){
return
}
this.toNext()
@ -81,6 +83,10 @@ class Scoresheet{
requestAnimationFrame(this.redrawBind)
this.winW = null
this.winH = null
pageEvents.keyAdd(this, "all", "down", this.keyDown.bind(this))
pageEvents.add(this.canvas, "mousedown", this.mouseDown.bind(this))
pageEvents.add(this.canvas, "touchstart", this.mouseDown.bind(this))
}
redraw(){
@ -218,8 +224,10 @@ class Scoresheet{
if(elapsed >= 0){
if(this.state.hasPointer === 0){
this.state.hasPointer = 1
if(!this.state.pointerLocked){
this.canvas.style.cursor = "pointer"
}
}
ctx.save()
ctx.setTransform(1, 0, 0, 1, 0, 0)
this.draw.alpha(Math.min(1, elapsed / 400), ctx, ctx => {
@ -643,6 +651,7 @@ class Scoresheet{
this.redrawRunning = false
pageEvents.keyRemove(this, "all")
pageEvents.remove(this.canvas, "mousedown")
pageEvents.remove(this.canvas, "touchstart")
delete this.ctx
delete this.canvas
}

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

@ -197,6 +197,7 @@ class SongSelect{
pageEvents.keyAdd(this, "all", "down", this.keyDown.bind(this))
pageEvents.add(this.canvas, "mousemove", this.mouseMove.bind(this))
pageEvents.add(this.canvas, "mousedown", this.mouseDown.bind(this))
pageEvents.add(this.canvas, "touchstart", this.mouseDown.bind(this))
}
keyDown(event, code){
@ -256,10 +257,21 @@ class SongSelect{
}
mouseDown(event){
if(event.type === "mousedown"){
if(event.which !== 1){
return
}
var mouse = this.mouseOffset(event)
var mouse = this.mouseOffset(event.offsetX, event.offsetY)
var shift = event.shiftKey
var ctrl = event.ctrlKey
var touch = false
}else{
event.preventDefault()
var mouse = this.mouseOffset(event.touches[0].pageX, event.touches[0].pageY)
var shift = false
var ctrl = false
var touch = true
}
if(this.state.screen === "song"){
var moveBy = this.songSelMouse(mouse.x, mouse.y)
if(moveBy === 0){
@ -276,12 +288,12 @@ class SongSelect{
){
this.toSongSelect()
}else if(moveBy !== null){
this.toLoadSong(moveBy - 1, event.shiftKey, event.ctrlKey)
this.toLoadSong(moveBy - 1, shift, ctrl, touch)
}
}
}
mouseMove(event){
var mouse = this.mouseOffset(event)
var mouse = this.mouseOffset(event.offsetX, event.offsetY)
var moveTo = null
if(this.state.screen === "song"){
var moveTo = this.songSelMouse(mouse.x, mouse.y)
@ -298,10 +310,10 @@ class SongSelect{
}
this.pointer(moveTo !== null)
}
mouseOffset(event){
mouseOffset(offsetX, offsetY){
return {
x: (event.offsetX * this.pixelRatio - this.winW / 2) / this.ratio + 1024 / 2,
y: (event.offsetY * this.pixelRatio - this.winH / 2) / this.ratio + 720 / 2
x: (offsetX * this.pixelRatio - this.winW / 2) / this.ratio + 1024 / 2,
y: (offsetY * this.pixelRatio - this.winH / 2) / this.ratio + 720 / 2
}
}
pointer(enabled){
@ -425,7 +437,7 @@ class SongSelect{
assets.sounds["cancel"].play()
}
}
toLoadSong(difficulty, shift, ctrl){
toLoadSong(difficulty, shift, ctrl, touch){
this.clean()
var selectedSong = this.songs[this.selectedSong]
assets.sounds["diffsel"].stop()
@ -439,7 +451,7 @@ class SongSelect{
"folder": selectedSong.id,
"difficulty": this.difficultyId[difficulty],
"category": selectedSong.category
}, shift, ctrl)
}, shift, ctrl, touch)
}
toTitleScreen(){
assets.sounds["cancel"].play()

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

@ -3,7 +3,8 @@ class Titlescreen{
loader.changePage("titlescreen")
this.titleScreen = document.getElementById("title-screen")
pageEvents.keyOnce(this, 13, "down").then(this.onPressed.bind(this))
pageEvents.once(this.titleScreen, "click").then(this.onPressed.bind(this))
pageEvents.once(this.titleScreen, "mousedown").then(this.onPressed.bind(this))
pageEvents.once(this.titleScreen, "touchstart").then(this.onPressed.bind(this))
assets.sounds["title"].play()
this.gamepad = new Gamepad({
"start": ["b", "x", "y", "start"],
@ -15,6 +16,7 @@ class Titlescreen{
})
}
onPressed(){
this.titleScreen.style.cursor = "auto"
this.clean()
assets.sounds["don"].play()
setTimeout(this.goNext.bind(this), 500)
@ -30,7 +32,8 @@ class Titlescreen{
this.gamepad.clean()
assets.sounds["title"].stop()
pageEvents.keyRemove(this, 13)
pageEvents.remove(this.titleScreen, "click")
pageEvents.remove(this.titleScreen, "mousedown")
pageEvents.remove(this.titleScreen, "touchstart")
delete this.titleScreen
}
}

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

@ -7,6 +7,7 @@ class View{
this.pauseMenu = document.getElementById("pause-menu")
this.cursor = document.getElementById("cursor")
this.gameDiv = document.getElementById("game")
var docW = document.body.offsetWidth
var docH = document.body.offsetHeight
@ -14,7 +15,7 @@ class View{
this.canvas = new ScalableCanvas("canvas-p2", docW, docH / 3 * 2)
this.canvas.canvas.style.position = "absolute"
this.canvas.canvas.style.top = "33%"
document.getElementById("game").appendChild(this.canvas.canvas)
this.gameDiv.appendChild(this.canvas.canvas)
}else{
this.canvas = new ScalableCanvas("canvas", docW, docH)
}
@ -49,6 +50,39 @@ class View{
this.beatInterval = this.controller.getSongData().beatInfo.beatInterval
this.assets = new ViewAssets(this)
this.touch = {
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){
this.touchEnabled = true
this.touchBgDiv = document.getElementById("touch-bg")
this.touchBgBlueDiv = document.getElementById("touch-bg-blue")
this.touchDrumDiv = document.getElementById("touch-drum")
this.gameDiv.classList.add("touch-visible")
pageEvents.add(this.canvas.canvas, "touchstart", this.ontouch.bind(this))
this.touchFullBtn = document.getElementById("touch-full-btn")
pageEvents.add(this.touchFullBtn, "click", this.toggleFullscreen)
this.touchPauseBtn = document.getElementById("touch-pause-btn")
pageEvents.add(this.touchPauseBtn, "click", () => {
this.controller.togglePauseMenu()
})
}
}
run(){
this.ctx.font = "normal 14pt TnT"
@ -133,6 +167,37 @@ class View{
this.diffW = this.diffH * diffRatio
this.diffX = this.taikoX * 0.10
this.diffY = this.taikoY * 1.05 + this.taikoH * 0.19
this.touchDrum = (() => {
var sw = 842
var sh = 340
var x = 0
var y = this.barY + this.barH + 5
var paddingTop = this.barH * 0.1
var w = this.winW
var maxH = this.winH - (this.barY + this.barH + 5)
var h = maxH - paddingTop
if(w / h >= sw / sh){
w = h / sh * sw
x = (this.winW - w) / 2
y += paddingTop
}else{
h = w / sw * sh
y = y + (maxH - h)
}
return {
x: x, y: y, w: w, h: h
}
})()
this.touchCircle = (() => {
var padTop = this.touchDrum.h * 0.062
var padLeft = this.touchDrum.h * 0.05
return {
x: this.winW / 2,
y: this.winH + padTop,
rx: this.touchDrum.w / 2 - padLeft * 2,
ry: this.touchDrum.h
}
})()
}
refresh(){
this.positionning()
@ -158,7 +223,10 @@ class View{
this.updateDonFaces()
this.drawGogoTime()
this.mouseIdle()
if(!this.touchEnabled){
this.assets.drawAssets("foreground")
}
this.drawTouch()
//this.drawTime()
}
updateDonFaces(){
@ -809,6 +877,147 @@ class View{
don.setAnimationEnd(ms + length * don.speed, don.normalAnimation)
}
}
drawTouch(){
if(this.touchEnabled){
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 drumHeight = this.touchDrum.h / this.canvas.scale
if(drumHeight !== this.touchDrumHeight || drumWidth !== this.touchDrumWidth){
this.touchDrumWidth = drumWidth
this.touchDrumHeight = drumHeight
this.touchDrumDiv.style.width = drumWidth + "px"
this.touchDrumDiv.style.height = drumHeight + "px"
}
var lastKa = this.touch.ka_l > this.touch.ka_r ? this.touch.ka_l : this.touch.ka_r
if(ms < lastKa + 150){
if(!this.blueBgShown){
this.blueBgShown = true
this.touchBgBlueDiv.style.opacity = 0.5
}
}else if(this.blueBgShown){
this.blueBgShown = false
this.touchBgBlueDiv.style.opacity = 0
}
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){
for(let touch of event.touches){
event.preventDefault()
var scale = this.canvas.scale
var pageX = touch.pageX * scale
var pageY = touch.pageY * scale
this.touch.cursor = {
ms: this.controller.getElapsedTime(),
x: pageX,
y: pageY
}
var c = this.touchCircle
var pi = Math.PI
var inPath = () => this.ctx.isPointInPath(pageX, pageY)
this.ctx.beginPath()
this.ctx.ellipse(c.x, c.y, c.rx * 0.6, c.ry * 0.6, 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(pageX < this.winW / 2){
this.touchNote("don_l")
}else{
this.touchNote("don_r")
}
}else{
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")
}else{
this.touchNote("ka_r")
}
}
}
}
}
touchNote(note){
var keyboard = this.controller.keyboard
var kbd = keyboard.getBindings()
var ms = this.controller.game.getAccurateTime()
this.touch[note] = 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], 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){
this.lastMousemove = this.controller.getElapsedTime()
this.cursorHidden = false
@ -832,10 +1041,22 @@ class View{
pageEvents.mouseRemove(this)
if(this.controller.multiplayer === 2){
this.canvas.canvas.parentNode.removeChild(this.canvas.canvas)
}
}else{
this.cursor.parentNode.removeChild(this.cursor)
}
if(this.touchEnabled){
pageEvents.remove(this.canvas.canvas, "touchstart")
pageEvents.remove(this.touchFullBtn, "click")
pageEvents.remove(this.touchPauseBtn, "click")
this.gameDiv.classList.remove("touch-visible")
delete this.touchBgDiv
delete this.touchFullBtn
delete this.touchPauseBtn
delete this.touchBgBlueDiv
}
delete this.pauseMenu
delete this.cursor
delete this.gameDiv
delete this.canvas
delete this.ctx
}

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

@ -1,5 +1,11 @@
<div id="game">
<h3 alt="" class="stroke-sub game-song"></h3>
<div id="touch-bg">
<div id="touch-bg-blue"></div>
<div id="touch-drum">
<img src="/assets/img/touch_drum.png">
</div>
</div>
<canvas id="canvas"></canvas>
<div id="pause-menu">
<div class="window">
@ -8,5 +14,8 @@
<button type="button" id="song-selection-butt">Song selection</button>
</div>
</div>
<div id="touch-buttons">
<img id="touch-full-btn" src="/assets/img/touch_fullscreen.png"><img id="touch-pause-btn" src="/assets/img/touch_pause.png">
</div>
<div id="cursor"></div>
</div>