1

我目前正在开发一个基本的 javascript 游戏，它有两个不会碰撞在一起的精灵。然而，基本的边界框碰撞是不够的，因为精灵的某些部分是透明的，不会“算作”碰撞。我找到了解决我遇到的问题的方法，但我无法让它工作。我想做的是计算精灵的透明部分，并确保如果透明部分重叠，则没有检测到碰撞。这是我发现的解决问题的方法。

http://blog.weeblog.net/?p=40#comments

  /**
   * Requires the size of the collision rectangle [width, height]
   * and the position within the respective source images [srcx, srcy]
   * 
   * Returns true if two overlapping pixels have non-zero alpha channel
   * values (i.e. there are two vissible overlapping pixels)
   */
  function pixelCheck(spriteA, spriteB, srcxA, srcyA, srcxB, srcyB, width, height){
    var dataA = spriteA.getImageData();
    var dataB = spriteB.getImageData();

    for(var x=0; x<width; x++){
      for(var y=0; y<height; y++){
        if( (dataA[srcxA+x][srcyA+y] > 0) && (dataB[srcxB+x][srcyB+y] > 0) ){
          return true;
        }
      }
    }
    return false;
  }

并用于计算图像数据：

    /**
     * creating a temporary canvas to retrieve the alpha channel pixel
     * information of the provided image
     */
    function createImageData(image){
      $('binaryCanvas').appendTo('body');
      var canvas = document.getElementById('binaryCanvas');
      var ctx      = canvas.getContext("2d");

      ctx.drawImage(image, 0, 0);
      var canvasData = ctx.getImageData(0, 0, canvas.width, canvas.height);
      var imageData  = [image.width];

      for(var x=0; x<image.width; x++){
        imageData[x] = [image.height];
        for(var y=0; y<image.height; y++){
          var idx = (x + y * image.width) * 4;
          imageData[x][y] = canvasData.data[idx+3];
        }
      }
      $("#binaryCanvas").remove();
      return imageData;
    }

问题是我不知道如何实施此解决方案，或者这是否是解决我的问题的最佳解决方案。这就是我要找的吗？如果是这样，我将这些方法放在哪里？我最困惑的是我应该传递给 spriteA 和 spriteB。我已经尝试传递 Images 并且我已经尝试传递从该pixelCheck方法返回的 imageData ，但收到相同的错误： object 或 image has no method 'getImageData'。我究竟做错了什么？

4

1 回答 1

0

这有两个问题。

你做了一个函数：

function createImageData(image){...}

但是您要调用的是：

spriteA.getImageData();
spriteB.getImageData();

点表示对象的属性。您试图调用一个从不属于对象的函数。有一些简单的修复。

将 createImageData() 函数添加到您的构造函数：

function Sprite(){
    ...
    this.createImageData = function(image){...};
    ...
}

或者 ：

Sprite.createImageData = function(image{...};

或者只是正确地调用它：

createImageData(spriteA.image); // or whatever the image is

其次，您的函数需要一个图像参数，但您没有提供一个。只需记住在调用时提供图像。您还可以删除参数并从函数中获取图像。

有点像这样：

function Sprite(){
    ...
    this.createImageData = function(){
        var image = this.image;
        // or just use this.image, or whatever it is
        ...
    }
    ...
}

希望这有帮助。

于 2013-01-08T03:48:04.523 回答