如何使这个javascript“点击上的烟花”代码也能在触摸屏上工作？

Question

我想在我的网站上创建一个简单的临时“快乐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只是用来检查是否正在进行单击的变量。只要是真的，它就会为烟花设定目标。

因此，上面的代码是将整个事件与一个不同的事件单击相关联(这有时可以与屏幕点击进行交互)。当点击时，它将鼠标向下设置为真，计数20英里，然后将鼠标向下设置为假。

我希望这能有所帮助！