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

こんにちわ、168です。
今回はジャンケンゲームを画像を使用して作りましたので、それのアウトプットをします。

コード

app/views/games/index.html.erb


<!DOCTYPE html>

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

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


  <h2>あなたの手は?</h2>
  <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'>
  <h2>あいての手</h2>
  <img id="hishand" src="/assets/hakusi.jpg" class='size' alt='test'>
  <div>結果</div>
  <h2 id="result"></h2>


</body>

<script>

//選択された手を判断する
function gu()
{
  var mynumber=0
  Game(mynumber)
}
function choki()
{
  var mynumber=1
  Game(mynumber)
}
function pa()
{
  var mynumber=2
  Game(mynumber)
}
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("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


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

config/routes.rb


Rails.application.routes.draw do
  root to: 'games#index'
end

app/assets/images

hakusi.jpg
janken_gu.png
janken_choki.png
janken_pa.png

画面

f:id:output168:20210306112248p:plain

学習

app/assets/images

hakusi.jpg
janken_gu.png
janken_choki.png
janken_pa.png

<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'>

<img id="hishand" src="/assets/hakusi.jpg" class='size' alt='test'>

画像を表示表示させるためにファイル保存&記入。
画像ファイルをassets/imagesの中に入れることで表示する事ができている。
assets/画像ファイル名と書く事で、画像ファイルまで導く事ができるようになっている。

<%= image_tag 'janken_gu.png' %>

上記の記述では、同じviewsファイルに画像ファイルを入れることで表示する事ができたが、javascriptを使用しての変更の仕方がわからなかったため、断念。

function gu()
{
  var mynumber=0
  Game(mynumber)
}
function choki()
{
  var mynumber=1
  Game(mynumber)
}
function pa()
{
  var mynumber=2
  Game(mynumber)
}

何の手が選択されているかどうかを判断するために記入。
Game()に移動する前にこの工程を挟む事で、選択した画像に数字を当てている。

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("hishand").src = img[hisnumber].src;

選択された相手の手によって画像が変化するように記入。

まとめ

今回もジャンケンゲームのアウトプットを行いました。
ファイルを指定して実行すると言うことに関しては、前回よりも理解ができたと思います。

しかし、使用してると前回作成したジャンケンゲームよりも使用がしにくくなってしまっている印象があります。
さらに、データベースとも連携のさせたものも作りたいと考えています。
この2点を踏まえたものを次回は作っていこうと思います。

また次回もよろしくお願いします。