yuuki/taiko-web
1
0
Fork 0
mirror of https://github.com/yuukiwww/taiko-web.git synced 2024-09-30 21:29:31 +02:00
Code Issues Packages Projects 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/gamepad.js'></script>
<script type='application/javascript' src='/src/js/tutorial.js'></script>
<script type='application/javascript' src='/src/js/scalablecanvas.js'></script>
</head>
<body>

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

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

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

@ -31,17 +31,22 @@ html, body{
}
.window{
font-size: 14pt;
width: 30%;
height: 30%;
padding: 30px;
width: 60vmin;
height: 23vmin;
padding: 3vmin;
color: black;
background: rgba(255, 220, 47, 0.95);
border: 7px outset #f4ae00;
position:relative;
border: .5vmin outset #f4ae00;
box-shadow: 2px 2px 10px black;
top: 35%;
left: 35%;
margin: auto;
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;
right: 0;
font-size: 5vmin;
margin: 30px 30px 0px 0px;
margin: 3vmin 3vmin 0px 0px;
color: white;
float: right;
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
}
}
}

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

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