javascript - HTML5 Canvas : adding collision to constantly drawn images

Question

我正在用 HTML5 canvas 制作 Tron 游戏，我遇到了一些问题，无法让自行车的尾部引起碰撞。我与墙壁和其他玩家发生了碰撞，但由于不断创建尾部，我不知道如何添加碰撞触发器。

这是我目前拥有的:https://github.com/ewbutterfield/Tron
演示站点:http://canvas-tron.gopagoda.com/

Answer 1

在绘制新线段和播放器之前，您可以对新位置的像素进行简单检查:

var pix = ctx.getImageData(x, y, 1, 1).data;  /// location to sample a pixel from

/// check that it is the color of the background (here transparent)
if (pix[3] !== 0] {
    /// some collision happened...
 }

如果你想使用它，你可以简单地检查颜色而不是透明度(或者使用 CSS 设置 Canvas 的背景)。

接下来是检查你是否击中了线或玩家。您可以通过对两者使用不同的颜色来做到这一点，否则您需要记录玩家移动到的位置，并在您获得“像素命中”时检查该数组。

注意:在绘制线和播放器之前进行测试很重要，否则您将对其进行采样，而这当然每次都会给您带来成功。