ジャンケンゲームのアウトプット（その３）

こんにちわ、168です。
今回もジャンケンゲームを作成しましたので、そのアウトプットを行います。

コード

app/views/games/index.html


<!DOCTYPE html>

<head>
  <title>ジャンケンゲーム</title>
</head>

<body>
  <div class='title'>
    <h1>ジャンケンゲーム</h1>
  </div>
  <div class='my-selct'>
    <div class='selct'>
      <div class='sentence'>
        <h2>あなたの手は?</h2>
      </div>
      <img id='gu' src="/assets/janken_gu.png" onclick='gu()' class='size'>
      <img id='choki' src="/assets/janken_choki.png" onclick='choki()' class='size'>
      <img id='pa' src="/assets/janken_pa.png" onclick='pa()' class='size'>
    </div>
  </div>
  <div class='vs'>
    <div class='hand'>
      <div class='sentence'>
        <h2>出した手</h2>
      </div>
      <div class='enclosure'>
        <img id="myhand" src="/assets/hakusi.jpg" class='vs-size'>
      </div>
    </div>
    <h1>VS</h1>
    <div class='hand'>
      <div class='sentence'>
        <h2>あいての手</h2>
      </div>
      <div class='enclosure'>
        <img id="hishand" src="/assets/hakusi.jpg" class='vs-his-size'>
      </div>
    </div>
  </div>
  <div class='sentence'>
    <div class='action'>
      <div class='vs'>
        <h1>結果</h1>
      </div>
      <div class='vs'>
        <h2 id="result"></h2>
      </div>
    </div>
  </div>


</body>

<script>

//選択された手を判断する
function gu()
{
  var mynumber=0
  Game(mynumber)
  document.getElementById('gu').style.border = '5px solid black';
  document.getElementById("choki").style.border = null;
  document.getElementById("pa").style.border = null;
}
function choki()
{
  var mynumber=1
  Game(mynumber)
  document.getElementById('choki').style.border = '5px solid black';
  document.getElementById("gu").style.border = null;
  document.getElementById("pa").style.border = null;
}
function pa()
{
  var mynumber=2
  Game(mynumber)
  document.getElementById('pa').style.border = '5px solid black';
  document.getElementById("choki").style.border = null;
  document.getElementById("gu").style.border = null;
}

function Game(mynumber)
{
  //相手の手を確認する(ランダム)
  hisnumber=Math.floor(Math.random()*3);
  //相手の出している手を表現
  var img = new Array();

  img[0] = new Image();
  img[0].src = "/assets/janken_gu.png";
  img[1] = new Image();
  img[1].src = "/assets/janken_choki.png";
  img[2] = new Image();
  img[2].src=  "/assets/janken_pa.png";

  document.getElementById("myhand").src = img[mynumber].src;
  document.getElementById("hishand").src = img[hisnumber].src;

  //ジャンケンの結果
  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>

app/assets/stylesheets/style.css


body {
  width: 100vw;
  height: 100vh;
  margin:0;
  padding:0;
}

.size {
  width: 100px;
  height: 100px;
}

.title {
  width: 100vw;
  height: 50px;
  background-color: yellow;
  display: flex;
  justify-content: center;
  line-height:0;
}

h1 {
  color: red;
}

.my-selct {
  display: flex;
  justify-content: center;
}

.sentence {
  display: flex;
  justify-content: center;
}

.vs {
  display: flex;
  justify-content: center;
}

.hand {
  margin: 10px 10px;
}

.enclosure {
  border: 5px solid black;
  padding: 10px;
}

.vs-size {
  width: 250px;
  height: 250px;
  transform: scale(-1, 1);
}

.vs-his-size {
  width: 250px;
  height: 250px;
}


.action {
  width: 70vw;
  height: 200px;
  background-color: gold;
}

画面

f:id:output168:20210309100412p:plain

学習

function gu()
{
  var mynumber=0
  Game(mynumber)
  document.getElementById('gu').style.border = '5px solid black';
  document.getElementById("choki").style.border = null;
  document.getElementById("pa").style.border = null;
}
function choki()
{
  var mynumber=1
  Game(mynumber)
  document.getElementById('choki').style.border = '5px solid black';
  document.getElementById("gu").style.border = null;
  document.getElementById("pa").style.border = null;
}
function pa()
{
  var mynumber=2
  Game(mynumber)
  document.getElementById('pa').style.border = '5px solid black';
  document.getElementById("choki").style.border = null;
  document.getElementById("gu").style.border = null;
}

手を選択した際に何を選択したのかをわかりやすくするために記入。
『document.getElementById('')』で変更する場所を指定し、『style.border』でCSSのborderを使用する事を示している。
borderの動きに関しては、『''』で囲む事で認識させる事ができる。

一度選択して他の選択を行った際に、borderが動いているままだとおかしいので、選択される度に他の選択肢のborderが消えるように記入している。

transform: scale(-1, 1);

画像を反転させて表示するために記入。
左の数字が左右を表しており、右の数字が上下を表している。

1としていする事で逆に指定するという動きを出す事ができる。

まとめ

今回はジャンケンゲームについてのアウトプットを行いました。
前回話していた、データベースへのくくりつけを行うように調べてみたのですが、データベースのデータを表示することはできても、データベースに保存はできなさそうだったので断念しました。

そのため、次回から新しい事を行おうと考えた際には事前にその動作が行えるのかどうかを一度調べてみてから挑戦していこうと考えました。

次回は一度挑戦して行う事ができなかった、音を鳴らす機能を実装していきたいと考えています。
次回もよろしくお願いします。