From 2e6bb82cb77038adda6fbe57145c0d8661b84a8e Mon Sep 17 00:00:00 2001 From: Eunchong Kim Date: Sat, 17 Jul 2021 19:46:02 +0900 Subject: [PATCH] Added card img and use canvas ctx to draw image --- src/images/card_back.svg | 1 + src/images/cards.svg | 5395 ++++++++++++++++++++++++++++++++++++++ src/index.js | 22 +- src/js/card.js | 14 +- src/js/room.js | 64 +- src/styles/uno-game.scss | 2 +- 6 files changed, 5459 insertions(+), 39 deletions(-) create mode 100644 src/images/card_back.svg create mode 100644 src/images/cards.svg diff --git a/src/images/card_back.svg b/src/images/card_back.svg new file mode 100644 index 0000000..64ff074 --- /dev/null +++ b/src/images/card_back.svg @@ -0,0 +1 @@ + diff --git a/src/images/cards.svg b/src/images/cards.svg new file mode 100644 index 0000000..df488ca --- /dev/null +++ b/src/images/cards.svg @@ -0,0 +1,5395 @@ + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/index.js b/src/index.js index 5d901f7..fa73638 100644 --- a/src/index.js +++ b/src/index.js @@ -8,18 +8,26 @@ import './styles/uno-game.scss'; //import green_table from './images/green_table.jpg'; + document.addEventListener('DOMContentLoaded', () => { const div = document.getElementById('uno-game'); - div.classList.add('uno-game'); + div.classList.add('uno-game-div'); + + const canvas = document.createElement("CANVAS"); + canvas.width = 800; + canvas.height = 450; + div.appendChild( canvas ); + + const ctx = canvas.getContext('2d'); + + const room = new Room('room1', ctx); + room.addHuman('newini'); + room.addBot(); + + setTimeout( () => { room.startGame(); }, 1000); }); -const room = new Room(); -room.addHuman('newini'); -room.addBot(); -setTimeout( () => { room.startGame(); }, 1000); - -//room.startGame(); console.log('Uno End') diff --git a/src/js/card.js b/src/js/card.js index 08c4bef..0037473 100644 --- a/src/js/card.js +++ b/src/js/card.js @@ -1,7 +1,7 @@ export default class Card { - constructor(num, color) { + constructor(num, color_n) { this._num = num; - this._color = color; + this._color_n = color_n; } get num() { @@ -10,15 +10,15 @@ export default class Card { set num(num) { this._num = num; } - get color() { - return this._color; + get color_n() { + return this._color_n; } - set color(color) { - this._color = color; + set color_n(color_n) { + this._color_n = color_n; } isMatch(card) { - if ( (this._num === card.num) || (this._color === card.color) ) { + if ( (this._num === card.num) || (this._color_n === card.color_n) ) { return true; } else { return false; diff --git a/src/js/room.js b/src/js/room.js index f4079d0..9ff3bbc 100644 --- a/src/js/room.js +++ b/src/js/room.js @@ -1,13 +1,26 @@ import Human from './human.js'; import Bot from './bot.js'; import Card from './card.js'; +import cards_img from '../images/cards.svg'; export default class Room { - constructor(id) { - this._id = (typeof id === 'number') ? id : 0; + constructor(name, ctx) { + this._name = name; this._players = []; this._cards = []; - this.ALL_COLORS = ['red', 'yellow', 'green', 'blue']; + this._ctx = ctx; + + this._ctx.font = "32px Arial"; + this._ctx.fillText(name, 50, 50); + //this._ctx.drawImage(back, canvas.width-cdWidth/2-60, canvas.height/2-cdHeight/4, cdWidth/2, cdHeight/2); + //this._ctx.fillText(playerName, 100, 390); + + this._cdWidth = 240; + this._cdHeight = 360; + + this._cards_img = new Image(); + this._cards_img.src = cards_img; + this._back_img = new Image(); } addHuman(name) { @@ -21,29 +34,28 @@ export default class Room { } initDeck() { - this.ALL_COLORS.forEach( (color) => { - for (let num=0; num<=12; num++) { - const card = new Card(num, color); - this._cards.push( card ); - } - }); - this.ALL_COLORS.forEach( (color) => { - for (let num=1; num<=12; num++) { - const card = new Card(num, color); - this._cards.push( card ); - } - }); - for (let i=0; i<4; i++) { - for (let num=13; num<=14; num++) { - const card = new Card(num, 'none'); - this._cards.push( card ); + for (let x=0; x<14; x++) { + for (let y=0; y<8; y++) { + if ( (x === 0) && (y >= 4) ) { + continue; + } + const card = new Card(x, y); + this._cards.push(card); } } + console.log(this._cards); } + shuffleDeck() { this._players.forEach( (player) => { for (let i=0; i<7; i++) { - player.addCard( this.draw() ); + const card = this.draw(); + const cdWidth = this._cdWidth; + const cdHeight = this._cdHeight; + this._ctx.drawImage(this._cards_img, 1+cdWidth*card.num, 1+cdHeight*card.color_n, cdWidth, cdHeight, + 1+cdWidth*i/10, 100, cdWidth/10, cdHeight/10); + //(hand.length/112)*(cdWidth/3)+(canvas.width/(2+(hand.length-1)))*(i+1)-(cdWidth/4), 400, cdWidth/2, cdHeight/2); + player.addCard(card); } }); console.log(this._players); @@ -62,20 +74,24 @@ export default class Room { let current_turn = 0; let top_card = this.draw(); + console.log('Game start'); + while (true) { - console.log('count: ' + count + ', current_turn: ' + current_turn); + console.log('count: ' + count + ', current player: ' + this._players[current_turn].name); const player = this._players[current_turn]; const card = await( player.playCard(top_card) ); if (card) { - console.log('player: ' + player.name + ' played card num: ' + card.num + ', color: ' + card.color); + console.log('player: ' + player.name + ' played card num: ' + card.num + ', color: ' + card.color_n); top_card = card; } else { - player.addCard( this.draw() ); + const card = this.draw(); + console.log('player: ' + player.name + ' drawed card num: ' + card.num + ', color: ' + card.color_n); + player.addCard(card); } if (player.isEmpty()) { - console.log('game end') + console.log('player: ' + player.name + ' has no card left. Game end'); break } current_turn = (current_turn >= this._players.length-1) ? 0 : ++current_turn; diff --git a/src/styles/uno-game.scss b/src/styles/uno-game.scss index 9dc0fde..ccb27ab 100644 --- a/src/styles/uno-game.scss +++ b/src/styles/uno-game.scss @@ -1,4 +1,4 @@ -.uno-game { +.uno-game-div { width: 800px; height: 450px; background-image: url('../images/green_table.jpg');