mirror of
https://github.com/jiojciojsioe3/a3cjroijsiojiorj.git
synced 2024-11-14 23:11:51 +08:00
Change drum to match Switch, add fullscreen to songsel, fix tutorial
This commit is contained in:
parent
57632a83e5
commit
e1b8b45d88
@ -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>
|
||||
|
@ -51,50 +51,33 @@
|
||||
pointer-events: none;
|
||||
z-index: 1;
|
||||
}
|
||||
#touch-bg{
|
||||
#touch-drum{
|
||||
display: none;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 50%;
|
||||
height: 50%;
|
||||
background: url(/assets/img/touch_bg.png) center bottom;
|
||||
background-size: cover;
|
||||
overflow: hidden;
|
||||
}
|
||||
#touch-bg-blue{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background: url(/assets/img/touch_bg_blue.png) center bottom;
|
||||
background-size: cover;
|
||||
opacity: 0;
|
||||
}
|
||||
#touch-drum{
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
text-align: center;
|
||||
margin: auto;
|
||||
}
|
||||
#touch-drum img{
|
||||
#touch-drum-img{
|
||||
width: 100%;
|
||||
}
|
||||
#touch-buttons{
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 7vh;
|
||||
top: 6.5vh;
|
||||
right: 2vh;
|
||||
opacity: 0.5;
|
||||
z-index: 5;
|
||||
}
|
||||
#touch-buttons img{
|
||||
width: 12vh;
|
||||
width: 12.5vmin;
|
||||
height: 12.5vmin;
|
||||
}
|
||||
.touch-visible #touch-bg,
|
||||
.touch-visible #touch-drum,
|
||||
.touch-visible #touch-buttons{
|
||||
display: block;
|
||||
}
|
||||
|
@ -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;
|
||||
}
|
||||
|
@ -40,8 +40,6 @@ var assets = {
|
||||
"bg_score_p1.png",
|
||||
"bg_score_p2.png",
|
||||
"badge_auto.png",
|
||||
"touch_bg.png",
|
||||
"touch_bg_blue.png",
|
||||
"touch_drum.png",
|
||||
"touch_pause.png",
|
||||
"touch_fullscreen.png"
|
||||
|
@ -131,7 +131,7 @@ class Controller{
|
||||
if(!fadeIn){
|
||||
this.clean()
|
||||
}
|
||||
new SongSelect(false, fadeIn)
|
||||
new SongSelect(false, fadeIn, this.touchEnabled)
|
||||
}
|
||||
restartSong(){
|
||||
this.clean()
|
||||
|
@ -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
|
||||
|
29
public/src/js/main.js
Normal file
29
public/src/js/main.js
Normal 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()
|
||||
})
|
@ -58,8 +58,11 @@ class Scoresheet{
|
||||
event.preventDefault()
|
||||
this.canvas.style.cursor = ""
|
||||
this.state.pointerLocked = true
|
||||
}else if(event.which !== 1){
|
||||
return
|
||||
}else{
|
||||
this.state.pointerLocked = false
|
||||
if(event.which !== 1){
|
||||
return
|
||||
}
|
||||
}
|
||||
this.toNext()
|
||||
}
|
||||
@ -600,7 +603,7 @@ class Scoresheet{
|
||||
|
||||
if(elapsed >= 1000){
|
||||
this.clean()
|
||||
this.controller.songSelection(true)
|
||||
this.controller.songSelection(true, false, this.state.pointerLocked)
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -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")
|
||||
@ -198,6 +200,11 @@ class SongSelect{
|
||||
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){
|
||||
@ -1135,6 +1142,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
|
||||
}
|
||||
|
@ -15,7 +15,11 @@ class Titlescreen{
|
||||
}
|
||||
})
|
||||
}
|
||||
onPressed(){
|
||||
onPressed(event){
|
||||
if(event && event.type === "touchstart"){
|
||||
event.preventDefault()
|
||||
this.touched = true
|
||||
}
|
||||
this.titleScreen.style.cursor = "auto"
|
||||
this.clean()
|
||||
assets.sounds["don"].play()
|
||||
@ -25,7 +29,7 @@ class Titlescreen{
|
||||
if(localStorage.getItem("tutorial") !== "true"){
|
||||
new Tutorial()
|
||||
}else{
|
||||
new SongSelect()
|
||||
new SongSelect(false, false, this.touched)
|
||||
}
|
||||
}
|
||||
clean(){
|
||||
|
@ -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(){
|
||||
|
@ -51,32 +51,19 @@ 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
|
||||
}
|
||||
}
|
||||
this.touch = -Infinity
|
||||
|
||||
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.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", this.toggleFullscreen)
|
||||
pageEvents.add(this.touchFullBtn, "click", toggleFullscreen)
|
||||
|
||||
this.touchPauseBtn = document.getElementById("touch-pause-btn")
|
||||
pageEvents.add(this.touchPauseBtn, "click", () => {
|
||||
@ -189,13 +176,11 @@ class View{
|
||||
}
|
||||
})()
|
||||
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
|
||||
y: this.winH + this.touchDrum.h * 0.1,
|
||||
rx: this.touchDrum.w / 2 - this.touchDrum.h * 0.03,
|
||||
ry: this.touchDrum.h * 1.07
|
||||
}
|
||||
})()
|
||||
}
|
||||
@ -880,13 +865,7 @@ class View{
|
||||
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){
|
||||
@ -895,41 +874,15 @@ class View{
|
||||
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
|
||||
if(this.touch > ms - 150){
|
||||
if(!this.drumPadding){
|
||||
this.drumPadding = true
|
||||
this.touchDrumImg.style.paddingTop = "1%"
|
||||
}
|
||||
}else if(this.blueBgShown){
|
||||
this.blueBgShown = false
|
||||
this.touchBgBlueDiv.style.opacity = 0
|
||||
}else if(this.drumPadding){
|
||||
this.drumPadding = false
|
||||
this.touchDrumImg.style.paddingTop = ""
|
||||
}
|
||||
|
||||
var c = this.touchCircle
|
||||
var pi = Math.PI
|
||||
var lastDon = this.touch.don_l > this.touch.don_r ? this.touch.don_l : this.touch.don_r
|
||||
if(lastDon > ms - 150){
|
||||
this.ctx.fillStyle = "rgba(239, 86, 51, 0.5)"
|
||||
this.ctx.beginPath()
|
||||
this.ctx.ellipse(c.x, c.y, c.rx * 0.9, c.ry * 0.9, 0, pi, 0)
|
||||
this.ctx.fill()
|
||||
}
|
||||
if(this.touch.don_c > ms - 150){
|
||||
this.ctx.beginPath()
|
||||
this.ctx.ellipse(c.x, c.y, c.rx * 0.6, c.ry * 0.6, 0, pi, 0)
|
||||
this.ctx.fill()
|
||||
}
|
||||
if(this.touch.ka_c > ms - 150){
|
||||
this.ctx.fillStyle = "rgba(33, 191, 211, 0.5)"
|
||||
this.ctx.beginPath()
|
||||
this.ctx.ellipse(c.x, c.y, c.rx * 1.3, c.ry * 1.3, 0, pi, 0)
|
||||
this.ctx.ellipse(c.x, c.y, c.rx * 0.9, c.ry * 0.9, 0, 0, pi, true)
|
||||
this.ctx.fill()
|
||||
}
|
||||
|
||||
this.ctx.restore()
|
||||
}
|
||||
}
|
||||
ontouch(event){
|
||||
@ -939,43 +892,24 @@ class View{
|
||||
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)
|
||||
this.ctx.ellipse(c.x, c.y, c.rx, c.ry, 0, pi, 0)
|
||||
|
||||
if(inPath()){
|
||||
this.touchNote("don_c")
|
||||
}else{
|
||||
this.ctx.beginPath()
|
||||
this.ctx.ellipse(c.x, c.y, c.rx * 0.9, c.ry * 0.9, 0, pi, 0)
|
||||
|
||||
if(inPath()){
|
||||
if(pageX < this.winW / 2){
|
||||
this.touchNote("don_l")
|
||||
}else{
|
||||
this.touchNote("don_r")
|
||||
}
|
||||
if(pageX < this.winW / 2){
|
||||
this.touchNote("don_l")
|
||||
}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")
|
||||
}
|
||||
this.touchNote("don_r")
|
||||
}
|
||||
}else{
|
||||
if(pageX < this.winW / 2){
|
||||
this.touchNote("ka_l")
|
||||
}else{
|
||||
this.touchNote("ka_r")
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -984,39 +918,9 @@ class View{
|
||||
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()
|
||||
}
|
||||
}
|
||||
this.touch = ms
|
||||
keyboard.setKey(kbd[note], false)
|
||||
keyboard.setKey(kbd[note], true, ms)
|
||||
}
|
||||
onmousemove(event){
|
||||
this.lastMousemove = this.controller.getElapsedTime()
|
||||
@ -1049,10 +953,10 @@ class View{
|
||||
pageEvents.remove(this.touchFullBtn, "click")
|
||||
pageEvents.remove(this.touchPauseBtn, "click")
|
||||
this.gameDiv.classList.remove("touch-visible")
|
||||
delete this.touchBgDiv
|
||||
delete this.touchDrumDiv
|
||||
delete this.touchDrumImg
|
||||
delete this.touchFullBtn
|
||||
delete this.touchPauseBtn
|
||||
delete this.touchBgBlueDiv
|
||||
}
|
||||
delete this.pauseMenu
|
||||
delete this.cursor
|
||||
|
@ -1,10 +1,7 @@
|
||||
<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 id="touch-drum">
|
||||
<img id="touch-drum-img" src="/assets/img/touch_drum.png">
|
||||
</div>
|
||||
<canvas id="canvas"></canvas>
|
||||
<div id="pause-menu">
|
||||
|
@ -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>
|
||||
|
Loading…
Reference in New Issue
Block a user