このJavaScriptを「クリックした花火」コードでタッチスクリーンでも動作させるにはどうすればいいですか？

Question

私は自分のサイトに簡単な一時的な「ハッピー2017」のページを作りたかった、と私はCode.penにかなり面白そう花火のためのJSコードを見つけた：

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

コードが素晴らしく動作しますマウスを使って、花火があなたがクリックしたところで正確に爆発するようになりますが、タッチコマンドでは全く機能しません。タッチスクリーン上でインタラクティブではありません。 私は、コードはマウスダウンを呼び出すことがわかりの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のnoobのもの。そうする簡単な方法はありますか？

Answer 1

これはご提案です。動作するかどうかは関係ありません。

違うイベントに試してみてください。あなたが送信されたリンク（https://codepen.io/chuongdang/pen/yzpDG）で

、両方 onMouseUpのれるonmousedownとイベントを処理するための2人のイベントリスナーがあります。

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); 
}); 

マウスダウンは、クリックが行われているかどうかを確認するために使用するだけの変数です。それが本当である限り、それは花火に目標を設定します。

したがって、上記のコードは、すべての事柄を別のイベントに関連付けることです。（時々スクリーンタップと互換性があります）をクリックします。クリックが行われると、マウスがとtrueに設定され、20ミリ秒カウントされ、マウスがを再びfalseに設定します。

私はこれが助けて欲しい！ =）