1

ソケットを使用して JavaScript ゲームを作成しようとしていますが、オブジェクトの OOP で行き詰まります。オブジェクトの関数内からオブジェクトの変数を参照する際に問題があります。

ここでいくつかの問題が発生する可能性があります。レンダリング関数ではなく、オブジェクト内から描画関数を呼び出しています。また、オブジェクト リテラルの設計が正しく行われているかどうかもわかりません。

Require.js と class.js を使用して、 User.js を作成します。

    define(['entity'],function(Entity){
var User = Entity.extend({
    init: function(){
        this.health= 10;

    },

    draw: function(ctx){
        img = new Image();   // Create new img element
        img.onload = function(){
        // execute drawImage statements here
        ctx.drawImage(img, this.posx, this.posy);
        };
        img.src = '/images/object.PNG'; // Set source path
    }
})
return User;})

Entity.js からの拡張

    define(function(){
var Entity= Class.extend({
    init: function(){
        //object image
        this.img.src = '/images/Blue-soldier.PNG';
        //location
        this.posx=50;
        this.posy=50;
        //gameplay values
        this.health=1;
        this.speed=0;

    },

User.draw(ctx) は game.js で呼び出されます:

    var entity = new User;
    this.users.push(entityid);
    entity.draw(ctx);
},

this.posx と this.posy は user.draw() では認識されません。それらをハード値に置き換えると、正常に機能します。私は何が欠けていますか？

私の完全なコードはもう少しわかりにくいですが、https://github.com/mtbarta/canvas/blob/master/public/javascripts/client.jsで見つけることができます。

ありがとう！

4

1 に答える 1

1

this問題は、値が「描画」関数の値とは異なる「ロード」ハンドラーで使用しようとしていることです。これを試して：

    var entity = this;
    img.onload = function(){
      // execute drawImage statements here
      ctx.drawImage(img, entity.posx, entity.posy);
    };

のコピーをthisローカル変数「entity」に保持することで、ハンドラーはそれにアクセスできます。

于 2012-12-27T00:22:20.847 に答える