JS　じゃんけんゲーム

ジャンケンゲームを作っています。
ファイルのエラーと共に相手のじゃんけんの手が消えてしまいます。
判定がちゃんとできているのかわからない状態です。

お願い致します。

HTML
1<!DOCTYPE html>
2<html>
3  <head>
4    <title>JavaScript</title>
5    <meta charset="UTF-8">
6  </head>
7  <body>
8 
9      <main>
10          <div class="flex">
11              <div class="box">
12                  <p>相手</p>
13                  <div class="imgarea">
14                      <img id="pc" src="../../images/js_paa.png" alt="PCが出す手の画像">
15                  </div>                    
16              </div>
17  
18  
19              <div class="box">
20                 
21                  <div class="flex column">
22                      <img id="guu" class="you" src="../../images/js_goo.png" alt="グ－の画像">
23                      <img id="choki" class="you" src="../../images/js_choki.png" alt="チョキの画像">
24                      <img id="paa" class="you" src="../../images/js_paa.png" alt="パーの画像">
25                  </div>
26              </div>
27          </div>
28          <p id="msg">手を選ぶと始まります。</p>
29      </main>
30  
31    <script type="text/javascript" src="../js/js3.js"></script>
32  </body>
33</html>
34
35
36

JavaScript
1
2// 定数定義
3
4const   CONSTgoo    =   0;
5const   CONSTchoki  =   1;
6const   CONSTpaa    =   2;
7const   CONSTwin    =   1;
8const   CONSTloss   =   -1;
9const   CONSTdrow   =   0;
10
11// グローバル変数
12
13var intervalid;
14var pcstop  =   true;
15
16// グー・チョキ・パーのエレメント取得
17
18var elmguu    =   document.getElementById("guu");
19var elmchoki  =   document.getElementById("choki");
20var elmpaa    =   document.getElementById("paa");
21
22//  クリックイベントリスナー
23
24elmguu.addEventListener("click",goo,false);
25elmchoki.addEventListener("click",choki,false);
26elmpaa.addEventListener("click",paa,false);
27
28//  マウスオーバーベントリスナー
29
30elmguu.addEventListener("mouseover",gooover,false);
31elmchoki.addEventListener("mouseover",chokiover,false);
32elmpaa.addEventListener("mouseover",paaover,false);
33
34//  グー マウスオーバァー
35
36function    gooover()
37{
38    msout();
39    setbdr(elmguu.style);
40}
41
42//  チョキ マウスオーバァー
43
44function    chokiover()
45{
46    msout();
47    setbdr(elmchoki.style);
48}
49
50//  パー マウスオーバーァー
51
52function    paaover()
53{
54    msout();
55    setbdr(elmpaa.style);
56}
57
58//  グー・チョキ・パーのBorderを消す
59
60function    msout()
61{
62    elmguu.style.borderStyle      =   "none";
63    elmchoki.style.borderStyle    =   "none";
64    elmpaa.style.borderStyle      =   "none";
65}
66
67//  変数で渡されたエレメントを罫線で囲む
68
69function    setbdr(elmstyle)
70{
71    elmstyle.borderStyle    =   "solid";
72    elmstyle.borderWidth    =   "2px";
73    elmstyle.borderColor    =   "red";
74}
75
76//  グーを選択
77
78function    goo()
79{
80    janstr(CONSTgoo);
81}
82
83//  チョキを選択
84
85function    choki()
86{
87    janstr(CONSTchoki);
88}
89
90//  パーを選択
91
92function    paa()
93{
94    janstr(CONSTpaa);
95}
96
97//  グー・チョキ・パー共通
98
99function    janstr(hand)
100{
101    var v0;
102
103    message(" ");                  //  メッセージクリア
104
105    if  (   pcstop  ==  true    )
106    {
107        intval();
108        message("もう一度、手を選ぶと止まります。");
109        pcstop  =   false;
110        return;
111    }  
112    clearInterval(intervalid);
113    pcstop  =   true;
114
115    v0  =   rand();                 //  乱数取得
116    dsphand(v0);                    //  乱数によりグー・チョキ・パーを表示
117    v0  =   judge(v0,hand);         //  PCと人間のジャンケン判定
118    dspjudge(v0);                   //  勝敗を判定して表示
119}
120
121//  インターバル処理
122
123function    intval()
124{
125    var i   =   0;
126
127    intervalid  =   setInterval(function ()
128    {
129        dsphand(i);
130        
131        i++;
132
133        if  (   i   >   2   )
134        {
135            i   =   0;
136        }
137    },100);
138}
139
140//  0～2の乱数を返す
141
142function    rand()
143{
144    var randnum;
145
146    randnum =   Math.floor(Math.random()   *   3);
147    return(randnum);
148}
149
150//  変数に一致する手を表示
151
152function    dsphand(hand)
153{
154    var elm =   document.getElementById("pc");
155
156    switch  (   hand    )
157    {
158        case    CONSTgoo    :
159            elm.src =   "js_goo.png";
160            break;
161        case    CONSTchoki  :
162            elm.src =   "js_choki.png";
163            break;
164        case    CONSTpaa    :
165            elm.src =   "js_paa.png"
166            break;
167    }
168}
169
170//  ジャンケンの結果を判定して返す
171
172function    judge(pc,you)
173{
174    if  (   (   pc  ==  CONSTgoo    )   &&  you ==  CONSTgoo    )
175        return(CONSTdrow);
176    if  (   (   pc  ==  CONSTgoo    )   &&  you ==  CONSTchoki  )
177        return(CONSTloss);
178    if  (   (   pc  ==  CONSTgoo    )   &&  you ==  CONSTpaa    )
179        return(CONSTwin);
180
181    if  (   (   pc  ==  CONSTchoki  )   &&  you ==  CONSTgoo    )
182        return(CONSTwin);
183    if  (   (   pc  ==  CONSTchoki  )   &&  you ==  CONSTchoki  )
184        return(CONSTdrow);
185    if  (   (   pc  ==  CONSTchoki  )   &&  you ==  CONSTpaa    )
186        return(CONSTloss);
187
188    if  (   (   pc  ==  CONSTpaa    )   &&  you ==  CONSTgoo    )
189        return(CONSTloss);
190    if  (   (   pc  ==  CONSTpaa    )   &&  you ==  CONSTchoki  )
191        return(CONSTwin);
192    if  (   (   pc  ==  CONSTpaa    )   &&  you ==  CONSTpaa    )
193        return(CONSTdrow);
194}
195
196//  引数で判定し結果を表示
197
198function    dspjudge(jge)
199{
200    if  (   jge ==  CONSTdrow   )
201    {
202        message("あいこ");
203        return;
204    }
205    if  (   jge ==  CONSTwin    )
206    {
207        message("勝利");
208        return;
209    }
210    if  (   jge ==   CONSTloss  )
211    {
212        message("敗北");
213        return;
214    }
215}
216
217//  メッセージを表示
218
219function    message(text)
220{
221    var elm;
222
223    elm =   document.getElementById("msg");
224    elm.innerHTML   =   text;
225}

ku__ra__ge

2021/08/08 07:44

なにが分からないかを書いてください。すべてが分からないなら入門サイト等で一通り学習を進めてください。

BeatStar

2021/08/08 07:53

で、なにがしたいのでしょうか。ご自分の質問を『第三者的視点で』、フラットな状態で読んでみてください。『どのようにやったか』とかはっきりとわかりますか？回答者は善意から回答してます。まずは自分でやりましょう。そしてできたところまででいいので、提示しましょう。それと仕様もちゃんとかんがえましょう。

BeatStar

2021/08/08 07:54

まずは基礎からやりましょう。

m.ts10806

2021/08/08 07:55

＞頭が回りません。すみません。本当に何１つ書けないのでしたらそこに手を出す段階ではないとも言えます。

K_3578

2021/08/10 06:16

JSも別のコードブロックに入れましょう。 ```html ソースコード ``` (1行以上スペースを空ける) ```JavaScript ソースコード ``` という形にしないと読みづらいです

退会済みユーザー

2021/08/10 06:17

質問の件で大変申し訳ございませんでした。自身で考えて起きたエラーで質問修正しました。言葉足りずでしたら申し訳ございません。よろしくお願いします。

K_3578

2021/08/10 06:23

編集画面右側にはプレビューが表示されているのでそれを見ながら調整すると良いと思います。

退会済みユーザー

2021/08/10 06:27

ありがとうございます。

AbeTakashi

2021/08/10 06:31

「ファイルのエラー」と言われても回答者にはなんのことがさっぱり伝わりませんので、エラーの内容を正しく伝えてください。WEBブラウザで実行しているならログが表示される場所にエラーメッセージが表示されていると思うので、そのエラーメッセージを質問文に追記してください。

BeatStar

2021/08/10 06:35

> ファイルのエラーどういう意味でしょうか。単純に「表示されない」ってことなのか、別の何かしらのメッセージが出ているのかとかで全然違いますよ。もし前者、つまり「画像が表示されない」ってことであれば、「ファイルパスを確認せよ」です。ファイルパス……ファイルのパスです。参考: http://www14.plala.or.jp/campus-note/vine_linux/others/path.html

行動規範の内容に同意します

回答1件

ベストアンサー

html
1<img id="pc" src="../../images/js_paa.png" alt="PCが出す手の画像">

となっているところ、

js
1      elm.src = "js_paa.png"

としているのが原因ではないかと思います。

この場合、HTMLを直接書き換えていますので、ファイルの相対位置について、jsファイルがどこにあるのかは関係のない話になります。

投稿2021/08/10 07:29

編集2021/08/10 08:32

Lhankor_Mhy

総合スコア36115

退会済みユーザー

2021/08/10 08:16

回答ありがとうございます。理解に乏しくて申し訳ございません。CSSでのコードソースを作ったほうがいいのでしょうか。

Lhankor_Mhy

2021/08/10 08:22

すみません、ご質問の意味が読み取れませんでした。「CSSでのコードソースを作る」とは具体的にはどのようなものを想定していますか？

Lhankor_Mhy

2021/08/10 08:32 編集

あー、すみません、回答のコードハイライトの言語が間違っている、というご指摘なのですね。修正いたします。

退会済みユーザー

2021/08/10 11:01

できました！！！思っていたものができました！！！ありがとうございました！

Lhankor_Mhy

2021/08/10 11:17

お役に立てたようで何よりです。

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

JS　じゃんけんゲーム

関連した質問