在多个画布层上进行碰撞检测

collision detection on multiple canvas layers

本文关键字：碰撞检测 布层      更新时间：2023-09-26

我正在努力弄清楚如何检测在不同画布层上绘制的资产上的碰撞。我已经制作了两个数组来保存我想要"碰撞"的东西，它们分别是collidable_objects_layer1和collidable_objects_layer2。这些数组基本上绘制了角色不能通过的桌子和后面的墙。

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);
}

所以有几个问题，什么算法(psuedocode)会让我的播放器在bar.js中检测到这些可碰撞的物体。其次，我的架构是否适合处理多个场景，例如，一旦玩家离开"酒吧"到"外面"(outside.js)，我该如何处理这个过渡，这样我的玩家就可以检测到物体，而不管它是什么"场景"。

我想我最终与一个场景类或其他东西，我不确定。

提前感谢。点击这里查看链接

创建对象接口。

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

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

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

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

我在这里只添加伪代码，您可以锻炼细节。

在你的bar对象中，init不是返回函数，而是返回一个对象，该对象将是对象bar的公共接口

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.

扩展接口

要通过碰撞测试将接口扩展到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;
    }

，然后将该函数添加到返回的接口对象。

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

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

From inside player 

  // 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(应用协议接口)作为首选名称interface在Javascript中是保留字，但任何名称都可以。API对象可以包含任何你想要外部对象访问的东西(在其他语言中这些被称为public属性)，而对象bar中你不想给外部访问的所有东西都是private，尽管在javascript中这些术语通常不使用。

'this'被绑定到接口

当你给一个对象添加一个函数

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

会自动绑定到该对象，因此您可以通过this令牌访问该对象。

EG inside test

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可能会产生不可预测的结果，因为它没有绑定到接口对象，所以要小心。我通常创建API对象，并且只将公共函数定义为该对象的一部分，以防止错误地调用它们。

相关文章：