ジャンケンゲームのアウトプット

こんにちわ、168です。

今回はジャンケンゲームアプリを作りましたのでアウトプットします。

前回、アラームを行うためのアプリを作ると書いていましたが、ファイルを指定して実行させることができなかったので、別のアプリを作成しました。

ファイル指定して実行させることができたら、その旨をアウトプットしていこうと思います。

コード

app/views/games/index.html.erb



<!DOCTYPE html>

<body>
  <h1>ジャンケンゲーム</h1>

  <form name='player'>
    <h2>あなたの手は?</h2>
    <select name='janken'>
      <option>グー</option>
      <option>チョキ</option>
      <option>パー</option>
    </select>
    <input type='button' value="決定" onclick='Game()'>
    <h2>あいての手</h2>
    <div id="hishand"> </div>
    <div>結果</div>
    <h2 id="result"></h2>
  </form>
</body>

<script>
function Game()
{
  //自分の手を確認する
  var mynumber=document.player.janken.selectedIndex;
  //相手の手を確認する(ランダム)
  hisnumber=Math.floor(Math.random()*3);
  //相手の出している手を表現
  if (hisnumber==0){
    hishand="グー"
  }
  if (hisnumber==1){
    hishand="チョキ"
  }
  if (hisnumber==2){
    hishand="パー"
  }
  document.getElementById("hishand").innerHTML = hishand;

  //ジャンケンの結果
  if (mynumber-hisnumber==-1||mynumber-hisnumber==2){
    result="あなたの勝ちです"
  }
  if (mynumber==hisnumber){
    result="引き分け"
  }
  if (mynumber-hisnumber==1||mynumber-hisnumber==-2){
    result="あいての勝ちです"
  }

  document.getElementById("result").innerHTML = result;
}

</script>

画面

f:id:output168:20210304114725p:plain

学習

<select name='janken'>
      <option>グー</option>
      <option>チョキ</option>
      <option>パー</option>
    </select>

ジャンケンの手を選択できるように記入。
selectを使用することでoptionに入れた文字を選択肢にする事ができる。
optionは上から順番に数字が当てられる。
1から数字が当てられるのではなく、0から数字が当てられるため注意が必要。

<div id="hishand"> </div>

〜

document.getElementById("hishand").innerHTML = hishand;

相手のジャンケンの手を表示するために記入。
idを指定することでscriptの動きを指定することができる。
innerHTMLを記入する事で、要素の中身を書き換える事ができます。

hisnumber=Math.floor(Math.random()*3);

ランダムで相手のジャンケンの手の値を作成するために記入。
Math.floor(Math.random()*3)で３つの数字から値が選ばれる。
このとき、0から数えた数字が選択されるため、この場合は（0、1、2）のいずれかが１つ選択される。

if (hisnumber==0){
    hishand="グー"
  }
  if (hisnumber==1){
    hishand="チョキ"
  }
  if (hisnumber==2){
    hishand="パー"
  }

選択された数字を相手の手と表現するために記入。
select内のoptionの値と一致させている。

if (mynumber-hisnumber==-1||mynumber-hisnumber==2){
    result="あなたの勝ちです"
  }
  if (mynumber==hisnumber){
    result="引き分け"
  }
  if (mynumber-hisnumber==1||mynumber-hisnumber==-2){
    result="あいての勝ちです"
  }

ジャンケンの結果を表すために記入。
ジャンケンの手は全て値が割り振られている。
その値を計算し、出た値で結果を判別している。

勝ちが存在するパターンとしては、
（自分）グー　　（相手）チョキ
（自分）チョキ　（相手）パー
（自分）パー　　（相手）グー
の３パターンが存在する。

値に変換すると、
（自分）0　（相手）1
（自分）1　（相手）2
（自分）2　（相手）0
となる。

足し算にすると別の結果なのに値が同じになってくる事象が発生してしまうので、引き算で計算を行うと
（自分）0　ー（相手）1　＝　-1
（自分）1　ー（相手）2　＝　-1
（自分）2　ー（相手）0　＝　2
という結果になり、-1と2を定義することで勝ちを表すことができる。

負けが存在するパターンとしては勝ちパターンの逆のため、
（自分）0　ー（相手）2　＝　-2
（自分）1　ー（相手）0　＝　1
（自分）2　ー（相手）1　＝　1
という結果になり、-2と1を定義することで負けを表すことができる。

引き分けに関しては同じ値が出ていると引き分けなため、値が同じであれば引き分けだと表している。

まとめ

今回はジャンケンゲームを作り、アウトプットしました。
今回はファイルを指定して実行を行うことをする上でのフォーマット作りの意味をこめて作成しました。

作成が止まっているアラームを行うためのアプリを作成できるように、一度画像ファイルを用いてファイル指定の練習をしようと考えています。
そのため、次回はジャンケンの手を画像で使用して作っていきたいと思います。
また次回もよろしくお願いします。