javascriptでゲームを作りたい その5(サイコロを作る3)

前回ようやく簡素ながらサイコロを作れたので、 今回は「二つのサイコロの出目を比較する」というのを作ってみました。

こんな感じ。


サイコロ1

サイコロ2

結果:



サイコロ1とサイコロ2のを各ボタンでそれぞれ振ることができます。
振った後「くらべる」ボタンを押すと出目を比較して「結果」のところに勝敗を表示します。

「if()」という命令を使って「サイコロ1>サイコロ2 」 の場合 、「サイコロ1<サイコロ2」 の場合 、「サイコロ1=サイコロ2」の場合、の3つに分けてメッセージを設定しています。

一応中身を貼っておきます。

<section style="background-color:black">
<font color="white">
    <br>
   <p>サイコロ1</p>
     <div id="skr1">
    <img src="http://watanabesuguru.com/wp-content/uploads/2020/05/saikoro1.png">
    </div>
   <p>サイコロ2</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 = "結果:サイコロ1の勝ち"}
     else if(kekka2 > kekka1){btn3.innerHTML = "結果:サイコロ2の勝ち"}
      else if(kekka1 == kekka2){btn3.innerHTML = "結果:引き分け"}
     }
    </script>
    <br>
    </font>
    </section>

deme1,deme2 という変数で1~6の数字をランダムに生成してるんですが、それは「.png」を付けて画像を表示する部分に使うので、deme1とdeme2をそのままifで比較するのではなく 「.png」 を付ける前にdemeの数字をkekka1,kekka2という別の変数に渡しておく。それから kekka1,kekka2 のほうを比較するほうが上手くいきました。

ちなみにこのレベルでもなぜかうまく動かず書き直し…を繰り返して3~4時間かかってしまいました…。お手本があってその通りに書いてるわけじゃないので、まずどこが間違っているかすら分からないのです…。

プログラミングを始める前から分かっていたことではありますが、こういう理系っぽい作業向いてない。

次こそは「カードをシャッフルする」に取り掛かりたいと思っていろいろ調べてますが、新しく覚えなきゃいけない要素がかなり多そう…。

つづきはこちら

スポンサーリンク

フォローする

スポンサーリンク