经过一年的反复试验,我觉得我开始对 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
似乎更顺利。