javascript - HTML5 Canvas : Moving/panning world with arrow keys in EaselJS

Question

经过一年的学习和反复试验，我觉得我开始对 JavaScript 有了更多的了解。所以，现在，我想尝试编写一个简单的 2D 平台游戏(想想《 super 马里奥世界》或《刺猬索尼克》)。为此，我将使用 EaselJS 库。

我想弄清楚如何使用左右箭头键在 Canvas 中移动/平移“世界”。我知道如何在箭头键的 keydown 上运行函数，但我不太确定应该如何处理移动/平移。

当按下一个键时，我是否应该调整 Canvas 中每一个东西的位置/坐标？或者我是否应该将所有东西都放在一个容器中并移动容器的位置/坐标？

我会感激任何能将我推向正确方向的东西。泰夫姆 :)

更新了答案 The chosen answer below确认我确实必须将所有内容都放在 container 中这样我就可以设置那个容器的位置。这是我起草的代码，它有效。

// Canvas
var stage = new createjs.Stage('game');
createjs.Ticker.addEventListener('tick', tick);
function tick(event) {
    stage.update();
}

// Cave
var cave = new createjs.Bitmap('img/cave.png');
cave.x = cave.y = 0;

// World
// Pans World if the left or right arrow keys are pressed
var world = new createjs.Container();
world.x = 0;
world.y = 0;
world.addChild(cave);
stage.addChild(world);
$(window).keydown(function(e){
    switch (e.which || e.keyCode){
        case 39: // right arrow key
            world.regX += 10;
            break;
        case 37: // left arrow key
            world.regX -= 10;
            break;
    }
});

我尝试更新 world.x 以及 world.regX。不知何故，world.regX 似乎变得更顺畅了。

Answer 1

我认为最好的方法是将所有将要滚动的显示对象放入一个 scrollableObjectContainer 中(也许你有像 lifebar 这样的静态元素)。

所以当你移动时，只需更新 scrollableObjectContainer.regX。

您可以使用 tweenJS 来实现更平滑的滚动。