javascript - 如何在 canvasengine 中倾斜平铺 map

标签 javascript html

我使用 canvasengine 来编写我的 HTML5 游戏。我已经实现了一个到目前为止有效的平铺 map ,但它是静态的。

现在我希望玩家能够四处移动。所以我想:“好吧,我使用 canvasengine skew 命令”。这有效:

canvas.Scene.new ({
name: "tutorial",
materials: {
    images: {
        dg_edging232: "/maps/tilesets/dg_edging232.gif"
    }
},
ready: function(stage) {

    this.el = this.createElement();
    var tiled = canvas.Tiled.new ();
    tiled.load(this, this.el, "/maps/tutorial.json");
    tiled.ready(function() {
        var tile_w = this.getTileWidth(),
                tile_h = this.getTileHeight(),
                layer_object = this.getLayerObject();
        stage.append(this.el);
    });



},
render: function(stage) {
    canvas.Input.keyDown(Input.Left);
    canvas.Input.keyDown(Input.Right);
    canvas.Input.keyDown(Input.Up);
    canvas.Input.keyDown(Input.Down);


    stage.refresh();
}
});

现在,我想做这样的事情:

canvas.Input.keyDown(Input.left,this.el.x--);

但我无法让它与上面的语法一起工作。

最佳答案

从未使用过此库,但看起来您可能希望将渲染中的 keyDown 调用移动到 ready,并在渲染时测试是否按下键并相应地移动 Sprite 。

ready: function () {
  // ... your ready code

  // It's not clear from the docs, but it appears like you need to call
  // keyDown for each input to register it, even if you're passing no callbacks.
  // However, I'm guessing here.  This may not be necessary.
  canvas.Input.keyDown(Input.Left);
  // ... and so on for each direction
},

render: function () {
  // every frame test if the key is down, and update the sprite accordingly
  if (canvas.Input.isPressed(Input.Left)) this.el.x--;
  // ... and so on for each direction

  stage.refresh();
}

关于javascript - 如何在 canvasengine 中倾斜平铺 map ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16398658/

相关文章:

javascript - 按钮可以更改输入文本的名称和表单的操作吗?

html - 有人可以解释一下 HTML5 中的 contextmenu 属性的作用吗?

javascript - AngularJS - 如何使用 $routeParams 生成 templateUrl?

javascript - onClick 在 :active is set on img 时调用第二个 Click

css - html5/css- 在此上下文中元素 li 不允许作为元素 div 的子元素。 (抑制来自该子树的更多错误。)

javascript - 单击时更改鼠标指针

javascript - 未知的自定义元素 : <v-app> in Root when using vue with laravel

javascript - 如何将小写规范化器添加到Elasticsearch映射对象?

javascript - 如何使用 JavaScript/jquery 暂停或延迟动画

javascript - 针对特定的 CSS 类集