javascript - 如何使这个 javascript "fireworks on click"代码也能在触摸屏上运行？

Question

我想在我的网站上制作一个简单的临时“Happy 2017”页面，我在 Code.pen 上发现了一段看起来非常有趣的烟花 JS 代码:

https://codepen.io/chuongdang/pen/yzpDG

该代码在使用鼠标时效果非常好，因为烟花恰好在您单击的位置爆炸，但它根本不适用于触摸命令，使其在触摸屏上根本无法交互。 我可以看到代码调用了 mousedown、mousemove 和 mouseup 事件，但没有调用 touchstart 和 touchend:

 if( timerTick >= timerTotal ) {
    if( !mousedown ) {
        fireworks.push( new Firework( cw / 2, ch, random( 0, cw ), random( 0, ch / 2 ) ) );
        timerTick = 0;
    }
} else {
    timerTick++;
}

if( limiterTick >= limiterTotal ) {
    if( mousedown ) {
        fireworks.push( new Firework( cw / 2, ch, mx, my ) );
        limiterTick = 0;
    }
} else {
    limiterTick++;
}

我想这就是问题所在，但作为一个完全的 JS 菜鸟，我缺乏让它识别触摸坐标的知识。有没有简单的方法可以做到这一点？

Answer 1

这是一个建议，可能有效，也可能无效。

尝试将其与不同的事件关联。

在您发送的链接 ( https://codepen.io/chuongdang/pen/yzpDG ) 上，有两个事件监听器来处理 onmousedown 和 onmouseup 事件。

canvas.addEventListener( 'mousedown', function( e ) {
    e.preventDefault();
    mousedown = true;
});

canvas.addEventListener( 'mouseup', function( e ) {
    e.preventDefault();
    mousedown = false;
});

尝试用以下代码替换它们:

canvas.addEventListener( 'click', function( e ) {
    e.preventDefault();
    mousedown = true;
  setTimeout(function() {
    mousedown = false;
  }, 20);
});

mousedown 只是它用来检查是否发生点击的变量。只要为真，就会将目标设置为烟花。

所以，上面的代码所做的就是将整个事件与不同的事件点击相关联(有时可以与屏幕点击互换)。当单击时，它会将 mousedown 设置为 true，计数 20 毫秒，然后再次将 mousedown 设置为 false。

我希望这有帮助! =)