JavaScriptでコイントスをするプログラミング

こんにちは。今回は、Webページ上でコイントスをするプログラムをHTML/JavaScriptで作成しましたので共有します。

実装イメージ

「Flip Coin」ボタンを押すとコイントスが始まり、表か裏が表示されます。

Flip Coin

HTML/JavaScriptコード

<button onclick="flipCoin()" style="font-size:100%">Flip Coin</button>
<div id="result"></div>
<img id="coin" style="display:none;">

<script>
function flipCoin() {
  var result = Math.floor(Math.random() * 2) + 1;
  var interval = setInterval(function() {
    if (result === 1) {
      document.getElementById("coin").src = "https://cdn-ak.f.st-hatena.com/images/fotolife/d/dskevin/20230108/20230108190854.jpg";  //表用の画像ファイルパス
      document.getElementById("coin").style.display = "block";
    } else {
      document.getElementById("coin").src = "https://cdn-ak.f.st-hatena.com/images/fotolife/d/dskevin/20230108/20230108190858.jpg"; //裏用の画像ファイルパス

      document.getElementById("coin").style.display = "block";
    }
    result = (result === 1) ? 2 : 1;
  }, 100);
  setTimeout(function() {
    clearInterval(interval);
  }, 1000);
}
</script>

ご参考

実はこちらのプログラムは、ChatGPT（https://openai.com/blog/chatgpt/）というAIを使って実装しています。

様子を動画にまとめていますので、よければこちらもご覧ください。
youtu.be

最後まで読んでいただきありがとうございました。