使用touchstart事件无法识别碰撞

Question

我正在使用“带有JavaScript的HTML5动画基础”一书中的示例来创建具有触摸功能的游戏。该书中的一个示例显示了有效但不完全的基本触摸功能。这是示例http：// jsfiddle的链接.net / yrXCN / 3 /

根据下面的功能，如果您触摸球内的画布，它应该记录消息“ in ball：touchstart”，但是我还没有使其工作。 当您进入球时，它会识别出球，但是由于某种原因，它不会识别出第一次触摸。

如果我更改代码以使用鼠标侦听器，它将按预期工作。

canvas.addEventListener('touchstart', function (event) {
    event.preventDefault();
    if (utils.containsPoint(ball.getBounds(), touch.x, touch.y)) {
      log.value = "in ball: touchstart";
    } else {
      log.value = "canvas: touchstart";
    }
  }, false);

Answer 1

 element.addEventListener('touchstart', function (event) {
    touch.isPressed = true;
    touch.event = event;
}, false);

如果在您的球上触发了“ touchstart”，则touch.x和touch.y未定义，因此您无法识别出球上的触摸。 您在touchmove事件中跟踪touch.x和touch.y ，这就是为什么您在移动时识别出触摸在球上的原因。

编辑：您可以通过在88-91行的touchstart事件中设置touch.x和touch.y来解决此问题