このページは、2つのサイコロを振って、その和が奇数か偶数かから丁・半を表示するJavascriptです。
2つのサイコロを振って合計で判定するJavaScript
半丁博打のイメージで、2つのサイコロを振らせて、目の合計が「丁か半か」を表示させています。
前のページでは1つのサイコロの目を表示するだけでしたが、ここでは、2つの和を計算して、その結果で偶数か奇数かを判定して表示しようというものです。
もちろん、この内容だけでは使いにくいのですが、例えば、丁か半かを予想して、博打で儲けるゲームなどを考えるのも面白いかなぁ … と思っています。 ここでは、ごく基本的な部分だけの内容です。
サイコロ2つを振って「丁か半か」を表示するJavascript
＊＊＊＊＊＊＊＊＊＊＊＊＊＊
ボタンを押すと2つのサイコロを振ります
＊＊＊＊＊＊＊＊＊＊＊＊＊＊
PR
このJavascript
【HTML部分】（次の2つの文章）
ボタンを押すと2つのサイコロを振ります <button id="saikoro">サイコロを振ります！</button>
サイコロの和で「丁・半（ちょう・はん）」が表示されます
【Javascript部分】
let aa,bb; //2つのサイコロの目をaa・bbとしています
document.getElementById('saikoro').addEventListener('click', saihuru);
function saihuru() { //サイコロの1～6目を乱数で決めます
aa = Math.floor(Math.random() * 6 + 1);
bb = Math.floor(Math.random() * 6 + 1);
document.getElementById('koro1').setAttribute('src', 'img/sai' + aa + '.gif');
document.getElementById('koro2').setAttribute('src', 'img/sai' + bb + '.gif');
let cc=(aa+bb)%2; //割り切れるなら丁です
if(cc==0) {
document.getElementById('shoubu').textContent = '「丁（ちょう）」';
} else {
document.getElementById('shoubu').textContent = '「半（はん）」';
}
}
考え方や注意点
ここではイベントハンドラーの「onclick」ではなく、イベントリスナーの「click」を使っています。 それをHTML部分に書いて、<script>内で「.addEventListener」を使ってJavascriptを動作させています。
また、HTML内で、結果を表示させる文章に「id」をつけて、後で「.getElementById」で呼び出して（参照するという言い方をします）最初にあった文章を書き換えるようにしています。
動作で言えば、ボタンがクリックされると、ランダム関数と切り捨て（floor）処理で1～6の整数2種類を得て、その数字のサイコロの目の画像を表示しています。
このとき、数字とサイコロの目を一致させるために、画像は「sai1.gif、sai2.gif、……sai6.gif」のような名前にして呼び出しやすくしており、そして、「img」ホルダーにおいた画像を表示させるために、属性の変更をさせるためのメソッド「.setAttribute」を使っています。
また、「半か丁か」の表示変更は、テキストだけの変更なので、「.setAttribute」ではなく、「.textContent」が使いやすいでしょう。
ただ、「.textContent」は使いやすいのですが、画像などの属性の変更する場合は「.setAttribute」を、そして、テキストだけを変更する場合は「.textContent」を使うというように覚えておくのがいいでしょう。
また、このように、画面に何かを表示するときに、過去には使用できた「document.write」や改行もしてくれる「document.writeln」は簡単なのですが、現在は使ってはいけないことになっていますので、上のような使い方をしています。
これでとりあえず問題なさそうに動いているので、これでOKとしています。
PR
