8

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

我试图弄清楚如何使用左右箭头键在画布内移动/平移“世界”。我知道如何keydown在箭头键上运行功能，但我不太确定应该如何进行移动/平移。

可视化

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

我会感激任何将我推向正确方向的事情。泰维姆 :)

更新了答案 下面选择的答案证实我确实必须将所有东西放在一个容器中，以便我可以设置该容器的位置。这是我起草的代码，它有效。

// 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似乎更顺利。

4

4 回答 4

7

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

因此，当您移动时，只需更新 scrollableObjectContainer.regX。

您可以使用 tweenJS 进行更平滑的滚动。

于 2013-06-21T19:03:12.530 回答
1

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

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

于 2013-06-21T18:56:55.313 回答
0

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

看看http://melonjs.org

于 2013-06-21T18:58:08.623 回答
0

这是跟随玩家的 2d 自上而下滚动和旋转的示例。

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

但归结为：

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

然后包括玩家在内的所有东西都会进入 World 容器，并随着玩家的移动而旋转。GUI 必须在世界之后，所以它在它之上绘制。

  • 阶段
    • 世界
      • 对象
      • 播放器
    • 桂
于 2017-06-22T13:55:18.643 回答