diff --git a/public/index.html b/public/index.html index 742ea9a..da43ec0 100644 --- a/public/index.html +++ b/public/index.html @@ -14,7 +14,7 @@ 太鼓の達人ウェブ - Taiko no Tatsujin Web - + @@ -47,11 +47,12 @@ +
- + - \ No newline at end of file + diff --git a/public/src/css/game.css b/public/src/css/game.css index 8416bbe..776983a 100644 --- a/public/src/css/game.css +++ b/public/src/css/game.css @@ -51,3 +51,45 @@ pointer-events: none; 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; +} diff --git a/public/src/css/main.css b/public/src/css/main.css index 3ee4261..faeaba9 100644 --- a/public/src/css/main.css +++ b/public/src/css/main.css @@ -137,8 +137,9 @@ body{ border: 5px black solid; border-radius: 10px; height: 65%; - width: 50%; + max-width: 800px; padding: 20px; + margin: 8px; font-size: 16pt; position: relative; } @@ -214,3 +215,12 @@ kbd{ left: 0; margin: auto; } +#song-select #touch-full-btn{ + display: none; + position: absolute; + top: 0; + right: 0; + width: 12.5vmin; + height: 12.5vmin; + opacity: 0.5; +} diff --git a/public/src/js/assets.js b/public/src/js/assets.js index 6f1c873..1b8e7e4 100644 --- a/public/src/js/assets.js +++ b/public/src/js/assets.js @@ -39,7 +39,10 @@ var assets = { "bg_genre_7.png", "bg_score_p1.png", "bg_score_p2.png", - "badge_auto.png" + "badge_auto.png", + "touch_drum.png", + "touch_pause.png", + "touch_fullscreen.png" ], "audioSfx": [ "don.wav", diff --git a/public/src/js/controller.js b/public/src/js/controller.js index da8ec3c..ae49f8d 100644 --- a/public/src/js/controller.js +++ b/public/src/js/controller.js @@ -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" @@ -130,15 +131,15 @@ class Controller{ if(!fadeIn){ this.clean() } - new SongSelect(false, fadeIn) + new SongSelect(false, fadeIn, this.touchEnabled) } restartSong(){ this.clean() if(this.multiplayer){ - new loadSong(this.selectedSong, false, true) + new loadSong(this.selectedSong, false, true, this.touchEnabled) }else{ 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() } } @@ -202,6 +203,9 @@ class Controller{ } } clean(){ + if(this.syncWith){ + this.syncWith.clean() + } this.stopMainLoop() this.keyboard.clean() this.view.clean() diff --git a/public/src/js/game.js b/public/src/js/game.js index 5498ac9..b06ddd5 100644 --- a/public/src/js/game.js +++ b/public/src/js/game.js @@ -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() } } } @@ -339,21 +339,23 @@ class Game{ this.started = true this.sndTime = this.startDate - snd.buffer.getTime() * 1000 }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(){ if(this.isPaused()){ return this.elapsedTime }else{ - var currentDate = +new Date - 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 + return (+new Date) - this.startDate } } getCircles(){ diff --git a/public/src/js/keyboard.js b/public/src/js/keyboard.js index 67f6494..30871d1 100644 --- a/public/src/js/keyboard.js +++ b/public/src/js/keyboard.js @@ -79,11 +79,12 @@ 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") } - 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){ @@ -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 diff --git a/public/src/js/loader.js b/public/src/js/loader.js index ce99d0e..3da5613 100644 --- a/public/src/js/loader.js +++ b/public/src/js/loader.js @@ -1,5 +1,6 @@ class Loader{ - constructor(){ + constructor(callback){ + this.callback = callback this.loadedAssets = 0 this.assetsDiv = document.getElementById("assets") this.ajax("src/views/loader.html").then(this.run.bind(this)) @@ -83,7 +84,7 @@ class Loader{ Promise.all(this.promises).then(() => { this.clean() - new Titlescreen() + this.callback() }, this.errorMsg.bind(this)) } loadSound(name, gain){ @@ -132,8 +133,3 @@ class Loader{ delete this.promises } } - -var pageEvents = new PageEvents() -var loader = new Loader() -var snd = {} -var p2 diff --git a/public/src/js/loadsong.js b/public/src/js/loadsong.js index 0d58857..3ae4ebf 100644 --- a/public/src/js/loadsong.js +++ b/public/src/js/loadsong.js @@ -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() } } diff --git a/public/src/js/main.js b/public/src/js/main.js new file mode 100644 index 0000000..19254a9 --- /dev/null +++ b/public/src/js/main.js @@ -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() +}) diff --git a/public/src/js/scoresheet.js b/public/src/js/scoresheet.js index 8acd94c..df73a02 100644 --- a/public/src/js/scoresheet.js +++ b/public/src/js/scoresheet.js @@ -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,8 +54,15 @@ class Scoresheet{ } } mouseDown(event){ - if(event.which !== 1){ - return + if(event.type === "touchstart"){ + event.preventDefault() + this.canvas.style.cursor = "" + this.state.pointerLocked = true + }else{ + this.state.pointerLocked = false + if(event.which !== 1){ + return + } } this.toNext() } @@ -81,6 +86,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,7 +227,9 @@ class Scoresheet{ if(elapsed >= 0){ if(this.state.hasPointer === 0){ this.state.hasPointer = 1 - this.canvas.style.cursor = "pointer" + if(!this.state.pointerLocked){ + this.canvas.style.cursor = "pointer" + } } ctx.save() ctx.setTransform(1, 0, 0, 1, 0, 0) @@ -592,7 +603,7 @@ class Scoresheet{ if(elapsed >= 1000){ this.clean() - this.controller.songSelection(true) + this.controller.songSelection(true, false, this.state.pointerLocked) } } @@ -643,6 +654,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 } diff --git a/public/src/js/songselect.js b/public/src/js/songselect.js index 75dbfe1..e113b28 100644 --- a/public/src/js/songselect.js +++ b/public/src/js/songselect.js @@ -1,5 +1,7 @@ class SongSelect{ - constructor(fromTutorial, fadeIn){ + constructor(fromTutorial, fadeIn, touchEnabled){ + this.touchEnabled = touchEnabled + loader.changePage("songselect") this.canvas = document.getElementById("song-sel-canvas") this.ctx = this.canvas.getContext("2d") @@ -109,12 +111,16 @@ class SongSelect{ action: "random", category: "ランダム" }) - this.songs.push({ - title: "あそびかた説明", - skin: this.songSkin.tutorial, - action: "tutorial", - category: "ランダム" - }) + if(touchEnabled){ + fromTutorial = false + }else{ + this.songs.push({ + title: "あそびかた説明", + skin: this.songSkin.tutorial, + action: "tutorial", + category: "ランダム" + }) + } this.songs.push({ title: "もどる", skin: this.songSkin.back, @@ -141,16 +147,16 @@ class SongSelect{ this.selectedDiff = 0 assets.sounds["bgm_songsel"].playLoop(0.1, false, 0, 1.442, 3.506) - if(fromTutorial || !("selectedSong" in localStorage)){ - this.selectedSong = this.songs.findIndex(song => song.action === "tutorial") - this.playBgm(true) - }else{ + if(touchEnabled || !fromTutorial && "selectedSong" in localStorage){ if("selectedSong" in localStorage){ this.selectedSong = Math.min(Math.max(0, localStorage["selectedSong"] |0), this.songs.length) } assets.sounds["song-select"].play() snd.musicGain.fadeOut() this.playBgm(false) + }else{ + this.selectedSong = this.songs.findIndex(song => song.action === "tutorial") + this.playBgm(true) } if("selectedDiff" in localStorage){ 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.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)) + if(touchEnabled){ + this.touchFullBtn = document.getElementById("touch-full-btn") + this.touchFullBtn.style.display = "block" + pageEvents.add(this.touchFullBtn, "click", toggleFullscreen) + } } keyDown(event, code){ @@ -256,10 +268,21 @@ class SongSelect{ } mouseDown(event){ - if(event.which !== 1){ - return + if(event.type === "mousedown"){ + 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"){ var moveBy = this.songSelMouse(mouse.x, mouse.y) if(moveBy === 0){ @@ -276,12 +299,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,13 +321,16 @@ 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){ + if(!this.canvas){ + return + } if(enabled && this.state.hasPointer === false){ this.canvas.style.cursor = "pointer" this.state.hasPointer = true @@ -425,7 +451,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 +465,7 @@ class SongSelect{ "folder": selectedSong.id, "difficulty": this.difficultyId[difficulty], "category": selectedSong.category - }, shift, ctrl) + }, shift, ctrl, touch) } toTitleScreen(){ assets.sounds["cancel"].play() @@ -1123,6 +1149,11 @@ class SongSelect{ pageEvents.keyRemove(this, "all") pageEvents.remove(this.canvas, "mousemove") 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.canvas } diff --git a/public/src/js/titlescreen.js b/public/src/js/titlescreen.js index 905d8d4..63cdd89 100644 --- a/public/src/js/titlescreen.js +++ b/public/src/js/titlescreen.js @@ -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"], @@ -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() assets.sounds["don"].play() setTimeout(this.goNext.bind(this), 500) } goNext(){ - if(localStorage.getItem("tutorial") !== "true"){ + if(this.touched || localStorage.getItem("tutorial") === "true"){ + new SongSelect(false, false, this.touched) + }else{ new Tutorial() - } else { - new SongSelect() } } clean(){ 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 } } diff --git a/public/src/js/tutorial.js b/public/src/js/tutorial.js index 5589c81..ba37a0e 100644 --- a/public/src/js/tutorial.js +++ b/public/src/js/tutorial.js @@ -4,18 +4,26 @@ class Tutorial{ loader.changePage("tutorial") assets.sounds["bgm_setsume"].playLoop(0.1, false, 0, 1.054, 16.054) 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)) + this.gamepad = new Gamepad({ "confirm": ["start", "b"] }, this.onEnd.bind(this)) } - onEnd(){ + onEnd(event){ + var touched = false + if(event && event.type === "touchstart"){ + event.preventDefault() + touched = true + } this.clean() assets.sounds["don"].play() localStorage.setItem("tutorial", "true") setTimeout(() => { - new SongSelect(this.fromSongSel) + new SongSelect(this.fromSongSel, false, touched) }, 500) } clean(){ diff --git a/public/src/js/view.js b/public/src/js/view.js index cdba97b..1a60f6f 100644 --- a/public/src/js/view.js +++ b/public/src/js/view.js @@ -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,26 @@ class View{ this.beatInterval = this.controller.getSongData().beatInfo.beatInterval 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(){ this.ctx.font = "normal 14pt TnT" @@ -133,6 +154,35 @@ 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 = (() => { + 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(){ this.positionning() @@ -158,7 +208,10 @@ class View{ this.updateDonFaces() this.drawGogoTime() this.mouseIdle() - this.assets.drawAssets("foreground") + if(!this.touchEnabled){ + this.assets.drawAssets("foreground") + } + this.drawTouch() //this.drawTime() } updateDonFaces(){ @@ -809,6 +862,66 @@ class View{ 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){ this.lastMousemove = this.controller.getElapsedTime() this.cursorHidden = false @@ -832,10 +945,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.touchDrumDiv + delete this.touchDrumImg + delete this.touchFullBtn + delete this.touchPauseBtn } - this.cursor.parentNode.removeChild(this.cursor) delete this.pauseMenu delete this.cursor + delete this.gameDiv delete this.canvas delete this.ctx } diff --git a/public/src/views/game.html b/public/src/views/game.html index fe5ef6f..2763175 100644 --- a/public/src/views/game.html +++ b/public/src/views/game.html @@ -1,5 +1,8 @@

+
+ +
@@ -8,5 +11,8 @@
+
+ +
diff --git a/public/src/views/songselect.html b/public/src/views/songselect.html index ed1e45e..4eec0d9 100644 --- a/public/src/views/songselect.html +++ b/public/src/views/songselect.html @@ -1,3 +1,4 @@
+