ここでは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