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'); const div = document.getElementById('uno-game');
div.classList.add('uno-game-div'); div.classList.add('uno-game-div');
const inner_w = window.innerWidth;
const inner_h = inner_w*9/16;
// Add canvas // Add canvas
canvas.classList.add('uno-game-canv') canvas.classList.add('uno-game-canv');
canvas.width = 800; canvas.width = inner_w;
canvas.height = 450; canvas.height = inner_h;
div.appendChild( canvas ); div.appendChild( canvas );
// Add game start button // Add game start buttono
start_game_box_text = new BoxText(ctx, 300, 300, 200, 100, 'Start Game'); 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); const room = new Room('room1', ctx);
/* Game start view */ /* Game start */
function startGame() { function startGame() {
console.info('Game start'); console.info('Game start');

2
src/js/box_text.js
View File

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

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

@ -1,9 +1,18 @@
.uno-game-div { .uno-game-div {
width: 800px; width: 100%;
height: 450px; height: 100%;
background-image: url('../images/green_table.jpg'); margin: 0;
} }
.uno-game-canv { .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');
} }