2つのサイコロを振って合計で判定するJavaScript
つまり、目の合計が「丁か半か」を表示します。
前のページでは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
