Question

我正在用javascript创建游戏。目前精灵是div元素，背景图像被更新以创建动画。我听说如果我将元素画布并将精灵blit放到画布上，我可以使精灵可点击，省略透明区域。

我需要一个解决方案，可以点击我的游戏精灵，但可点击的区域适合精灵的形状。它还需要自动化。我不能用预制的点击地图做到这一点。

Answer 1

我有一个教程几乎完全符合命中测试所需的内容。请参阅代码here.

当你点击时，代码将每个形状（我使用矩形，但它使用半透明图像精美地工作）绘制到内存中的画布（ghostcanvas），并检查鼠标像素是否在不是的像素上 - 透明的。

下面粘贴的相关代码：

function myDown(e){
  getMouse(e);
  clear(gctx); // clear the ghost canvas from its last use

  // run through all the boxes
  var l = boxes.length;
  for (var i = l-1; i >= 0; i--) {
    // draw shape onto ghost context
    drawshape(gctx, boxes[i], 'black');

    // get image data at the mouse x,y pixel
    var imageData = gctx.getImageData(mx, my, 1, 1);
    var index = (mx + my * imageData.width) * 4;

    // if the mouse pixel exists, select and break
    if (imageData.data[3] > 0) {
      mySel = boxes[i];
      offsetx = mx - mySel.x;
      offsety = my - mySel.y;
      mySel.x = mx - offsetx;
      mySel.y = my - offsety;
      isDrag = true;
      canvas.onmousemove = myMove;
      invalidate();
      clear(gctx);
      return;
    }

  }
  // havent returned means we have selected nothing
  mySel = null;
  // clear the ghost canvas for next time
  clear(gctx);
  // invalidate because we might need the selection border to disappear
  invalidate();
}

Answer 2

您可以让背景透明，并在点击的像素上检查图像的透明度。这是我的一个游戏原型中的一些代码：

function getAlphaInImage(img, x, y) {
    var tmp = document.createElement("CANVAS");
    tmp.setAttribute('width', img.width);
    tmp.setAttribute('height', img.height);
    var tmpCtx = tmp.getContext('2d');
    tmpCtx.drawImage(img, 0, 0);
    var imageData = tmpCtx.getImageData(x, y, 1, 1);
    var alpha = imageData.data[3];
    tmp = null;
    imageData = null;
    return alpha;
}

在调用之前，我首先检查鼠标点击是否在整个图像中。

单击画布上精灵上的区域

2 个答案: