HTML5 Canvas:在EaselJS中使用箭头键移动/平移世界

Question

经过一年的反复试验和学习,我觉得我开始更多地了解JavaScript了.所以,现在,我想尝试编写一个简单的2D平台游戏(想想Super Mario World或Sonic the Hedgehog).为此,我将使用EaselJS库.

我试图弄清楚如何使用左右箭头键在画布中移动/平移'世界'.我知道如何keydown在箭头键上运行一个函数,但是我不太确定我应该如何处理移动/平移.

当按下某个键时,我应该调整画布中每个东西的位置/坐标吗？或者我应该把所有东西放在容器中并移动容器的位置/坐标？

我会感激任何促使我走向正确方向的东西.Tyvm :)

更新回答 下面选择的答案证实我确实必须将所有内容放入容器中,以便我可以设置该容器的位置.这是我起草的代码,它的工作原理.

// 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进行更流畅的滚动.