web-dev-qa-db-ja.com

HTML5カードゲーム

Silverlightについて少し学ぶために、1年前にSilverlightでカードゲームを作成しました。私は今、それについてもう少し学ぶために、ゲームのHTML5バージョンを作りたいと思っています。 Knockout.jsやWebSockets、canvas要素などを活用したいと思っています。

今私が混乱しているのは、画面上にカードを配置する方法です。 Silverlightを使用して、2つのサブコントロールで構成される「ハンド」コントロールを作成することができました。プレーヤーが手札に持っているカードとテーブルに持っているカードです。それらはカードコントロールで構成されていました。

JavaScriptのユーザーコントロールに概念があるとは思いません。だから私はおそらくこれについて完全に間違った方法で考えています。

プレーヤーの配列を含むgameというクライアント側のJSONオブジェクトがあります。各プレーヤーには、一連のハンドカードとテーブル上のカードで構成されるハンドがあります。理想的には、Knockout.jsを使用してこれらを何かにバインドしたいのですが、何にバインドできるかわかりません。

どうすればテーブルにいくつかのカードを配置し、おそらく各プレーヤーのために何かを再利用することができますか？ （カードの）画像をキャンバスに配置するだけでいいですか？各プレイヤーが持つことができ、バインドできる何らかのハンドオブジェクトを作成する方法はありますか？

javascriptguihtml5
1
Roonooir

キャンバスでノックアウトする必要はありません。通常どおりにデザインを実行してください。

個人的には、Drawメソッドを使用してオブジェクトを作成します。これらはDrawableです。

実例 。

次に、Drawableオブジェクトへの参照を持つ他のコンテナオブジェクトがあります。

ドローアブルカードの例。

（ 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;   
    }
};

そして、ドローアブルカードへの参照があるコンテナハンド。

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);
        });
    }
};

そして、何かを描くためのいくつかのbootstrapコード。

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

h.generateCards(3);

h.setPosition(10, 10);

h.draw();
7
Raynos