Question

我想在我的网站上创建一个简单的临时“Happy 2017”页面，我在Code.pen上找到了一个看起来非常有趣的烟花JS代码：

使用鼠标可以很好地运行代码，因为烟花会在您点击的位置爆炸，但它根本无法使用触摸命令，因此在触摸屏上根本不具备交互性。我可以看到代码调用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。

我希望这有帮助！ =）

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

1 个答案: