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

Added color change

Browse Source
This commit is contained in:
Eunchong Kim 2021-07-25 00:39:26 +09:00
parent cee411b6e5
commit 62f1f2fe47
7 changed files with 96 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
README.md
View File

@ -51,3 +51,8 @@ or
npm run build
```
This command will generate `dist/main.js`
## TODO
- multiplay

10
js/uno_game.js
View File

File diff suppressed because one or more lines are too long

10
src/js/basic_canvas.js
View File

@ -41,6 +41,13 @@ export default class BasicCanvas {
this._ctx.clearRect(0, 0, global.uno_game_w, global.uno_game_h);
}
fillColor(i) {
const colors = { 0: 'red', 1: 'yellow', 2: 'green', 3: 'blue' };
this._ctx.fillStyle = colors[i];
this._ctx.rect(0, 0, this._w, this._h);
this._ctx.fill();
}
resetEventListener() {
// clone canvas and replace w/o event listener
const canvas = this._canvas.cloneNode(true);
@ -71,7 +78,10 @@ export default class BasicCanvas {
}
remove() {
console.log('remove canvas')
this._canvas.parentNode.removeChild( this._canvas );
this._canvas.remove();
//delete this._canvas;
}
}

4
src/js/bot.js
View File

@ -6,6 +6,10 @@ export default class Bot extends Player {
this._type = 'bot';
}
changeColor() {
return Math.floor( Math.random() * 4 );
}
playCard(top_card) {
for (let i=0; i<this._cards.length; i++) {
const card = this._cards[i];

36
src/js/card.js
View File

@ -45,43 +45,35 @@ export default class Card extends BasicCanvas {
}
isMatch(card) {
if ( (this._num <= 12 && this._num === card.num)
|| (this._num >= 13)
|| (this._color_n === card.color_n) ) {
if ( (card.num <= 12 && this._num === card.num) // Normal card
|| (card.num >= 13) // Change color card
|| (card.color_n === this._color_n) ) { // Color match
return true;
} else {
return false;
}
}
flip() {
this.clear();
if (this._is_front) {
this._ctx.drawImage(this._card_back_img, 0, 0, this._w, this._h);
this._is_front = false;
} else {
this._cards_img.addEventListener('load', () => {
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,
0, 0, this._w, this._h);
this._is_front = true;
});
}
}
async drawImageFront(x, y) {
if (x && y) {
this.move(x, y);
}
if (x && y) this.move(x, y);
this.clear();
this._cards_img.src = await (cards_img);
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,
// Treat +4 card
let num = this._num, color_n = this._color_n;
if (num === 14) {
num = 13;
color_n += 4;
}
this._ctx.drawImage(this._cards_img, 1+this._c_w*num, 1+this._c_h*color_n, this._c_w, this._c_h,
0, 0, this._w, this._h);
this._is_front = true;
}
drawImageBack(x, y) {
this.move(x, y);
if (x && y) this.move(x, y);
this.clear();
this._ctx.drawImage(this._card_back_img, 0, 0, this._w, this._h);
this._is_front = false;
}
mouseEffect() {

2
src/js/human.js
View File

@ -1,4 +1,5 @@
import Player from './player.js';
import BasicCanvas from './basic_canvas.js';
export default class Human extends Player {
constructor(name, id) {
@ -7,6 +8,7 @@ export default class Human extends Player {
this._type = 'human';
}
playCard(top_card) {
return this._cards.splice(0, 1)[0];
}

84
src/js/room.js
View File

@ -29,7 +29,7 @@ export default class Room extends BasicCanvas {
}
initCards() {
console.log('Init')
console.log('Initialize cards')
const index_arr = [...Array(108).keys()];
for (let num=0; num<14; num++) {
for (let color_n=0; color_n<8; color_n++) {
@ -103,7 +103,6 @@ export default class Room extends BasicCanvas {
if (card) {
console.log('played card num: ' + card.num + ', color: ' + card.color_n);
this.changeTopCard(card);
this.treatCard(card);
} else {
const card = this._cards.pop();
console.log('drawed card num: ' + card.num + ', color: ' + card.color_n);
@ -134,10 +133,28 @@ export default class Room extends BasicCanvas {
card.resetEventListener();
});
// Show color change blocks
if (card.num === 13 || card.num === 14) {
const bc_colors = [];
for (let i=0; i<4; i++) {
const w = global.uno_game_w;
const bc = new BasicCanvas(w/2+w*i/16, global.uno_game_h*3/4, w/16, w/16);
bc.fillColor(i);
bc.canvas.addEventListener('click', () => {
bc_colors.forEach( bc_color => bc_color.remove() );
// Change card color
card.color_n = i;
// Process
this.changeTopCard(card);
this.treatCard(card);
this.finishTurn();
});
bc_colors.push(bc);
}
} else {
this.changeTopCard(card);
this.finishTurn();
}
});
}
});
@ -155,30 +172,6 @@ export default class Room extends BasicCanvas {
this._current_player.addCard(card);
this.finishTurn();
});
}
treatCard(card) {
console.log('treat card num:' + card.num)
switch (card.num) {
case 10: // skip card
this._skip = true;
break;
case 11: // reverse card
this._reverse = (this._reverse) ? false : true;
break;
case 12: // +2 card
this._draw2 = true;
break;
case 13: // change color card
card.color_n = 0; // TODO
break;
case 14: // +4 card
this._draw4 = true;
break;
default:
break;
}
}
async finishTurn() {
@ -225,12 +218,43 @@ export default class Room extends BasicCanvas {
}
changeTopCard(card) {
if (this._top_card) {
this._used_cards.push(this._top_card);
}
if (this._top_card) this._used_cards.push(this._top_card);
this._top_card = card;
this._top_card.drawImageFront(global.uno_game_w*8/16+this._turn_count, global.uno_game_h/2);
this._top_card.refresh();
this.treatCard();
}
async treatCard() {
console.log('treat card num:' + this._top_card.num)
switch (this._top_card.num) {
case 10: // skip card
this._skip = true;
break;
case 11: // reverse card
this._reverse = (this._reverse) ? false : true;
break;
case 12: // +2 card
this._draw2 = true;
break;
case 13: // change color card
await ( this.changeColor() );
break;
case 14: // +4 color change card
this._draw4 = true;
await ( this.changeColor() );
break;
default:
break;
}
}
changeColor() {
if (this._current_player.type === 'bot') {
this._top_card.color_n = this._current_player.changeColor();
console.log('change color' + this._top_card.color_n);
}
}
}