juan/japanese-drum-game
1
0
Fork 0
mirror of https://github.com/jiojciojsioe3/a3cjroijsiojiorj.git synced 2024-11-15 07:21:50 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #42 from LoveEevee/view-touch-controls

Browse Source 
View: Add touch controls
This commit is contained in:
Bui 2018-10-06 16:15:57 +01:00 committed by GitHub
commit b6d9f29abc
17 changed files with 358 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
public/index.html
View File

@ -14,7 +14,7 @@
<meta charset="utf-8"> <meta charset="utf-8">
<title>太鼓の達人ウェブ - Taiko no Tatsujin Web</title> <title>太鼓の達人ウェブ - Taiko no Tatsujin Web</title>
<link rel="icon" href="/assets/img/favicon.png" type="image/png"> <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/main.css"/>
<link rel="stylesheet" href="/src/css/loader.css"> <link rel="stylesheet" href="/src/css/loader.css">
@ -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>

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

@ -51,3 +51,45 @@
pointer-events: none; pointer-events: none;
z-index: 1; z-index: 1;
} }
#touch-drum{
display: none;
position: absolute;
right: 0;
bottom: 0;
left: 0;
width: 50%;
height: 50%;
text-align: center;
margin: auto;
}
#touch-drum-img{
width: 100%;
}
#touch-buttons{
display: none;
position: absolute;
top: 6.5vh;
right: 2vh;
opacity: 0.5;
z-index: 5;
}
#touch-buttons img{
width: 12.5vmin;
height: 12.5vmin;
}
.touch-visible #touch-drum,
.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;
}

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

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

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

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

@ -1,9 +1,10 @@
class Controller{ class Controller{
constructor(selectedSong, songData, autoPlayEnabled, multiplayer){ constructor(selectedSong, songData, autoPlayEnabled, multiplayer, touchEnabled){
this.selectedSong = selectedSong this.selectedSong = selectedSong
this.songData = songData this.songData = songData
this.autoPlayEnabled = autoPlayEnabled this.autoPlayEnabled = autoPlayEnabled
this.multiplayer = multiplayer this.multiplayer = multiplayer
this.touchEnabled = touchEnabled
this.snd = this.multiplayer ? "_p" + this.multiplayer : "" this.snd = this.multiplayer ? "_p" + this.multiplayer : ""
var backgroundURL = "/songs/" + this.selectedSong.folder + "/bg.png" var backgroundURL = "/songs/" + this.selectedSong.folder + "/bg.png"
@ -130,15 +131,15 @@ 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()
if(this.multiplayer){ if(this.multiplayer){
new loadSong(this.selectedSong, false, true) new loadSong(this.selectedSong, false, true, this.touchEnabled)
}else{ }else{
loader.changePage("game") 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() taikoGame.run()
} }
} }
@ -202,6 +203,9 @@ class Controller{
} }
} }
clean(){ clean(){
if(this.syncWith){
this.syncWith.clean()
}
this.stopMainLoop() this.stopMainLoop()
this.keyboard.clean() this.keyboard.clean()
this.view.clean() this.view.clean()

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

@ -289,10 +289,10 @@ class Game{
this.controller.displayResults() this.controller.displayResults()
this.musicFadeOut++ this.musicFadeOut++
}else if(this.musicFadeOut === 3 && (ms >= started + 9600 && ms >= this.controller.mainAsset.duration * 1000 + 1250)){ }else if(this.musicFadeOut === 3 && (ms >= started + 9600 && ms >= this.controller.mainAsset.duration * 1000 + 1250)){
this.controller.clean()
if(this.controller.scoresheet){ if(this.controller.scoresheet){
this.controller.scoresheet.startRedraw() this.controller.scoresheet.startRedraw()
} }
this.controller.clean()
} }
} }
} }
@ -339,21 +339,23 @@ class Game{
this.started = true this.started = true
this.sndTime = this.startDate - snd.buffer.getTime() * 1000 this.sndTime = this.startDate - snd.buffer.getTime() * 1000
}else if(ms < 0 || ms >= 0 && this.started){ }else if(ms < 0 || ms >= 0 && this.started){
this.elapsedTime = this.getAccurateTime(ms >= 0) var currentDate = +new Date
if(!this.controller.touchEnabled){
var sndTime = currentDate - snd.buffer.getTime() * 1000
var lag = sndTime - this.sndTime
if(Math.abs(lag) >= 50){
this.startDate += lag
this.sndTime = sndTime
}
}
this.elapsedTime = currentDate - this.startDate
} }
} }
getAccurateTime(){ getAccurateTime(){
if(this.isPaused()){ if(this.isPaused()){
return this.elapsedTime return this.elapsedTime
}else{ }else{
var currentDate = +new Date return (+new Date) - this.startDate
var sndTime = currentDate - snd.buffer.getTime() * 1000
var lag = sndTime - this.sndTime
if(Math.abs(lag) >= 50){
this.startDate += lag
this.sndTime = sndTime
}
return currentDate - this.startDate
} }
} }
getCircles(){ getCircles(){

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

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

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

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

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

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

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

@ -29,8 +29,6 @@ class Scoresheet{
this.redrawRunning = true this.redrawRunning = true
this.redrawBind = this.redraw.bind(this) this.redrawBind = this.redraw.bind(this)
this.redraw() 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["results"].play()
assets.sounds["bgm_result"].playLoop(3, false, 0, 0.847, 17.689) assets.sounds["bgm_result"].playLoop(3, false, 0, 0.847, 17.689)
@ -56,8 +54,15 @@ class Scoresheet{
} }
} }
mouseDown(event){ mouseDown(event){
if(event.which !== 1){ if(event.type === "touchstart"){
return event.preventDefault()
this.canvas.style.cursor = ""
this.state.pointerLocked = true
}else{
this.state.pointerLocked = false
if(event.which !== 1){
return
}
} }
this.toNext() this.toNext()
} }
@ -81,6 +86,10 @@ class Scoresheet{
requestAnimationFrame(this.redrawBind) requestAnimationFrame(this.redrawBind)
this.winW = null this.winW = null
this.winH = 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(){ redraw(){
@ -218,7 +227,9 @@ class Scoresheet{
if(elapsed >= 0){ if(elapsed >= 0){
if(this.state.hasPointer === 0){ if(this.state.hasPointer === 0){
this.state.hasPointer = 1 this.state.hasPointer = 1
this.canvas.style.cursor = "pointer" if(!this.state.pointerLocked){
this.canvas.style.cursor = "pointer"
}
} }
ctx.save() ctx.save()
ctx.setTransform(1, 0, 0, 1, 0, 0) ctx.setTransform(1, 0, 0, 1, 0, 0)
@ -592,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)
} }
} }
@ -643,6 +654,7 @@ class Scoresheet{
this.redrawRunning = false this.redrawRunning = false
pageEvents.keyRemove(this, "all") pageEvents.keyRemove(this, "all")
pageEvents.remove(this.canvas, "mousedown") pageEvents.remove(this.canvas, "mousedown")
pageEvents.remove(this.canvas, "touchstart")
delete this.ctx delete this.ctx
delete this.canvas delete this.canvas
} }

73
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")
@ -109,12 +111,16 @@ class SongSelect{
action: "random", action: "random",
category: "ランダム" category: "ランダム"
}) })
this.songs.push({ if(touchEnabled){
title: "あそびかた説明", fromTutorial = false
skin: this.songSkin.tutorial, }else{
action: "tutorial", this.songs.push({
category: "ランダム" title: "あそびかた説明",
}) skin: this.songSkin.tutorial,
action: "tutorial",
category: "ランダム"
})
}
this.songs.push({ this.songs.push({
title: "もどる", title: "もどる",
skin: this.songSkin.back, skin: this.songSkin.back,
@ -141,16 +147,16 @@ class SongSelect{
this.selectedDiff = 0 this.selectedDiff = 0
assets.sounds["bgm_songsel"].playLoop(0.1, false, 0, 1.442, 3.506) assets.sounds["bgm_songsel"].playLoop(0.1, false, 0, 1.442, 3.506)
if(fromTutorial || !("selectedSong" in localStorage)){ if(touchEnabled || !fromTutorial && "selectedSong" in localStorage){
this.selectedSong = this.songs.findIndex(song => song.action === "tutorial")
this.playBgm(true)
}else{
if("selectedSong" in localStorage){ if("selectedSong" in localStorage){
this.selectedSong = Math.min(Math.max(0, localStorage["selectedSong"] |0), this.songs.length) this.selectedSong = Math.min(Math.max(0, localStorage["selectedSong"] |0), this.songs.length)
} }
assets.sounds["song-select"].play() assets.sounds["song-select"].play()
snd.musicGain.fadeOut() snd.musicGain.fadeOut()
this.playBgm(false) this.playBgm(false)
}else{
this.selectedSong = this.songs.findIndex(song => song.action === "tutorial")
this.playBgm(true)
} }
if("selectedDiff" in localStorage){ if("selectedDiff" in localStorage){
this.selectedDiff = Math.min(Math.max(0, localStorage["selectedDiff"] |0), 4) this.selectedDiff = Math.min(Math.max(0, localStorage["selectedDiff"] |0), 4)
@ -197,6 +203,12 @@ class SongSelect{
pageEvents.keyAdd(this, "all", "down", this.keyDown.bind(this)) pageEvents.keyAdd(this, "all", "down", this.keyDown.bind(this))
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))
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){
@ -256,10 +268,21 @@ class SongSelect{
} }
mouseDown(event){ mouseDown(event){
if(event.which !== 1){ if(event.type === "mousedown"){
return if(event.which !== 1){
return
}
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
} }
var mouse = this.mouseOffset(event)
if(this.state.screen === "song"){ if(this.state.screen === "song"){
var moveBy = this.songSelMouse(mouse.x, mouse.y) var moveBy = this.songSelMouse(mouse.x, mouse.y)
if(moveBy === 0){ if(moveBy === 0){
@ -276,12 +299,12 @@ class SongSelect{
){ ){
this.toSongSelect() this.toSongSelect()
}else if(moveBy !== null){ }else if(moveBy !== null){
this.toLoadSong(moveBy - 1, event.shiftKey, event.ctrlKey) this.toLoadSong(moveBy - 1, shift, ctrl, touch)
} }
} }
} }
mouseMove(event){ mouseMove(event){
var mouse = this.mouseOffset(event) var mouse = this.mouseOffset(event.offsetX, event.offsetY)
var moveTo = null var moveTo = null
if(this.state.screen === "song"){ if(this.state.screen === "song"){
var moveTo = this.songSelMouse(mouse.x, mouse.y) var moveTo = this.songSelMouse(mouse.x, mouse.y)
@ -298,13 +321,16 @@ class SongSelect{
} }
this.pointer(moveTo !== null) this.pointer(moveTo !== null)
} }
mouseOffset(event){ mouseOffset(offsetX, offsetY){
return { return {
x: (event.offsetX * this.pixelRatio - this.winW / 2) / this.ratio + 1024 / 2, x: (offsetX * this.pixelRatio - this.winW / 2) / this.ratio + 1024 / 2,
y: (event.offsetY * this.pixelRatio - this.winH / 2) / this.ratio + 720 / 2 y: (offsetY * this.pixelRatio - this.winH / 2) / this.ratio + 720 / 2
} }
} }
pointer(enabled){ pointer(enabled){
if(!this.canvas){
return
}
if(enabled && this.state.hasPointer === false){ if(enabled && this.state.hasPointer === false){
this.canvas.style.cursor = "pointer" this.canvas.style.cursor = "pointer"
this.state.hasPointer = true this.state.hasPointer = true
@ -425,7 +451,7 @@ class SongSelect{
assets.sounds["cancel"].play() assets.sounds["cancel"].play()
} }
} }
toLoadSong(difficulty, shift, ctrl){ toLoadSong(difficulty, shift, ctrl, touch){
this.clean() this.clean()
var selectedSong = this.songs[this.selectedSong] var selectedSong = this.songs[this.selectedSong]
assets.sounds["diffsel"].stop() assets.sounds["diffsel"].stop()
@ -439,7 +465,7 @@ class SongSelect{
"folder": selectedSong.id, "folder": selectedSong.id,
"difficulty": this.difficultyId[difficulty], "difficulty": this.difficultyId[difficulty],
"category": selectedSong.category "category": selectedSong.category
}, shift, ctrl) }, shift, ctrl, touch)
} }
toTitleScreen(){ toTitleScreen(){
assets.sounds["cancel"].play() assets.sounds["cancel"].play()
@ -1123,6 +1149,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
} }

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

@ -3,7 +3,8 @@ class Titlescreen{
loader.changePage("titlescreen") loader.changePage("titlescreen")
this.titleScreen = document.getElementById("title-screen") this.titleScreen = document.getElementById("title-screen")
pageEvents.keyOnce(this, 13, "down").then(this.onPressed.bind(this)) 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() assets.sounds["title"].play()
this.gamepad = new Gamepad({ this.gamepad = new Gamepad({
"start": ["b", "x", "y", "start"], "start": ["b", "x", "y", "start"],
@ -14,23 +15,29 @@ class Titlescreen{
} }
}) })
} }
onPressed(){ onPressed(event){
if(event && event.type === "touchstart"){
event.preventDefault()
this.touched = true
}
this.titleScreen.style.cursor = "auto"
this.clean() this.clean()
assets.sounds["don"].play() assets.sounds["don"].play()
setTimeout(this.goNext.bind(this), 500) setTimeout(this.goNext.bind(this), 500)
} }
goNext(){ goNext(){
if(localStorage.getItem("tutorial") !== "true"){ if(this.touched || localStorage.getItem("tutorial") === "true"){
new SongSelect(false, false, this.touched)
}else{
new Tutorial() new Tutorial()
} else {
new SongSelect()
} }
} }
clean(){ clean(){
this.gamepad.clean() this.gamepad.clean()
assets.sounds["title"].stop() assets.sounds["title"].stop()
pageEvents.keyRemove(this, 13) pageEvents.keyRemove(this, 13)
pageEvents.remove(this.titleScreen, "click") pageEvents.remove(this.titleScreen, "mousedown")
pageEvents.remove(this.titleScreen, "touchstart")
delete this.titleScreen delete this.titleScreen
} }
} }

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

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

@ -7,6 +7,7 @@ class View{
this.pauseMenu = document.getElementById("pause-menu") this.pauseMenu = document.getElementById("pause-menu")
this.cursor = document.getElementById("cursor") this.cursor = document.getElementById("cursor")
this.gameDiv = document.getElementById("game")
var docW = document.body.offsetWidth var docW = document.body.offsetWidth
var docH = document.body.offsetHeight var docH = document.body.offsetHeight
@ -14,7 +15,7 @@ class View{
this.canvas = new ScalableCanvas("canvas-p2", docW, docH / 3 * 2) this.canvas = new ScalableCanvas("canvas-p2", docW, docH / 3 * 2)
this.canvas.canvas.style.position = "absolute" this.canvas.canvas.style.position = "absolute"
this.canvas.canvas.style.top = "33%" this.canvas.canvas.style.top = "33%"
document.getElementById("game").appendChild(this.canvas.canvas) this.gameDiv.appendChild(this.canvas.canvas)
}else{ }else{
this.canvas = new ScalableCanvas("canvas", docW, docH) this.canvas = new ScalableCanvas("canvas", docW, docH)
} }
@ -49,6 +50,26 @@ 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 = -Infinity
if(this.controller.touchEnabled){
this.touchEnabled = true
this.touchDrumDiv = document.getElementById("touch-drum")
this.touchDrumImg = document.getElementById("touch-drum-img")
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", toggleFullscreen)
this.touchPauseBtn = document.getElementById("touch-pause-btn")
pageEvents.add(this.touchPauseBtn, "click", () => {
this.controller.togglePauseMenu()
})
}
} }
run(){ run(){
this.ctx.font = "normal 14pt TnT" this.ctx.font = "normal 14pt TnT"
@ -133,6 +154,35 @@ class View{
this.diffW = this.diffH * diffRatio this.diffW = this.diffH * diffRatio
this.diffX = this.taikoX * 0.10 this.diffX = this.taikoX * 0.10
this.diffY = this.taikoY * 1.05 + this.taikoH * 0.19 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 = (() => {
return {
x: this.winW / 2,
y: this.winH + this.touchDrum.h * 0.1,
rx: this.touchDrum.w / 2 - this.touchDrum.h * 0.03,
ry: this.touchDrum.h * 1.07
}
})()
} }
refresh(){ refresh(){
this.positionning() this.positionning()
@ -158,7 +208,10 @@ class View{
this.updateDonFaces() this.updateDonFaces()
this.drawGogoTime() this.drawGogoTime()
this.mouseIdle() this.mouseIdle()
this.assets.drawAssets("foreground") if(!this.touchEnabled){
this.assets.drawAssets("foreground")
}
this.drawTouch()
//this.drawTime() //this.drawTime()
} }
updateDonFaces(){ updateDonFaces(){
@ -809,6 +862,66 @@ class View{
don.setAnimationEnd(ms + length * don.speed, don.normalAnimation) don.setAnimationEnd(ms + length * don.speed, don.normalAnimation)
} }
} }
drawTouch(){
if(this.touchEnabled){
var ms = this.controller.getElapsedTime()
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"
}
if(this.touch > ms - 100){
if(!this.drumPadding){
this.drumPadding = true
this.touchDrumImg.style.paddingTop = "1%"
}
}else if(this.drumPadding){
this.drumPadding = false
this.touchDrumImg.style.paddingTop = ""
}
}
}
ontouch(event){
for(let touch of event.changedTouches){
event.preventDefault()
var scale = this.canvas.scale
var pageX = touch.pageX * scale
var pageY = touch.pageY * scale
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, c.ry, 0, pi, 0)
if(inPath()){
if(pageX < this.winW / 2){
this.touchNote("don_l")
}else{
this.touchNote("don_r")
}
}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 = ms
keyboard.setKey(kbd[note], false)
keyboard.setKey(kbd[note], true, ms)
}
onmousemove(event){ onmousemove(event){
this.lastMousemove = this.controller.getElapsedTime() this.lastMousemove = this.controller.getElapsedTime()
this.cursorHidden = false this.cursorHidden = false
@ -832,10 +945,22 @@ class View{
pageEvents.mouseRemove(this) pageEvents.mouseRemove(this)
if(this.controller.multiplayer === 2){ if(this.controller.multiplayer === 2){
this.canvas.canvas.parentNode.removeChild(this.canvas.canvas) 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.touchDrumDiv
delete this.touchDrumImg
delete this.touchFullBtn
delete this.touchPauseBtn
} }
this.cursor.parentNode.removeChild(this.cursor)
delete this.pauseMenu delete this.pauseMenu
delete this.cursor delete this.cursor
delete this.gameDiv
delete this.canvas delete this.canvas
delete this.ctx delete this.ctx
} }

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

@ -1,5 +1,8 @@
<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-drum">
<img id="touch-drum-img" src="/assets/img/touch_drum.png">
</div>
<canvas id="canvas"></canvas> <canvas id="canvas"></canvas>
<div id="pause-menu"> <div id="pause-menu">
<div class="window"> <div class="window">
@ -8,5 +11,8 @@
<button type="button" id="song-selection-butt">Song selection</button> <button type="button" id="song-selection-butt">Song selection</button>
</div> </div>
</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 id="cursor"></div>
</div> </div>

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>