Javascript EaselJS-性能问题

我正在用easelJS库实现一个简单的赛车游戏。这是我第一次使用它，所以我可能做错了什么。尽管速度为60fps且

createjs.Ticker.timingMode=createjs.Ticker.RAF，但我的精灵移动并不平稳

让我粘贴部分代码。
game.js

function init() {
  keys = new Keys();

  canvas = document.getElementById('canvas');
  stage = new createjs.Stage(canvas);
  stage.mouseEventsEnabled = true;
  stage.mouseMoveOutside = false;

  // Maximise the canvas
  canvas.width = CANVAS_WIDTH;
  canvas.height = CANVAS_HEIGHT;

  localPlayer = new Bike();
  localPlayer.init();

  setEventHandlers();
}

function setEventHandlers() {
  window.addEventListener("keydown", onKeydown, false);
  window.addEventListener("keyup", onKeyup, false);
  createjs.Ticker.addEventListener("tick", tick);
  createjs.Ticker.timingMode = createjs.Ticker.RAF;
}

function tick() {
  if (localPlayer.getSprite()) localPlayer.update();
  stage.update();
}

Keys
只是一个处理上下箭头的类。
Bike
是一个摩托车类，负责更新和绘制spritesheet

bike.js

function init() {
  keys = new Keys();

  canvas = document.getElementById('canvas');
  stage = new createjs.Stage(canvas);
  stage.mouseEventsEnabled = true;
  stage.mouseMoveOutside = false;

  // Maximise the canvas
  canvas.width = CANVAS_WIDTH;
  canvas.height = CANVAS_HEIGHT;

  localPlayer = new Bike();
  localPlayer.init();

  setEventHandlers();
}

function setEventHandlers() {
  window.addEventListener("keydown", onKeydown, false);
  window.addEventListener("keyup", onKeyup, false);
  createjs.Ticker.addEventListener("tick", tick);
  createjs.Ticker.timingMode = createjs.Ticker.RAF;
}

function tick() {
  if (localPlayer.getSprite()) localPlayer.update();
  stage.update();
}


然后是我的主要更新方法：

function update() {
    clutch = keys.action ? true : false;

    // Thrust can happen only if clutch is not present.
    thrust = (!clutch && keys.up) ? true : false;

    // Turning
    if (keys.left) angleVel = -TURN_ANGLE;
    if (keys.right) angleVel = TURN_ANGLE;

    if (!keys.left && !keys.right) angleVel = 0;

    // Custom animation
    if (sprite && (!keys.left || !keys.right)) sprite.stop();

    velXY[0] *= (1 - friction);
    velXY[1] *= (1 - friction);

    angle += angleVel;

    if (angle >= MAX_ANGLE || angle <= -MAX_ANGLE) {
      angle = 0;
    }

    forward = angleToVector(angle);

    if (thrust) {
      if (angleVel === 0) {
        velXY[0] += forward[0] * SPEED * ACC * clutchFactor;
        velXY[1] += forward[1] * SPEED * ACC * clutchFactor;
      } else {
        velXY[0] += forward[0] * SPEED;
        velXY[1] += forward[1] * SPEED;
      }
    }

    if(keys.up && clutch) {
      if (clutchFactor < MAX_CLUTCH) {
        clutchFactor += 0.1;
      }
    } else {
      if (clutchFactor > MIN_CLUTCH) {
        clutchFactor -= 0.1;
      }
    }

    sprite.x += velXY[0];
    sprite.y += velXY[1];

    velocity = Math.sqrt((velXY[0] * velXY[0]) + (velXY[1] * velXY[1]));
    velocity = parseFloat(velocity).toFixed(2);

    if (sprite.x > canvas.width) {
      sprite.x = sprite.x % canvas.width;
    } else if (sprite.x < 0) {
      sprite.x = canvas.width + (sprite.x % canvas.width);
    }

    if (sprite.y > canvas.height) {
      sprite.y = sprite.y % canvas.height;
    } else if (sprite.y < 0) {
      sprite.y = canvas.height + (sprite.y % canvas.height);
    }

    if (keys.left) {
      if (leftOffset >= TURN_OFFSET) {
        leftOffset = 0;
        sprite.reverse();
      } else {
        leftOffset++;
      }
    }

    if (keys.right) {
      if (rightOffset >= TURN_OFFSET) {
        rightOffset = 0;
        sprite.forward();
      } else {
        rightOffset++;
      }
    }
  }

我也有自定义方法
反向
和
正向
：

createjs.Sprite.prototype.reverse = function() {
    var currentFrame = this._currentFrame
        , numFrames = this.spriteSheet.getNumFrames(this.currentAnimation);

    if (currentFrame <= 0) {
        currentFrame = numFrames - 1;
    } else {
        currentFrame--;
    }

    this.gotoAndStop(currentFrame);
};

createjs.Sprite.prototype.forward = function() {
    var currentFrame = this._currentFrame
        , numFrames = this.spriteSheet.getNumFrames(this.currentAnimation);

    if (currentFrame >= numFrames) {
        currentFrame = 0;
    } else {
        currentFrame++;
    }

    this.gotoAndStop(currentFrame);
};

createjs.Sprite.prototype.reverse=function（）{
var currentFrame=此。\u currentFrame
，numFrames=this.spriteSheet.getNumFrames（this.currentAnimation）；
如果（当前帧=numFrames）{
currentFrame=0；
}否则{
currentFrame++；
}
此.gotoAndStop（当前帧）；
};

可以在此处测试我当前的应用程序：
正如您所看到的，它不是超级平滑的。
游戏中的第11行。js:
console.log（rect1，rect2）。可能不是唯一的性能食客，但肯定是其中之一。删除它，但仍然不是超级平滑。我想知道这是否是一个雪碧问题。好的，找到了更多的改进空间：1。摆脱jQuery，至少在经常调用的函数中。2.存储您经常需要的值（即在
log（）
中获取的DOM节点-获取它们一次，将它们分配给变量，然后使用该变量）。你在每一帧中重新绘制整个背景，对吗？由于它实际上没有改变，我建议在
元素上使用背景图像（如果这样做有效，否则在父元素上执行）。我删除了临时日志方法和轨迹本身。但我看不出有什么不同。它在OSX和chrome上工作良好。但是在Windows和chrome上仍然有点滞后。我刚刚意识到你使用
勾选
功能来处理用户交互并重新绘制画布。这是不好的，原因有很多：1。如果帧速率更高，整个游戏将运行得更快。这似乎不对。2.在应该绘制的函数中进行计算将消耗时间，这将降低平滑度。特别是在
requestAnimationFrame
模式下，您实际上应该只进行绘图。因此，从图形中拆分计算并在当前勾号函数中运行图形，并在
setInterval（…，100/3）
左右运行计算。
createjs.Sprite.prototype.reverse = function() {
    var currentFrame = this._currentFrame
        , numFrames = this.spriteSheet.getNumFrames(this.currentAnimation);

    if (currentFrame <= 0) {
        currentFrame = numFrames - 1;
    } else {
        currentFrame--;
    }

    this.gotoAndStop(currentFrame);
};

createjs.Sprite.prototype.forward = function() {
    var currentFrame = this._currentFrame
        , numFrames = this.spriteSheet.getNumFrames(this.currentAnimation);

    if (currentFrame >= numFrames) {
        currentFrame = 0;
    } else {
        currentFrame++;
    }

    this.gotoAndStop(currentFrame);
};