EaselJS 键盘收录问题

Question

我是第一次尝试使用 EaselJS，我正在尝试进行正常的方形移动。我使用 Ticker 创建了一个从屏幕左侧到右侧的正方形动画。它看起来很不稳定，所以我提高了该股票的 FPS（通过Ticker.setFPS(60)）。

我的下一步是添加键盘事件以允许方块移动。我已经成功地做到了，但同样的波涛汹涌又回来了。我尝试将 Ticker 的 FPS 设置为更高的速率，但这根本无法解决我的问题。这是我的代码：

var c = document.getElementById("c");
var stage = new createjs.Stage("c");
var square = new createjs.Shape();

function init() {   
    square.graphics.beginFill("#3A5FCD").drawRect(0, 0, 75, 75);
    square.x = 50;
    square.y = 50;

    stage.addChild(square);
    stage.update();

    //Update stage will render next frame
    createjs.Ticker.addEventListener("tick", stage);
    createjs.Ticker.addEventListener("tick", move);
    createjs.Ticker.setFPS(60);

    this.document.onkeydown = move;
}

function move(event) {
    switch(event.keyCode) {
        case 37:
            square.x -= 10;
            break;
        case 39:
            square.x += 10;
            break;
        case 38:
            square.y -= 10;
            break;
        case 40:
            square.y += 10;
            break;
    }
}

所以，总结一下我的问题，如何在不附加到 Ticker 的情况下增加 FPS，或者更好的是，如何将键盘事件附加到 Ticker？

提前致谢。

Answer 1

由于您直接在 onkeydown 处理程序中修改形状位置，因此“断断续续”可能只是正常的键盘事件行为 - 我认为每秒字符速率取决于操作系统，通常在 30 Hz 上最快的设置。

您可能应该将输入处理与移动逻辑分离：在键盘事件处理程序中，只需注册当前按下的键，并相应地在周期性“tick”函数中操作对象。类似这样的事情：

var stage;
var square;
var keys = {};

function init() {
    stage = new createjs.Stage("c");
    square = new createjs.Shape();
    square.graphics.beginFill("#3A5FCD").drawRect(0, 0, 75, 75);
    square.x = 50;
    square.y = 50;
    stage.addChild(square);

    createjs.Ticker.addEventListener("tick", tick);
    createjs.Ticker.setFPS(60);

    this.document.onkeydown = keydown;
    this.document.onkeyup = keyup;
}

function keydown(event) {
    keys[event.keyCode] = true;
}

function keyup(event) {
    delete keys[event.keyCode];
}

function tick() {
    if (keys[37]) square.x -= 10;
    if (keys[38]) square.y -= 10;
    if (keys[39]) square.x += 10;
    if (keys[40]) square.y += 10;
    stage.update();
}