1

簡単な coffeescript スクリプトを作成しようとしました。ユーザーがマウスをクリックすると、easeljs を使用して小さな灰色の円を生成します。これがコードです

$(window).load ->
    game.init()


game=
    init: ->
        canvas= document.getElementById("Canvas")
        alert(canvas)
        @stage= new createjs.Stage(canvas)
        alert(@stage)

        @testshape= new createjs.Shape()
        @testshape.graphics.beginFill("#555")
        @testshape.graphics.rect(50,50,500,500)

        @stage.addChild(@testshape)
        @stage.update()

        window.onmousedown= (ev)->
            alert "click"
            mx=ev.screenX
            my=ev.screenY
            @spawn({x:mx,y:my})

    spawn: (data)->
        alert("spawn")
        x=data.x
        y=data.y

        shape = new createjs.Shape()
        shape.graphics.beginFill("#555")
        shape.graphics.circle(x,y,5)
        @stage.addChild(shape)
        @stage.update()

最初の 2 つのアラート コールは正常に機能します。そして、testshape が正しく作成されます。コールバックも問題なく登録されています。マウスをクリックすると、「クリック」というアラートが表示されます。ただし、spawn メソッドは呼び出されません。理由がわからなかったので、生成された JavaScript を調べました。

// Generated by CoffeeScript 1.6.1
(function() {
  var game;

  $(window).load(function() {
    return game.init();
  });

  game = {
    gameObjects: [],
    init: function() {
      var canvas;
      canvas = document.getElementById("Canvas");
      alert(canvas);
      this.stage = new createjs.Stage(canvas);
      alert(this.stage);
      this.testshape = new createjs.Shape();
      this.testshape.graphics.beginFill("#555");
      this.testshape.graphics.rect(50, 50, 500, 500);
      this.stage.addChild(this.testshape);
      this.stage.update();
      return window.onmousedown = function(ev) {
        var mx, my;
        alert("click");
        mx = ev.screenX;
        my = ev.screenY;
        return this.spawn({
          x: mx,
          y: my
        });
      };
    },
    spawn: function(data) {
      var shape, x, y;
      alert("rpcspawn");
      x = data.x;
      y = data.y;
      shape = new createjs.Shape();
      shape.graphics.beginFill("#555");
      shape.graphics.circle(x, y, 5);
      this.stage.addChild(shape);
      return this.stage.update();
    }
  };

}).call(this);

JavaScriptは機能しているようです。spawn が呼び出されないのはなぜですか?

更新: コードを次のように変更しました

window.onmousedown=(ev)=>

メソッドが正しく呼び出されるようになりました。ただし、メソッド内では他のメンバーは使用できません。スポーン内のこのアラート

alert(@stage)

「未定義」を返します。スポーンも変更しました。太い矢印の構文も使用するようになりました。しかし、それは問題を解決しませんでした。残ったメソッドは init だけです。当然、init を太い矢印の構文に変更しようとしました。しかし、太い矢印を使用する 3 つの方法すべてで、元の問題が再発します。spawn が呼び出されません。

  • コールバックとオプションでスポーンのみが太い矢印を使用する場合、スポーンは正しく呼び出されます。
  • init で太い矢印を使用すると、spawn を呼び出すことができません。
  • スポーン内から他のメンバーにアクセスすることはできません。

更新: これを OOP プログラミングに変更しました。ゲームはクラスになり、太い矢印のソリューションが機能します

4

2 に答える 2

3

コードを次のように変更します。

window.onmousedown= (ev)=>
        alert "click"
        mx=ev.screenX
        my=ev.screenY
        @spawn({x:mx,y:my})

( に注意してください=)。

問題は、イベント ハンドラーのコンテキストで呼び出された場合( JavaScript では@別名) がであり、 ではないことです。thiswindowgame

Using=>はメソッドを にバインドしgameます。

于 2013-03-14T12:02:04.760 に答える
0

ここでの問題は、コールバック内thisで呼び出すが実際にはオブジェクトであり、オブジェクトではないことです。this.spawn()window.onmousedownwindowgame

次のようなことをする必要があります

var that = this;
return window.onmousedown = function(ev) {
    var mx, my;
    alert("click");
    mx = ev.screenX;
    my = ev.screenY;
    return that.spawn({
      x: mx,
      y: my
    });
  };
于 2013-03-14T12:03:05.383 に答える