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

Question

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

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

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

我会感激任何促使我走向正确方向的事情。 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似乎变得更加顺畅。

Answer 1

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

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

您可以使用tweenJS进行更流畅的滚动。

Answer 2

只是一个想法......但是看一下画布翻译功能，并在每次重绘开始时使用它来设置绘制其他内容的上下文。

http://www.html5canvastutorials.com/advanced/html5-canvas-transform-translate-tutorial/

Answer 3

通常我会同意EaselJS的大多数画布相关项目，但是你想要构建的游戏类型更适合melonJS。

查看http://melonjs.org

Answer 4

以下是播放器后面的2d自上而下滚动和旋转的示例。

https://jsfiddle.net/StaticDelvar/bt9ntuL5/

但归结为：

world.regX = player.x;
world.regY = player.y;
world.rotation = -player.rotation;

然后包括玩家在内的所有内容都会进入World容器，并在玩家移动时旋转。 GUI必须在世界之后才能在它之上。

• 阶段
  • 世界
    • 物件
    • 播放器
  • 桂