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

Fixed card event listener

Browse Source
This commit is contained in:
Eunchong Kim 2021-07-23 17:25:27 +09:00
parent d3ee297812
commit 5092cf1470
4 changed files with 69 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/index.js
View File

@ -48,9 +48,10 @@ async function createRoom() {
await( room.initCards() );
//setTimeout( ()=>{ room.dealCards(); }, 2000 );
await( room.dealCards() );
await new Promise(resolve => setTimeout(resolve, 500));
await( room.startGame() );
}

11
src/js/basic_canvas.js
View File

@ -41,6 +41,17 @@ export default class BasicCanvas {
this._ctx.clearRect(0, 0, global.uno_game_w, global.uno_game_h);
}
resetEventListener() {
// clone canvas and replace w/o event listener
const canvas = this._canvas.cloneNode(true);
const ctx = canvas.getContext('2d');
this._canvas.parentNode.replaceChild(canvas, this._canvas);
ctx.drawImage(this._canvas, 0, 0)
this._canvas.remove();
this._canvas = canvas;
this._ctx = ctx;
}
move(x, y) {
this._canvas.style.left = x + 'px';
this._canvas.style.top = y + 'px';

8
src/js/card.js
View File

@ -12,7 +12,6 @@ export default class Card extends BasicCanvas {
this._num = num;
this._color_n = color_n;
this._event_is_set = false;
this._cards_img = new Image();
this._cards_img.src = cards_img;
@ -45,13 +44,6 @@ export default class Card extends BasicCanvas {
this._color_n = color_n;
}
get event_is_set() {
return this._event_is_set;
}
set event_is_set(event_is_set) {
this._event_is_set = event_is_set;
}
isMatch(card) {
if ( (this._num <= 12 && this._num === card.num)
|| (this._num >= 13)

105
src/js/room.js
View File

@ -64,15 +64,17 @@ export default class Room extends BasicCanvas {
async startGame() {
console.log('Game start');
this._current_player = 0;
this._turn_count = 0;
this._top_card = this._cards.pop();
this._top_card.flip();
this._top_card.move(global.uno_game_w*8/16+this._turn_count, global.uno_game_h/2);
//this._top_card.drawImageFront(global.uno_game_w*8/16+this._turn_count, global.uno_game_h/2);
await( this.changeTopCard( this._cards.pop() ) );
this.humanTurn(this._players[this._current_player]);
await( this._current_player = this._players[0] );
if (this._current_player.type === 'bot') {
this.botPlay();
} else {
this.humanTurn();
}
// if (player.isEmpty()) {
// console.log('player: ' + player.name + ' has no card left. Game end');
@ -80,77 +82,82 @@ export default class Room extends BasicCanvas {
// }
}
async botPlay(player) {
console.log('Turn count: ' + this._turn_count + ', current player: ' + player.name);
async processPlay() {
await( this._current_player.refreshCards() );
this._turn_count++;
this._current_player = this.getNextPlayer();
if (this._current_player.type === 'human') {
this.humanTurn();
} else {
this.botPlay();
}
}
async botPlay() {
console.log('Turn count: ' + this._turn_count + ', current player: ' + this._current_player.name);
await new Promise(resolve => setTimeout(resolve, 1000));
const card = player.playCard(this._top_card);
const card = await( this._current_player.playCard(this._top_card) );
if (card) {
console.log('player: ' + player.name + ' played card num: ' + card.num + ', color: ' + card.color_n);
console.log('played card num: ' + card.num + ', color: ' + card.color_n);
this.changeTopCard(card);
} else {
const card = this._cards.pop();
console.log('player: ' + player.name + ' drawed card num: ' + card.num + ', color: ' + card.color_n);
player.addCard(card);
console.log('drawed card num: ' + card.num + ', color: ' + card.color_n);
this._current_player.addCard(card);
}
player.refreshCards();
this._turn_count++;
const next_player = this.getNextPlayer();
if (next_player.type === 'human') {
this.humanTurn(next_player);
} else {
this.botPlay(next_player);
}
this.processPlay();
}
humanTurn(player) {
player.cards.forEach( (card) => {
if (!card.event_is_set) {
card.canvas.addEventListener('click', ()=>{
this.humanPlay(player, card);
player.removeCard(card);
humanTurn() {
console.log('Turn count: ' + this._turn_count + ', current player: ' + this._current_player.name);
this._current_player.cards.forEach( (card) => {
card.canvas.addEventListener('click', () => {
console.log('played card num: ' + card.num + ', color: ' + card.color_n);
// Remove event listener
this._current_player.cards.forEach( (card) => {
card.resetEventListener();
});
card.event_is_set = true;
}
this.changeTopCard(card);
this._current_player.removeCard(card);
this.processPlay();
});
});
}
async humanPlay(player, card) {
console.log('Turn count: ' + this._turn_count + ', current player: ' + player.name);
this.changeTopCard(card);
console.log('player: ' + player.name + ' played card num: ' + card.num + ', color: ' + card.color_n);
player.refreshCards();
this._turn_count++;
this.botPlay( this.getNextPlayer() );
}
getNextPlayer() {
let current_player_id = this._current_player.id;
if (this._reverse) {
if (this._current_player === 0) {
this._current_player = this._players.length-1;
if (current_player_id === 0) {
current_player_id = this._players.length - 1;
} else {
this._current_player--;
current_player_id--;
}
} else {
if (this._current_player === this._players.length-1) {
this._current_player = 0;
if (current_player_id === this._players.length-1) {
current_player_id = 0;
} else {
this._current_player++;
current_player_id++;
}
}
return this._players[this._current_player];
return this._players[current_player_id];
}
changeTopCard(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();
}
}