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

Scalable game canvas

Browse Source
This commit is contained in:
LoveEevee 2018-09-09 07:09:15 +03:00
parent a05787d8e1
commit 1d67575b66
5 changed files with 89 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
public/index.html
View File

@ -48,6 +48,7 @@
<script type='application/javascript' src='/src/js/mekadon.js'></script> <script type='application/javascript' src='/src/js/mekadon.js'></script>
<script type='application/javascript' src='/src/js/gamepad.js'></script> <script type='application/javascript' src='/src/js/gamepad.js'></script>
<script type='application/javascript' src='/src/js/tutorial.js'></script> <script type='application/javascript' src='/src/js/tutorial.js'></script>
<script type='application/javascript' src='/src/js/scalablecanvas.js'></script>
</head> </head>
<body> <body>

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

@ -28,14 +28,14 @@
width: 90%; width: 90%;
height: 25%; height: 25%;
display: block; display: block;
margin: auto auto 30px; margin: 0 auto;
cursor: pointer; cursor: pointer;
border:5px solid #ae7a26; border:.5vmin solid #ae7a26;
background: rgb(255, 255, 255); background: rgb(255, 255, 255);
color: black; color: black;
font-family: TnT; font-family: TnT;
font-size: 5vmin; font-size: 3.5vmin;
border-radius: 10px; border-radius: 1.5vmin;
} }
#pause-menu button:hover{ #pause-menu button:hover{

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

@ -31,17 +31,22 @@ html, body{
} }
.window{ .window{
font-size: 14pt; width: 60vmin;
width: 30%; height: 23vmin;
height: 30%; padding: 3vmin;
padding: 30px;
color: black; color: black;
background: rgba(255, 220, 47, 0.95); background: rgba(255, 220, 47, 0.95);
border: 7px outset #f4ae00; border: .5vmin outset #f4ae00;
position:relative;
box-shadow: 2px 2px 10px black; box-shadow: 2px 2px 10px black;
top: 35%; margin: auto;
left: 35%; position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: flex;
flex-direction: column;
justify-content: space-between;
} }
@ -59,7 +64,7 @@ html, body{
position: absolute; position: absolute;
right: 0; right: 0;
font-size: 5vmin; font-size: 5vmin;
margin: 30px 30px 0px 0px; margin: 3vmin 3vmin 0px 0px;
color: white; color: white;
float: right; float: right;
z-index: 1; z-index: 1;

42
public/src/js/scalablecanvas.js Normal file
View File

@ -0,0 +1,42 @@
class ScalableCanvas{
constructor(id, width, height, noStyle){
var oldCanvas = document.getElementById(id)
if(oldCanvas){
this.canvas = oldCanvas
}else{
this.canvas = document.createElement("canvas")
this.canvas.id = id
}
this.ctx = this.canvas.getContext("2d")
this.rescale()
this.resize(width, height, noStyle)
}
resize(width, height, noStyle){
if(width != this.width || height != this.height){
this.width = width
this.height = height
this.scaledWidth = width * this.scale
this.canvas.width = this.scaledWidth
this.scaledHeight = height * this.scale
this.canvas.height = this.scaledHeight
if(noStyle || this.scale == 1){
if(this.canvas.style.width){
this.canvas.style.width = ""
}
if(this.canvas.style.height){
this.canvas.style.height = ""
}
}else{
this.canvas.style.width = width + "px"
this.canvas.style.height = height + "px"
}
}
}
rescale(){
var scale = window.devicePixelRatio || 1
if(scale != this.scale){
this.ctx.scale(scale, scale)
this.scale = scale
}
}
}

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

@ -3,12 +3,13 @@ class View{
this.controller = controller this.controller = controller
this.bg = bg this.bg = bg
this.diff = diff this.diff = diff
this.canvas = document.getElementById("canvas")
this.ctx = this.canvas.getContext("2d")
this.winW = $(window).width() this.winW = $(window).width()
this.winH = $(window).height() this.winH = $(window).height()
this.canvas = new ScalableCanvas("canvas", this.winW, this.winH)
this.ctx = this.canvas.ctx
this.taikoSquareW = this.winW / 4 this.taikoSquareW = this.winW / 4
this.slotX = this.taikoSquareW + 100 this.slotX = this.taikoSquareW + 100
@ -27,7 +28,7 @@ class View{
this.currentBigDonFace = 1 this.currentBigDonFace = 1
this.nextBeat = 0 this.nextBeat = 0
this.songTitle = this.title this.songTitle = title
this.songDifficulty = this.diff.split(".").slice(0, -1).join(".") this.songDifficulty = this.diff.split(".").slice(0, -1).join(".")
} }
@ -49,10 +50,11 @@ class View{
} }
positionning(){ positionning(){
this.winW = $(window).width() this.canvas.rescale()
this.winH = $(window).height() this.canvas.resize($(window).width(), $(window).height())
this.canvas.width = this.winW this.winW = this.canvas.scaledWidth
this.canvas.height = this.winH this.winH = this.canvas.scaledHeight
this.barY = 0.25 * this.winH this.barY = 0.25 * this.winH
this.barH = 0.23 * this.winH this.barH = 0.23 * this.winH
this.lyricsBarH = 0.2 * this.barH this.lyricsBarH = 0.2 * this.barH
@ -61,7 +63,7 @@ class View{
this.taikoX = this.taikoSquareW * 0.76 - this.taikoW / 2 this.taikoX = this.taikoSquareW * 0.76 - this.taikoW / 2
this.taikoY = this.barY + 5 this.taikoY = this.barY + 5
this.taikoSquareW = this.winW / 4 this.taikoSquareW = this.winW / 4
this.slotX = this.taikoSquareW + 100 this.slotX = this.taikoSquareW + this.barH * 0.45
this.scoreSquareW = this.taikoSquareW * 0.55 this.scoreSquareW = this.taikoSquareW * 0.55
this.scoreSquareH = this.barH * 0.25 this.scoreSquareH = this.barH * 0.25
this.circleSize = this.barH * 0.15 this.circleSize = this.barH * 0.15
@ -93,6 +95,8 @@ class View{
this.positionning() this.positionning()
this.distanceForCircle = this.winW - this.slotX this.distanceForCircle = this.winW - this.slotX
this.ctx.clearRect(0, 0, this.canvas.scaledWidth, this.canvas.scaledHeight)
// Draw // Draw
this.drawBar() this.drawBar()
this.drawSlot() this.drawSlot()
@ -124,6 +128,8 @@ class View{
} }
drawHPBar(){ drawHPBar(){
var z = this.canvas.scale
var bottomSquareX = this.taikoSquareW var bottomSquareX = this.taikoSquareW
var borderSize = this.HPBarH * 0.2 var borderSize = this.HPBarH * 0.2
this.ctx.fillStyle = "#000" this.ctx.fillStyle = "#000"
@ -139,13 +145,13 @@ class View{
bottomSquareX + borderSize, bottomSquareX + borderSize,
this.HPBarY + 0.435 * this.HPBarH, this.HPBarY + 0.435 * this.HPBarH,
this.winW - bottomSquareX - borderSize, this.winW - bottomSquareX - borderSize,
this.HPBarH / 2 + 1 this.HPBarH / 2 + 2 * z
) )
this.ctx.fillRect( this.ctx.fillRect(
bottomSquareX, bottomSquareX,
this.HPBarY + 0.68 * this.HPBarH, this.HPBarY + 0.68 * this.HPBarH,
this.HPBarW * 0.8, this.HPBarW * 0.8,
this.HPBarH / 4 + 1 this.HPBarH / 4 + 2 * z
) )
this.ctx.arc( this.ctx.arc(
bottomSquareX+borderSize, bottomSquareX+borderSize,
@ -200,13 +206,14 @@ class View{
} }
drawMeasure(measure){ drawMeasure(measure){
var z = this.canvas.scale
var currentTime = this.controller.getEllapsedTime().ms var currentTime = this.controller.getEllapsedTime().ms
var measureX = this.slotX + measure.speed / (70 / this.circleSize) * (measure.ms - currentTime) var measureX = this.slotX + measure.speed / (70 / this.circleSize) * (measure.ms - currentTime)
this.ctx.strokeStyle = "#bab8b8" this.ctx.strokeStyle = "#bab8b8"
this.ctx.lineWidth = 2 this.ctx.lineWidth = 2
this.ctx.beginPath() this.ctx.beginPath()
this.ctx.moveTo(measureX, this.barY + 5) this.ctx.moveTo(measureX, this.barY + 5 * z)
this.ctx.lineTo(measureX, this.barY + this.barH - this.lyricsBarH - 5) this.ctx.lineTo(measureX, this.barY + this.barH - this.lyricsBarH - 5 * z)
this.ctx.closePath() this.ctx.closePath()
this.ctx.stroke() this.ctx.stroke()
} }
@ -294,7 +301,7 @@ class View{
var pointsText = this.controller.getGlobalScore().points.toString().split("") var pointsText = this.controller.getGlobalScore().points.toString().split("")
for(var i in pointsText){ for(var i in pointsText){
this.ctx.fillText(pointsText[i], this.ctx.fillText(pointsText[i],
this.scoreSquareW - 20 + glyph * (i - pointsText.length + 1), this.scoreSquareW - 30 + glyph * (i - pointsText.length + 1),
this.barY + this.scoreSquareH * 0.7 this.barY + this.scoreSquareH * 0.7
) )
} }
@ -449,6 +456,8 @@ class View{
} }
drawCircle(circle, circlePos){ drawCircle(circle, circlePos){
var z = this.canvas.scale
var fill, size, faceID var fill, size, faceID
if(!circlePos){ if(!circlePos){
var currentTime = this.controller.getEllapsedTime().ms var currentTime = this.controller.getEllapsedTime().ms
@ -540,11 +549,12 @@ class View{
} }
drawTime(){ drawTime(){
var z = this.canvas.scale
var time = this.controller.getEllapsedTime() var time = this.controller.getEllapsedTime()
this.ctx.globalAlpha = 0.7 this.ctx.globalAlpha = 0.7
this.ctx.fillStyle = "#000" this.ctx.fillStyle = "#000"
this.ctx.fillRect(this.winW - 110, this.winH - 60, this.winW, this.winH) this.ctx.fillRect(this.winW - 110 * z, this.winH - 60 * z, this.winW, this.winH)
this.ctx.globalAlpha = 1 this.ctx.globalAlpha = 1
this.ctx.fillStyle = "#fff" this.ctx.fillStyle = "#fff"
@ -556,9 +566,9 @@ class View{
this.ctx.font = "normal " + (this.barH / 12) + "px Kozuka" this.ctx.font = "normal " + (this.barH / 12) + "px Kozuka"
this.ctx.textAlign = "right" this.ctx.textAlign = "right"
this.ctx.fillText(formatedH + ":" + formatedM + ":" + formatedS, this.ctx.fillText(formatedH + ":" + formatedM + ":" + formatedS,
this.winW - 10, this.winH - 30 this.winW - 10 * z, this.winH - 30 * z
) )
this.ctx.fillText(time.ms, this.winW - 10, this.winH - 10) this.ctx.fillText(time.ms, this.winW - 10 * z, this.winH - 10 * z)
} }
drawBar(){ drawBar(){