持ち時間タイマーです。
将棋やチェスの2人対戦用のスマホアプリはいろいろとあったのですが、複数プレイヤーで使えて、かつハンデがつけられるものがほしかったので、自分で作ってしまいました。
使ってみる
プレイヤーの数と持ち時間を設定してください。ハンデも設定できます。
こちらからご使用ください。リンクは自動生成されます。
https://holganicdreamer.com/project/countdowntimer-with-vue/
プレイヤーの数
持ち時間
使い方
STARTボタンを押すと、最初のプレイヤーのカウントダウンが始まります。
タイマーそのものを押すと、次のプレイヤーに切り替わり、カウントダウンが始まります。
現在どのプレイヤーの番かは、タイマーの色で見てください。
PAUSEボタンを押すと、カウントダウンを一時停止します。再開するにはSTARTボタンを押してください。
いずれかのプレイヤーの持ち時間が0になると終了です。最初から始めるにはRESTARTボタンを押してください。
作ってみて
タイマーをつくるにあたって、「vue-circular-count-down-timer」という
ライブラリが便利そうだったので使わせてもらいました。
どのように使用しているか興味がある方はソースをご覧ください。
ちなみにjQueryもあまり触る機会がなかったのですが、
このページの「使ってみる」の部分を作るので少し勉強になりました。