HTML5 Canvas：为不断绘制的图像添加碰撞

Question

我正在用HTML5画布制作一个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设置画布的背景），你可以简单地检查颜色而不是透明度。

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

注意：在绘制线和播放器之前进行测试非常重要，否则你会对其进行采样，而不是每次都给你一个点击。