【JavaScript】プログラミング授業案⑭【じゃんけんゲーム】

２年後には実際にプログラミングを授業の中で実施しなくてはなりません。
どんな授業を行うか、検証を兼ねて検討しています。
今回は、じゃんけんゲームアプリの制作です。

今回の学習成果

あなたの選択は
グーチョキパー
選択
もう一回
相手の選択は：
勝敗の結果は：

 あなたの選択は
  <select id="myHand">
    <option value="0">グー</option>
    <option value="1">チョキ</option>
    <option value="2">パー</option>
  </select>
  <button id="btn">選択</button>
  <a href=""><button>もう一回</button></a>

  <div id="msg1">
    相手の選択は：
  </div>

  <div id="msg2">
    勝敗の結果は：
  </div>

当初の計画では、ユーザにグーとかパーとか入力してもらって結果を返そうと思っていました。
ちょっと思いつかなかったのと、調べてみると複雑になりそうでした。
ということで、以前配列の所でつかったselectをつかってリストから選択してもらいます。

CSSの記述

最近CSSが雑です。
すみません。
必要最低限と、見た目を揃える程度の記述です。
背景色や文字色など設定など、やりようはありますね。

JavaScriptの記述

難しいことはやっていません。
これまで学んできた「条件分岐」がメインです。
クリックイベントとHTMLの書き換えは、必須内容になりつつあります。
今回のポイントは、グー＝０、チョキ＝１、パー＝２と設定してあることです。
ユーザがリストで選択した順に対応しています。
あとは、この取り出された数字を引き算して勝敗を決めます。
ユーザーコンピュータの数字で、以下のような表になります。

検討事項

じゃんけんを算数で表すというところが、なんともコンピュータ処理です。
このあたりの思考のつなげ方が、プログラミングでは問われてきます。
乱数の使い方というところでも、数学的な素養って最低限の部分ですが必要です。
それにしても、リセットする方法が未だによくわかっていません。
思いっきりページ自体を読み込み直してます。
ここもクリックイベントなんですかね。
それこそ、検討事項です。