JavaScript 在每帧对象中添加太多 var 不起作用

Question

所以我有一个名为 Paddle 的对象，它有一个名为 posX 的 var，由于某种原因，我不能只在每一帧添加一个，但我可以设置它的值，这是我的男女学生

https://jsfiddle.net/noig/s9yxx13q/

var Paddle = function(sizeX, sizeY){
    var posX, posY;
    var sizeX, sizeY;

    this.sizeX = sizeX;
    this.sizeY = sizeY;

    this.shape = new createjs.Shape();
}

Paddle.prototype.update = function(){
    this.shape.x = this.posX;
};

var paddle1 = new Paddle(25, 75);

function init(){

    var stage = new createjs.Stage("canvas");

    //shape = new createjs.Shape();
    paddle1.shape.graphics.beginFill("blue").drawRect( 15, 0, paddle1.sizeX, paddle1.sizeY);

    stage.addChild(paddle1.shape);

    stage.update();

    createjs.Ticker.setFPS(60);
    createjs.Ticker.addEventListener('tick', stage);
    createjs.Ticker.addEventListener('tick', update);
}

function update(){
    //paddle1.update(); This runs the code to make shape.x = posX

    //paddle1.shape.x++; This moves paddle 1 every frame when not useing paddle.update();
    //paddle1.posX = 50; This moves to the paddel50 units with paddle1.update();
    //paddle1.posX++; This dose not move the paddle 1 unit every frame
    //paddle1.posX += 1; This dose not move the paddle 1 unit ever frame
    //paddle1.posX = paddle1.posX + 1; This dose not move the paddle 1 unit every frame
}

init();

Answer 1

听起来您想在设置 this.posX 时更新 this.shape.x。一种方法是使用 getter/setter 定义属性。尝试添加这个:

Object.defineProperty(Paddle.prototype, "posX", {
  get: function() {return this.shape.x},
  set: function(x) { this.shape.x = x; }
});
Object.defineProperty(Paddle.prototype, "posY", {
  get: function() {return this.shape.y},
  set: function(y) { this.shape.y = y; }
});

var Paddle = function(sizeX, sizeY){
    this.sizeX = sizeX;
    this.sizeY = sizeY;
    this.shape = new createjs.Shape();   
}

Object.defineProperty(Paddle.prototype, "posX", {
  get: function() {return this.shape.x},
  set: function(x) { this.shape.x = x;  }
});
Object.defineProperty(Paddle.prototype, "posY", {
  get: function() {return this.shape.y},
  set: function(y) { this.shape.y = y; }
});

var paddle1 = new Paddle(25, 75);

function init(){

    var stage = new createjs.Stage("canvas");

    //shape = new createjs.Shape();
    paddle1.shape.graphics.beginFill("blue").drawRect( 15, 0, paddle1.sizeX, paddle1.sizeY);

    stage.addChild(paddle1.shape);

    stage.update();

    createjs.Ticker.setFPS(60);
    createjs.Ticker.addEventListener('tick', stage);
    createjs.Ticker.addEventListener('tick', update);
}

function update(){
    paddle1.posX++; 
}

init();

<script src="https://code.createjs.com/createjs-2015.05.21.min.js"></script>
<canvas id="canvas"></canvas>