Javascript HTML5画布：向不断绘制的图像添加冲突

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

以下是我到目前为止的情况：

---

演示站点：

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

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设置画布的背景）

下一步是检查你是否击中了线或球员。你可以使用两种不同的颜色，或者你需要记录玩家移动到的位置，并在你得到“像素命中”时检查该阵列

---

注意：在画线和球员之前进行测试是很重要的，否则你会对其进行采样，当然每次都会给你一个打击。

只是为了好玩：@IngoBurk是的，我看到了。这是一个非常酷的项目，但不是我真正想要的。因此“只是为了好玩”。至于您的项目：您可以通过检查黑色像素来进行碰撞检测（虽然很难看，但很简单），或者，正如我所希望的，您可以存储驱动路径并在其上实现碰撞逻辑。这非常有效！我必须确保样本像素的位置正确，这样它就会被我的播放器图形擦除。谢谢你的帮助。