gioco di carte HTML5

Question

gioco di carte HTML5

#1 da (7 voti)

1

Ho creato un gioco di carte in Silverlight un anno fa, per imparare un po 'su Silverlight. Ora sto cercando di creare una versione HTML5 del gioco per imparare un po 'di più a riguardo. Penso che mi piacerebbe approfittare di elementi come Knockout.js e WebSockets e l'elemento canvas.

Ora quello di cui sono confuso è come disporre le carte sullo schermo. Con Silverlight sono riuscito a creare un controllo "a mano", composto da due controlli secondari: le carte che il giocatore ha in mano e quelle che hanno sul tavolo. Erano costituiti da controlli Card.

Non credo che ci sia il concetto su un controllo utente in JavaScript; quindi forse sto pensando a questo in modo completamente sbagliato.

Ho un oggetto JSON lato client chiamato game, che contiene una serie di giocatori; ogni giocatore ha una mano composta da una serie di carte in mano e carte sul tavolo. Idealmente mi piacerebbe associarli a qualcosa usando Knockout.js, ma non so a cosa potrei legare.

Come posso disporre alcune carte sul tavolo e forse riutilizzare qualcosa per ciascun giocatore? Dovrei semplicemente posizionare le immagini (di carte) su una tela? C'è un modo per creare una sorta di oggetto a mano che ogni giocatore potrebbe avere e che potrei legare a?

html5 javascript gui

posta Roonooir 03.09.2011 - 12:37

fonte

1 risposta

Leggi altre domande sui tag html5 javascript gui

Quale processo / linee guida dovrebbero essere seguite, quando sto per deprecare alcuni metodi dalle mie classi di servizio in Java? Quali fattori ti influenzano nel provare un nuovo framework o strumento?

score 7 · Accepted Answer

Non hai bisogno del knockout con la tela. Fai il tuo disegno come faresti normalmente.

Personalmente creo oggetti con i metodi Draw, questi sono Drawable.

Esempio dal vivo .

Quindi hai altri oggetti contenitore che hanno riferimenti a oggetti disegnabili.

Esempio di una carta estraibile.

(Utilizza pd )

var Card = {
    draw: function _draw() {
        ctx.strokeRect(this.x, this.y, 30, 50);
        ctx.strokeText(this._value, this.x+10, this.y+25);
    },
    setPosition: function _position(x, y) {
        this.x = x;
        this.y = y;   
    }
};

E una mano contenitore che ha riferimenti a carte disegnabili.

var Hand = {
    draw: function _draw() {
        this.cards.forEach(function (c, i) {
            c.draw();
        });
    },
    generateCards: function _generateCards(n) {
        for (var i = 0; i < n; i++) {
            this.cards.push(Object.create(Card, pd({ _value: i })));
        }
    },
    setPosition: function _setPosition(x, y) {
        this.x = x;
        this.y = y;
        this.cards.forEach(function _each(c, i) {
            c.setPosition(x + i*40, y);
        });
    }
};

E qualche codice di bootstrap per disegnare qualcosa.

var h = Object.create(Hand, pd({ cards: [] }));

h.generateCards(3);

h.setPosition(10, 10);

h.draw();