From be5a129b14bce9dfe96b6cea8c4acd2177f6feb1 Mon Sep 17 00:00:00 2001 From: Eunchong Kim Date: Wed, 21 Jul 2021 23:04:06 +0900 Subject: [PATCH] Changed to use multiple canvas for each item with z-index --- src/index.js | 68 +++++++++++++++++++++------------------- src/js/basic_canvas.js | 31 ++++++++++++++++++ src/js/box_text.js | 4 --- src/js/card.js | 39 ++++++++++++++--------- src/js/player.js | 6 +++- src/js/room.js | 29 +++++++---------- src/styles/uno-game.scss | 4 ++- 7 files changed, 111 insertions(+), 70 deletions(-) create mode 100644 src/js/basic_canvas.js diff --git a/src/index.js b/src/index.js index daa683f..7a3ee27 100644 --- a/src/index.js +++ b/src/index.js @@ -1,55 +1,59 @@ /* Class */ +import BasicCanvas from './js/basic_canvas.js'; import Room from './js/room.js'; import BoxText from './js/box_text.js'; /* SCSS */ import './styles/uno-game.scss'; -const canvas = document.createElement("CANVAS"); -const ctx = canvas.getContext('2d'); -let start_game_box_text; +// Global variables +global.canvas_count = 0; // increment number to avoid the same canvas id +// uno-game-div must be found +global.uno_game_div; +global.uno_game_w = window.innerWidth; +global.uno_game_h = window.innerHeight; /* Main view */ document.addEventListener('DOMContentLoaded', () => { - // Add div class - const div = document.getElementById('uno-game'); - div.classList.add('uno-game-div'); + // Get uno-game-div + global.uno_game_div = document.getElementById('uno-game'); + global.uno_game_div.classList.add('uno-game-div'); - const inner_w = window.innerWidth; - const inner_h = window.innerHeight; - // Add canvas - canvas.classList.add('uno-game-canv'); - canvas.width = inner_w; - canvas.height = inner_h; - div.appendChild( canvas ); + // Create canvas + const basic_canvas = new BasicCanvas(); - // Add game start buttono - const btn_width = inner_w/8; - start_game_box_text = new BoxText(ctx, inner_w*5/12, inner_h*3/4, inner_w/7, inner_w/8/1.6, 'Start Game'); + // Set canvas + basic_canvas.canvas.classList.add('uno-game-canv-main'); + + // Add game start button with bitmap + const btn_width = global.uno_game_w/8; + const start_game_box_text = new BoxText(basic_canvas.ctx, global.uno_game_w*5/12, global.uno_game_h*3/4, + global.uno_game_w/7, global.uno_game_w/8/1.6, 'Start Game'); + + /* Canvas click */ + basic_canvas.canvas.addEventListener("click", e => { + const rect = basic_canvas.canvas.getBoundingClientRect(); + const point = { + x: e.clientX - rect.left, + y: e.clientY - rect.top + }; + + console.log(point); + if ( start_game_box_text.isClicked(point) ) { + basic_canvas.clear(); + startGame(); + } + }); }); -/* Canvas click */ -canvas.addEventListener("click", e => { - const rect = canvas.getBoundingClientRect(); - const point = { - x: e.clientX - rect.left, - y: e.clientY - rect.top - }; - - console.log(point); - if ( start_game_box_text.isClicked(point) ) { - start_game_box_text.clear(); - startGame(); - } -}); - -const room = new Room('room1', ctx); /* Game start */ function startGame() { console.info('Game start'); + const room = new Room('room1'); + room.addHuman('newini'); room.addBot(); room.addBot(); diff --git a/src/js/basic_canvas.js b/src/js/basic_canvas.js new file mode 100644 index 0000000..d222cb2 --- /dev/null +++ b/src/js/basic_canvas.js @@ -0,0 +1,31 @@ +export default class BasicCanvas { + constructor() { + this._canvas = document.createElement("CANVAS"); + global.uno_game_div.appendChild( this._canvas ); + global.canvas_count++; + console.debug(global.canvas_count); + this._canvas.width = global.uno_game_w; + this._canvas.height = global.uno_game_h; + this._canvas.classList.add('uno-game-canv-default'); + this._canvas.style += 'z-index: ' + global.canvas_count + ';'; + this._ctx = this._canvas.getContext('2d'); + } + + get canvas() { + return this._canvas; + } + set canvas(canvas) { + this._canvas = canvas; + } + + get ctx() { + return this._ctx; + } + set ctx(ctx) { + this._ctx = ctx; + } + + clear() { + this._ctx.clearRect(0, 0, global.uno_game_w, global.uno_game_h); + } +} diff --git a/src/js/box_text.js b/src/js/box_text.js index 34ee826..0956bbf 100644 --- a/src/js/box_text.js +++ b/src/js/box_text.js @@ -21,8 +21,4 @@ export default class BoxText { return ( (this._x <= point.x && point.x <= this._x + this._w) && (this._y <= point.y && point.y <= this._y + this._h) ) } - - clear() { - this._ctx.clearRect(this._x, this._y, this._w, this._h); - } } diff --git a/src/js/card.js b/src/js/card.js index fa4866c..247e95e 100644 --- a/src/js/card.js +++ b/src/js/card.js @@ -1,11 +1,22 @@ +import BasicCanvas from './basic_canvas.js'; +/* Images */ +import cards_img from '../images/cards.svg'; +import card_back from '../images/card_back.svg'; -export default class Card { +export default class Card extends BasicCanvas { constructor(num, color_n) { + super(); + this._num = num; this._color_n = color_n; - this._card_w = 240; - this._card_h = 360; + this._c_w = 240; + this._c_h = 360; + + this._cards_img = new Image(); + this._cards_img.src = cards_img; + this._card_back_img = new Image(); + this._card_back_img.src = card_back; } get num() { @@ -31,24 +42,22 @@ export default class Card { } } - drawImageFront(ctx, img, x, y) { + drawImageFront(x, y) { + this.clear(); this._x = x; this._y = y; - this._w = ctx.canvas.width/16; - this._h = this._w * this._card_h / this._card_w; - ctx.drawImage(img, 1+this._card_w*this._num, 1+this._card_h*this._color_n, this._card_w, this._card_h, + this._w = global.uno_game_w/16; + this._h = this._w * this._c_h / this._c_w; + this._ctx.drawImage(this._cards_img, 1+this._c_w*this._num, 1+this._c_h*this._color_n, this._c_w, this._c_h, x, y, this._w, this._h); } - drawImageBack(ctx, img, x, y) { + drawImageBack(x, y) { + this.clear(); this._x = x; this._y = y; - this._w = ctx.canvas.width/16; - this._h = this._w * this._card_h / this._card_w; - ctx.drawImage(img, x, y, this._w, this._h); - } - - eraseImage(ctx) { - ctx.clearRect(this._x, this._y, this._w, this._h); + this._w = global.uno_game_w/16; + this._h = this._w * this._c_h / this._c_w; + this._ctx.drawImage(this._card_back_img, x, y, this._w, this._h); } } diff --git a/src/js/player.js b/src/js/player.js index 3be2bb7..08a0ebd 100644 --- a/src/js/player.js +++ b/src/js/player.js @@ -1,5 +1,9 @@ -export default class Player { +import BasicCanvas from './basic_canvas.js'; + +export default class Player extends BasicCanvas { constructor(name, id) { + super(); + this._name = name; this._id = id; this._cards = []; diff --git a/src/js/room.js b/src/js/room.js index 8e845cf..1830007 100644 --- a/src/js/room.js +++ b/src/js/room.js @@ -1,25 +1,21 @@ +import BasicCanvas from './basic_canvas.js'; import Human from './human.js'; import Bot from './bot.js'; import Card from './card.js'; /* Images */ -import cards_img from '../images/cards.svg'; -import card_back from '../images/card_back.svg'; -export default class Room { - constructor(name, ctx) { +export default class Room extends BasicCanvas { + constructor(name) { + super(); + this._name = name; this._players = []; this._cards = []; this._used_cards = []; - this._ctx = ctx; + // Fill room name this._ctx.font = "32px Arial"; this._ctx.fillText(name, 10, 10); - - this._cards_img = new Image(); - this._cards_img.src = cards_img; - this._card_back_img = new Image(); - this._card_back_img.src = card_back; } addHuman(name) { @@ -41,8 +37,7 @@ export default class Room { if ( (x === 13) && (y >= 4) ) { // +4 cards x = 14; } - const card = new Card(x, y%4); - this._cards.push(card); + this._cards.push( new Card(x, y%4) ); } } console.log(this._cards); @@ -67,17 +62,17 @@ export default class Room { const inner_h = window.innerHeight; // Drw top card - this._top_card.drawImageFront(this._ctx, this._cards_img, inner_w/2, inner_h/2); + this._top_card.drawImageFront(inner_w/2, inner_h/2); // Draw players card this._players.forEach( (player) => { for (let i=0; i