Programmiermethoden_und_-werkzeuge
/
2022-2-WS_group_project_gesellschaftsspiele-sammlung
5
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Animation Karte ziehen und Uno Sagen implementiert

main
Nicolas Fritz 2 years ago
parent
8f3ec8dc9f
commit
6ad0767db7
7 changed files with 176 additions and 104 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      uno/node/js/Game.js
  2. 2
      uno/node/js/cards/special/PlusAmount.js
  3. 62
      uno/web/Game.js
  4. 40
      uno/web/Player.js
  5. 59
      uno/web/Style.js
  6. 2
      uno/web/cards/special/PlusAmount.js
  7. 9
      uno/web/uno.js

2
uno/node/js/Game.js
View File

@ -51,7 +51,7 @@ class Game {
if (this._rules !== null){
if('startCards' in this.rules)
for (let i = 0; i < this.players.length; i++)
this.players[i].drawCard(this.rules.startCards);
this.players[i].drawCard(this.rules.startCards, false, false);
if('firstPlaySpecial' in this.rules)
boolFirstSpecial = this.rules.firstPlaySpecial;

2
uno/node/js/cards/special/PlusAmount.js
View File

@ -22,7 +22,7 @@ class PlusAmount extends Card {
//Todo: Karten Stapeln Regel
//lässt den nächsten Spieler den PlusAmount der Karte ziehen
this.game.players[this.game.nextPlayer()].drawCard(this._plus);
this.game.players[this.game.nextPlayer()].drawCard(this._plus, false, true);
if(this._plus === 4){

62
uno/web/Game.js
View File

@ -6,6 +6,7 @@ import PlusAmount from "./cards/special/PlusAmount.js";
import Reverse from "./cards/special/Reverse.js";
import Player from "./Player.js";
import {CARD_COLORS} from "./uno.js";
import Style from "./Style.js";
//Um generatePool zu exportieren, muss es in eine Klasse konvertiert werden
export default class Game {
@ -22,6 +23,9 @@ export default class Game {
this._playerAmount = playerAmount; //Anzahl der Spieler
this._rules = rules; //Array mit Regeln für das Spiel
//Für HTML
this._style = new Style(this);
}
//Richtet das Spiel ein
@ -40,31 +44,23 @@ export default class Game {
if (this.currentPlayer !== -1) return;
//Wenn das Spiel noch nicht initialisiert wurde, initialisiere es
if (this.cardPool.length === 0 || this.players.length === 0)
this.initGame();
if (this.cardPool.length === 0 || this.players.length === 0) this.initGame();
let firstCardIndex = 0;
let boolFirstSpecial = false;
if (this.rules !== null) {
if('startCards' in this.rules)
for (let i = 0; i < this.players.length; i++)
this.players[i].drawCard(this.rules.startCards);
if('firstPlaySpecial' in this.rules)
boolFirstSpecial = this.rules.firstPlaySpecial;
if ('startCards' in this.rules) for (let i = 0; i < this.players.length; i++) this.players[i].drawCard(this.rules.startCards, false, false);
if ('firstPlaySpecial' in this.rules) boolFirstSpecial = this.rules.firstPlaySpecial;
}
if (!boolFirstSpecial) {
for (let i = 0; i < this.cardPool.length; i++) {
if (!(this.cardPool[i].name === 'R' || this.cardPool[i].name === 'S'
|| this.cardPool[i].name === 'CC' || this.cardPool[i].name === '+2'
|| this.cardPool[i].name === '+4')){
if (!(this.cardPool[i].name === 'R' || this.cardPool[i].name === 'S' || this.cardPool[i].name === 'CC' || this.cardPool[i].name === '+2' || this.cardPool[i].name === '+4')) {
firstCardIndex = i;
break;
}
@ -78,6 +74,10 @@ export default class Game {
//Karten Funktion der Karte auf dem Deck ausführen
this.cardOnDeck.putSelf();
//HTML
this.style.refreshHtml();
}
//Gibt ein Array zurück mit allen Karten, die in einem Uno Spiel sind
@ -134,6 +134,7 @@ export default class Game {
//Beendet den Zug des aktuellen Spielers und beginnt den Zug des nächsten Spielers
nextTurn() {
let delay = 0;
//Testet, ob Spiel Gewonnen
for (let i = 0; i < this.players.length; i++) {
@ -144,15 +145,24 @@ export default class Game {
}
}
//Wenn Zug nicht der Erste vom ganzen Spiel
if (this.currentPlayer !== -1) {
if (this.currentPlayerInstanz.mustSayUno === true) {
this.currentPlayerInstanz.drawCard(2, false, true);
delay += 1500;
this.currentPlayerInstanz.mustSayUno = false;
}
//Aktuellen Spieler kann, darf nicht mehr Spielen
this.players[this.currentPlayer].canPlay = false;
this.players[this.currentPlayer].turn = false;
}
//nächster Spieler wird gesetzt
this.currentPlayer = this.nextPlayer();
@ -161,6 +171,12 @@ export default class Game {
//Aktualisiere das Deck des aktuellen Spielers, welche Karten er legen kann
this.refreshCanPutCard();
//HTML
setTimeout(()=>{
this.style.refreshHtml();
}, delay)
}
//Testet alle Karten des aktuellen Spielers in seiner Hand, ob er sie legen kann
@ -172,10 +188,7 @@ export default class Game {
for (let i = 0; i < currentPlayerCards.length; i++) {
//Wenn Farbe oder Zahl gleich oder eine Karte, die keine Farbe hat
if(this.cardOnDeck.name.toString() === currentPlayerCards[i].name.toString() ||
this.cardOnDeck.color === currentPlayerCards[i].color ||
currentPlayerCards[i].color === CARD_COLORS[0] ||
this.cardOnDeck.color === CARD_COLORS[0]) {
if (this.cardOnDeck.name.toString() === currentPlayerCards[i].name.toString() || this.cardOnDeck.color === currentPlayerCards[i].color || currentPlayerCards[i].color === CARD_COLORS[0] || this.cardOnDeck.color === CARD_COLORS[0]) {
//Aktualisiere den Wert der Karte, sodass sie gelegt werden kann
this.players[this.currentPlayer].hand[i].canPut = true;
@ -192,18 +205,19 @@ export default class Game {
}
//Uno sagen testen
if (this.currentPlayerInstanz.hand.length <= 2 && this.currentPlayerInstanz.canPlay) this.currentPlayerInstanz.mustSayUno = true;
}
//Errechne, wer der nächste Spieler ist
nextPlayer() {
if(this.currentPlayer === -1)
return 0;
if (this.currentPlayer === -1) return 0;
//Anhand der Spielrichtung errechnen
if(this._direction === 1)
return (this._currentPlayer === this._players.length - 1) ? 0 : this._currentPlayer + 1; //bei normaler Richtung
else
return (this._currentPlayer === 0) ? this._players.length - 1 : this._currentPlayer - 1; //bei Invertierter Richtung
if (this._direction === 1) return (this._currentPlayer === this._players.length - 1) ? 0 : this._currentPlayer + 1; //bei normaler Richtung
else return (this._currentPlayer === 0) ? this._players.length - 1 : this._currentPlayer - 1; //bei Invertierter Richtung
}
@ -258,4 +272,8 @@ export default class Game {
return this._rules;
}
get style() {
return this._style;
}
}

40
uno/web/Player.js
View File

@ -11,24 +11,46 @@ export default class Player {
this._turn = false; //Ob Spieler gerade am Zug
this._hand = []; //Deck des Spielers
this._canPlay = false //Ob spieler gerade Karte legen kann
this._mustSayUno = false;
}
//Lässt den Spieler eine Anzahl "amount" an Karten ziehen
drawCard(amount){
drawCard(amount, nextTurn, anim) {
//Ziehe so viele Karten, wie amount übergeben wurde
for (let i = 0; i < amount; i++) {
if (anim) {
setTimeout(() => {
//Füge die erste Karte aus cardPool der Hand des Spielers hinzu
this.hand.push(this.game.cardPool[0]);
//Lösche die erste Karte aus cardPool
this.game.cardPool.splice(0, 1);
this.game.style.showPlayerDeck(this, false, true, false);
}, 200 + 500 * (i));
} else {
//Füge die erste Karte aus cardPool der Hand des Spielers hinzu
this.hand.push(this.game.cardPool[0]);
//Lösche die erste Karte aus cardPool
this.game.cardPool.splice(0, 1);
}
}
if(amount === 1)
if (nextTurn) {
setTimeout(() => {
this.game.nextTurn();
}, 300 + 500 * amount);
}
}
@ -45,8 +67,7 @@ export default class Player {
if (this.game.cardOnDeck != null) {
//Wenn eine "NONE" Color Karte gelegt wurde, resette die Farbe auf "NONE"
if(this.game.cardOnDeck.name === "CC" || this._game.cardOnDeck.name === "+4")
this.game.cardOnDeck.color = CARD_COLORS[0];
if (this.game.cardOnDeck.name === "CC" || this._game.cardOnDeck.name === "+4") this.game.cardOnDeck.color = CARD_COLORS[0];
//Füge die Karte dem Pool wieder hinzu
this.game.cardPool.push(this._game.cardOnDeck);
@ -63,6 +84,10 @@ export default class Player {
}
sayUno() {
this._mustSayUno = false;
}
selectColor() {
//Todo: Spieler Möglichkeit geben Farbe zu wählen, nicht random
@ -102,4 +127,11 @@ export default class Player {
return this._game;
}
get mustSayUno() {
return this._mustSayUno;
}
set mustSayUno(bool) {
this._mustSayUno = bool;
}
}

59
uno/web/Style.js
View File

@ -14,7 +14,7 @@ export default class Style {
this._firstPutAnim = $('#first-put-anim');
$('#drawCard').on('click', () => {
this.game.currentPlayerInstanz.drawCard(1);
this.game.currentPlayerInstanz.drawCard(1, true, true);
this.refreshDebug();
});
@ -26,11 +26,11 @@ export default class Style {
});
this.firstDraw.on('click', () => {
this.game.currentPlayerInstanz.drawCard(1);
let playerInstanz = this.game.currentPlayerInstanz;
this.drawCardAnim(false, true);
this.drawCardAnim(false, false);
this.refreshHtml();
playerInstanz.drawCard(1, true, true);
});
}
@ -38,7 +38,7 @@ export default class Style {
refreshHtml() {
this.refreshCardOnDeck();
this.showPlayerDeck(this.game.currentPlayerInstanz, true);
this.showPlayerDeck(this.game.currentPlayerInstanz, true, false, true)
this.refreshDebug();
}
@ -65,7 +65,7 @@ export default class Style {
$('#button' + i).on('click', () => {
this.game.currentPlayerInstanz.putCard(i);
setTimeout(() => {
this.refreshHtml();
this.showPlayerDeck(this.game.currentPlayerInstanz, false, true, false);
}, 100);
});
if (this.game.currentPlayerInstanz.hand[i].canPut) $('#button' + i).css('background-color', 'green');
@ -95,8 +95,7 @@ export default class Style {
}
showPlayerDeck(player, click) {
console.log("anzeigen")
showPlayerDeck(player, click, lastDraw, anim) {
$('#playerDeck').html("");
let currentPlayerHand = player.hand;
@ -109,7 +108,7 @@ export default class Style {
let cardAmount = currentPlayerHand.length;
for (let i = 0; i < cardAmount; i++) {
console.log(this.game.currentPlayer);
currentPlayerHand.xPos = 0;
currentPlayerHand.yPos = 0;
@ -128,29 +127,53 @@ export default class Style {
if (click) {
let yPos = currentPlayerHand[i].yPos;
card.on('mouseenter', () => {
if (!put) card.css('top', yPos - 60);
if (!put && !anim) card.css('top', yPos - 60 + 'px');
})
card.on('mouseleave', () => {
if (!put) card.css('top', yPos);
if (!put && !anim) card.css('top', yPos);
})
card.on('click', () => {
if (!this.game.players[this.game.currentPlayer].hand[i].canPut) return;
if (!this.game.players[this.game.currentPlayer].hand[i].canPut || anim) return;
put = true
let lastPlayer = player;
player.putCard(i);
card.css('top', yPos - height * 0.2);
card.css('opacity', 0);
this.refreshCardOnDeck();
setTimeout(() => {
this.refreshHtml();
setTimeout(() => {
this.refreshCardOnDeck();
}, 400);
})
}
if(anim){
card.css('top', height);
setTimeout(()=>{
card.css('top', top + 'px')
card.css('left', (width * 45 / 100));
setTimeout(()=>{
card.css('left', currentPlayerHand[i].xPos + 'px');
card.css('top', top + 'px')
anim = false;
}, 250);
},100);
} else {
card.css('left', currentPlayerHand[i].xPos + 'px');
card.css('top', top + 'px')
}
if(lastDraw && i === cardAmount - 1){
card.css('opacity', 0);
card.css('top', currentPlayerHand[i].yPos - 100);
setTimeout(()=>{
card.css('left', currentPlayerHand[i].xPos + 'px');
card.css('top', top + 'px')
$('.pictureCard')
card.css('opacity', 1);
},50);
}
percent += 5;
}
@ -190,6 +213,10 @@ export default class Style {
}
animDrawCard(){
}
showDebug() {
$('#debug').show();
this.refreshDebug();

2
uno/web/cards/special/PlusAmount.js
View File

@ -21,7 +21,7 @@ export default class PlusAmount extends Card {
//Todo: Karten Stapeln Regel
//lässt den nächsten Spieler den PlusAmount der Karte ziehen
this.game.players[this.game.nextPlayer()].drawCard(this.plus);
this.game.players[this.game.nextPlayer()].drawCard(this.plus, false, true);
if(this.plus === 4){

9
uno/web/uno.js
View File

@ -1,25 +1,20 @@
//Legt mögliche Farben fest, "NONE" sind Auswahlkarten
import Game from "./Game.js";
import Style from "./Style.js";
export const CARD_COLORS = ["NONE", "BLUE", "GREEN", "RED", "YELLOW"];
let rules = {
startCards: 5,
startCards: 3,
firstPlaySpecial: true,
}
$(()=>{
let game = new Game(4, rules);
let style = new Style(game);
game.start();
style.showDebug();
style.refreshHtml();
$(window).on('resize', function () {
style.refreshHtml();
game.style.refreshHtml();
})

Write Preview
Loading…
Cancel
Save