前回ようやく簡素ながらサイコロを作れたので、 今回は「二つのサイコロの出目を比較する」というのを作ってみました。
こんな感じ。
サイコロ１
サイコロ２
結果：
サイコロ１とサイコロ２のを各ボタンでそれぞれ振ることができます。
振った後「くらべる」ボタンを押すと出目を比較して「結果」のところに勝敗を表示します。
「if()」という命令を使って「サイコロ１＞サイコロ２ 」 の場合 、「サイコロ１＜サイコロ２」 の場合 、「サイコロ１＝サイコロ２」の場合、の3つに分けてメッセージを設定しています。
一応中身を貼っておきます。
<section style="background-color:black">
<font color="white">
<br>
<p>サイコロ１</p>
<div id="skr1">
<img src="http://watanabesuguru.com/wp-content/uploads/2020/05/saikoro1.png">
</div>
<p>サイコロ２</p>
<div id="skr2">
<img src="http://watanabesuguru.com/wp-content/uploads/2020/05/saikoro1.png">
</div>
<p id="kka">結果：</p>
<input type="button" value="サイコロ1を振る" onclick="onBtn1()">
<input type="button" value="サイコロ2を振る" onclick="onBtn2()">
<input type="button" value="くらべる" onclick="onBtn3()">
<br>
<script>
var deme1 = 0;
var deme2 = 0;
var kekka1 = 0;
var kekka2 = 0;
var btn1 = document.getElementById("skr1");
var btn2 = document.getElementById("skr2");
var btn3 = document.getElementById("kka");
function onBtn1(){
deme1 = Math.floor(Math.random() * 6) + 1;
kekka1 = deme1
deme1 = "http://watanabesuguru.com/wp-content/uploads/2020/05/saikoro" + deme1 + ".png"
btn1.innerHTML ='<img src= "' + deme1 + '">'
};
function onBtn2(){
deme2 = Math.floor(Math.random() * 6) + 1;
kekka2 = deme2
deme2 = "http://watanabesuguru.com/wp-content/uploads/2020/05/saikoro" + deme2 + ".png"
btn2.innerHTML ='<img src= "' + deme2 + '">'
};
function onBtn3(){
if(kekka1 > kekka2){btn3.innerHTML = "結果:サイコロ１の勝ち"}
else if(kekka2 > kekka1){btn3.innerHTML = "結果:サイコロ２の勝ち"}
else if(kekka1 == kekka2){btn3.innerHTML = "結果:引き分け"}
}
</script>
<br>
</font>
</section>deme1,deme2 という変数で１～６の数字をランダムに生成してるんですが、それは「.png」を付けて画像を表示する部分に使うので、deme1とdeme2をそのままifで比較するのではなく 「.png」 を付ける前にdemeの数字をkekka1,kekka2という別の変数に渡しておく。それから kekka1,kekka2 のほうを比較するほうが上手くいきました。
ちなみにこのレベルでもなぜかうまく動かず書き直し…を繰り返して3～4時間かかってしまいました…。お手本があってその通りに書いてるわけじゃないので、まずどこが間違っているかすら分からないのです…。
プログラミングを始める前から分かっていたことではありますが、こういう理系っぽい作業向いてない。
次こそは「カードをシャッフルする」に取り掛かりたいと思っていろいろ調べてますが、新しく覚えなきゃいけない要素がかなり多そう…。
