camill/uno-game-js
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Changed canvas size dynamically

Browse Source
This commit is contained in:
Eunchong Kim 2021-07-19 21:04:08 +09:00
parent 227df72477
commit c5c7468e3a
3 changed files with 23 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/index.js
View File

@ -15,14 +15,17 @@ document.addEventListener('DOMContentLoaded', () => {
const div = document.getElementById('uno-game');
div.classList.add('uno-game-div');
const inner_w = window.innerWidth;
const inner_h = inner_w*9/16;
// Add canvas
canvas.classList.add('uno-game-canv')
canvas.width = 800;
canvas.height = 450;
canvas.classList.add('uno-game-canv');
canvas.width = inner_w;
canvas.height = inner_h;
div.appendChild( canvas );
// Add game start button
start_game_box_text = new BoxText(ctx, 300, 300, 200, 100, 'Start Game');
// Add game start buttono
const btn_width = inner_w/8;
start_game_box_text = new BoxText(ctx, inner_w*7/16, inner_h*3/4, inner_w/8, inner_w/8/1.6, 'Start Game');
});
@ -43,7 +46,7 @@ canvas.addEventListener("click", e => {
const room = new Room('room1', ctx);
/* Game start view */
/* Game start */
function startGame() {
console.info('Game start');

2
src/js/box_text.js
View File

@ -10,7 +10,7 @@ export default class BoxText {
ctx.lineWidth = 4;
ctx.fillStyle = "#abc";
ctx.fillRect(x, y, w, h);
ctx.font = "30px Arial";
ctx.font = Math.floor(h/4)+"px Arial";
ctx.textAlign="center";
ctx.textBaseline = "middle";
ctx.fillStyle = "#000000";

17
src/styles/uno-game.scss
View File

@ -1,9 +1,18 @@
.uno-game-div {
width: 800px;
height: 450px;
background-image: url('../images/green_table.jpg');
width: 100%;
height: 100%;
margin: 0;
}
.uno-game-canv {
z-index:1;
position: absolute;
display: block;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
background-image: url('../images/green_table.jpg');
}