javascript - 多个 Canvas 层的碰撞检测

Question

我正在努力弄清楚如何检测在不同 Canvas 层上绘制的 Assets 的碰撞。我制作了两个数组，其中包含我想要“碰撞”的东西，称为 collidable_objects_layer1 和 collidable_objects_layer2。这些数组基本上绘制了 Angular 色不应该穿过的 table 和后面的墙。

bar.js 基本上包含您在下面的链接中看到的整个栏“场景”。 main.js 是让我的玩家移动的循环。我认为我的体系结构一团糟，因为我没有看到将这两者联系在一起的简单方法，所以对此有任何建议(这里需要模块还是它们只是在伤害我？)。现在的样子我不确定如何通过不同的碰撞测试添加更多“场景”。

我假设碰撞测试发生在主循环中

function main() {
    var now = Date.now();
    var dt = (now - last_time) / 1000.0;

    clearCanvas();
    drawCharacter();
    frame++;
    last_time = now;
    requestAnimFrame(main);
}

所以真的有几个问题，让我的播放器检测 bar.js 中的这些可碰撞对象的算法(伪代码)是什么样的。其次，我的架构是否适合处理多个场景，例如，一旦玩家离开“酒吧”到“外面”(outside.js)，我该如何处理该过渡，以便我的玩家可以检测到对象，而不管其“场景”如何。我在想我最终会得到一个场景类或什么的，我不确定。

提前致谢。找到 plunk 链接 here

Answer 1

创建对象接口(interface)。

对象 bar 和 player 在您的示例中都是全局的，因此从另一个访问一个是没有问题的。即在 player 中，您可以调用 bar(); 来初始化栏。

您要做的是为场景对象 bar 提供更广泛的接口(interface)。此接口(interface)以受控方式(通过函数)提供对对象的访问。

首先让我们看看需要什么。

当玩家移动时，我们想知道道路是否畅通。如果不是就不要动，如果是就动。因此，我们需要一个根据给定位置返回 true 或 false 的函数。

界面

我这里只添加伪代码，具体细节你可以自己去练习。

在你的 bar 对象中而不是返回函数 init 返回一个对象，它将成为对象 bar 的公共(public)接口(interface)

var bar = (function(){
    //... all the code and function

    return {   // return a interface object
       init : init,  // with the function init
    };
})();

现在对象 bar 具有作为方法的属性。初始化bar

bar.init(); // rather than bar() as you had it.

扩展界面

要通过碰撞测试将接口(interface)扩展到 bar，您可以在 bar 中添加一个函数来测试给定位置

var bar = (function(){
    //... all the code and function
    function isPositionBlocked(x,y){ // returns true if location x y 
                                     // if blocked
         //... code to find what is at x,y
         if(blocked){
             return true;
         }
         return false;
    }

然后将该函数添加到返回的接口(interface)对象中。

    return {   // return an object
       init : init,  // with the function init
       test : isPositionBlocked, // with the new test function.
    };
})();

现在您可以从 player 对象中访问测试函数(假设 player 可以访问对象 bar)

从播放器

  // movex movey are the directions to move
  // posx, posy are the current direction
  if(! bar.test(posx + mousex, posy + movey)){ // if not blocked
      posx += movex;
      posy += movey;
  }

这就是在使用立即调用的对象时如何访问对象之间的细节 var obj = (function(){...code; return {}})();

替代实现

您还可以在 bar 中创建界面对象，让您可以从 bar 中访问界面。

var bar = (function(){
    //... all the code and functions
    var API = {};
    API.init = function(){ //... init code
    API.test = function(x,y){ //... blah blah

    function someInternalFunction(){
        var result = API.test(x,y);  // access the interface from 
                                           // within the bar object
    }
    return API;
})();

我使用首字母缩略词 API(Application Protocol Interface)作为首选名称 interface 是 Javascript 中的保留字，但任何名称都可以。 API 对象可以包含您希望外部对象访问的任何内容(在其他语言中，这些称为 public 属性)以及对象内的所有内容 bar 你不想让外部访问的是 private，尽管在​​ javascript 中通常不使用这些术语。

‘this’绑定(bind)到接口(interface)

向对象添加函数时

API.test = function(x,y){...

它会自动绑定(bind)到该对象，因此您可以通过 this token 访问该对象。

EG内部测试

API.init = function(){//...
API.test = function(x,y){//...
    this.init(); // if you wanted to init
    // this refers to the object API

因此如果你使用直接返回对象

 return {
    init : init,
    test : testFunction,
 }

您仍然可以通过this

访问返回对象的属性

var test = (function(){
     function init(){};
     function testFunction(){
        if(this.init){  
           return true;
        }
     }
     return {
        init : init,
        test : testFunction,
     }
})();

console.log(test.test()); // output >> true;

但是从对象内部调用函数 testfunction 可能会产生不可预知的结果，因为它没有绑定(bind)到接口(interface)对象，所以要小心。我通常会创建 API 对象，并且只将公共(public)函数定义为该对象的一部分，以防止错误地调用它们。