html中平移代码怎么用,javascript – HTML5 Canvas：在EaselJS中使用箭头键移动/平移世界...

经过一年的反复试验和学习,我觉得我开始更多地了解

JavaScript了.所以,现在,我想尝试编写一个简单的2D平台游戏(想想超级马里奥世界或Sonic the Hedgehog).为此,我将使用EaselJS库.

我试图找出如何使用左右箭头键在画布中移动/平移“世界”.我知道如何在箭头键的键盘上运行一个函数,但我不太清楚我应该如何接近移动/平移.

当按下某个键时,我应该调整画布中每个东西的位置/坐标吗？

或者我应该把所有东西放在容器中并移动容器的位置/坐标？

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

更新了答案

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似乎更顺畅了.