juan/japanese-drum-game
1
0
Fork 0
mirror of https://github.com/jiojciojsioe3/a3cjroijsiojiorj.git synced 2024-12-23 09:46:15 +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">
<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">
@ -47,11 +47,12 @@
<script src="/src/js/viewassets.js"></script>
<script src="/src/js/gamerules.js"></script>
<script src="/src/js/canvasdraw.js"></script>
<script src="/src/js/loader.js"></script>
</head>
<body>
<div id="assets"></div>
<div id="screen"></div>
<script src="/src/js/loader.js"></script>
<script src="/src/js/main.js"></script>
</body>
</html>
</html>

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

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

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

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

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

@ -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",

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

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

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

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

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

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

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

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

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

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

19
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"],
@ -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
}
}

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

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

131
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,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
}

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

@ -1,5 +1,8 @@
<div id="game">
<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>
<div id="pause-menu">
<div class="window">
@ -8,5 +11,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>

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

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