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

Added human play card effect

Browse Source
This commit is contained in:
Eunchong Kim 2021-07-23 20:34:35 +09:00
parent 3590ad7f92
commit acd03b61bd
4 changed files with 40 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
js/uno_game.js
View File

File diff suppressed because one or more lines are too long

3
src/js/basic_canvas.js
View File

@ -53,6 +53,8 @@ export default class BasicCanvas {
}
move(x, y) {
this._x = x;
this._y = y;
this._canvas.style.left = x + 'px';
this._canvas.style.top = y + 'px';
}
@ -65,4 +67,5 @@ export default class BasicCanvas {
remove() {
this._canvas.remove();
}
}

21
src/js/card.js
View File

@ -69,18 +69,31 @@ export default class Card extends BasicCanvas {
}
drawImageFront(x, y) {
this._canvas.style.left = x + 'px';
this._canvas.style.top = y + 'px';
this.move(x, y);
this.clear();
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);
}
drawImageBack(x, y) {
this._canvas.style.left = x + 'px';
this._canvas.style.top = y + 'px';
this.move(x, y);
this.clear();
this._ctx.drawImage(this._card_back_img, 0, 0, this._w, this._h);
}
mouseEffect() {
this._canvas.addEventListener('mouseenter', () => {
console.log(this._canvas.style.top)
console.log(this._y)
console.log(this._h/4)
this._canvas.style.top = this._y - this._h/4 + 'px';
console.log(this._canvas.style.top)
});
this._canvas.addEventListener('mouseleave', () => {
console.log(this._canvas.style.top)
this._canvas.style.top = this._y + 'px';
console.log(this._canvas.style.top)
});
}
}

31
src/js/room.js
View File

@ -31,7 +31,6 @@ export default class Room extends BasicCanvas {
initCards() {
console.log('Init')
const index_arr = [...Array(108).keys()];
let cnt = 0;
for (let num=0; num<14; num++) {
for (let color_n=0; color_n<8; color_n++) {
if ( (num === 0) && (color_n >= 4) ) { // Skip blank card
@ -42,9 +41,9 @@ export default class Room extends BasicCanvas {
}
const card_index = index_arr.splice(Math.floor( Math.random() * index_arr.length), 1)[0];
this._cards[ card_index ] = new Card(global.uno_game_w*6/16+card_index, global.uno_game_h/2, num, color_n%4);
cnt++;
}
}
// re-order z-index
for (let i=0; i<this._cards.length; i++) {
this._cards[i].refresh();
}
@ -115,20 +114,24 @@ export default class Room extends BasicCanvas {
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);
if (this._top_card.isMatch(card)) {
card.mouseEffect();
// Remove event listener
this._current_player.cards.forEach( (card) => {
card.resetEventListener();
card.canvas.addEventListener('click', () => {
console.log('played card num: ' + card.num + ', color: ' + card.color_n);
// Remove all cards' event listener
this._current_player.cards.forEach( (card) => {
card.resetEventListener();
});
this.changeTopCard(card);
this._current_player.removeCard(card);
this.processPlay();
});
this.changeTopCard(card);
this._current_player.removeCard(card);
this.processPlay();
});
}
});
}