ボタンに画像を張り付けてPHPに適応させる方法が知りたいです。お願いします;;

前提・実現したいこと

ジャンケンゲームを作っていてグー、チョキ、パーを選ぶ所を写真に置き換えて選択できるようにしたいです

発生している問題・エラーメッセージ

Warning: Undefined variable $player in C:\xampp\htdocs\jankenkadai.php\janken.php on line 39
負け

該当のソースコード

php
1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta http-equiv="X-UA-Compatible" content="IE=edge">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <link rel="stylesheet" href="css/janken.css">
8    <title>じゃんけんゲーム</title>
9</head>
10<body>
11    <h1 class="head01" data-en="Winner or Loser"></h1>
12    <h2 class="head02" >JankenGAME</h2>
13        <?php
14            
15            $computer = rand(0,2);
16            
17            //プレイヤーの手
18            if (isset($_POST["sub1"])) {
19                $player = 0;
20                echo "自分の手はグー", "<br>";
21            } elseif (isset($_POST["sub2"])) {
22                $player = 1;
23                echo "自分の手はチョキ", "<br>";
24            } elseif (isset($_POST["sub3"])) {
25                $player = 2;
26                echo "自分の手はパー", "<br>";
27            }
28
29            //コンピューターの手
30            if ($computer == 0) {
31                echo "相手の手はグー", "<br>";
32            } elseif ($computer == 1) {
33                echo "相手の手はチョキ", "<br>";
34            } elseif ($computer == 2) {
35                echo "相手の手はパー", "<br>";
36            }
37            
38            //勝敗判定
39            $judge = ($player - $computer + 3) % 3; //小数点は考えない
40            if ($judge == 0) { //0の場合あいこ
41                echo "あいこ", "<br>";
42            } elseif ($judge == 1) { //1の場合勝ち
43                echo "負け", "<br>";
44            } elseif ($judge == 2) { //2の場合負け
45                echo "勝ち", "<br>";
46            }  
47        ?>
48    <form method="POST" action="">
49        <input type="image" src="images0.png"  name="sub1" alt="グー">
50        <input type="image" src="images1.png"  name="sub2" alt="チョキ">
51        <input type="image" src="images2.png"  name="sub3" alt="パー">
52    </form>
53</body>
54</html>

試したこと

写真をボタンに配置することはできたのですが、すべての手がグーを出したことになってしまいます
写真を配置する前は正しく動いていたので、正しくformのところがかけてないと思うのですがどこを直せばよいかわかりません,

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

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

回答3件

POSTやGETは直接参照されない方が良いです。
filter_input()を利用するとnullかどうかで判定できるので実装もシンプルになります。

ただ、いずれにしても$playerのように後から参照される変数はグローバルスコープで初期化しておいた方が良いです。

あと、nameを同じにしてvalueかえれば「～が来てたら」をわざわざ書かなくてもよくなります。
ラジオボタンを同じ理屈です。
グー、チョキ、パーも設定的に配列で持っておけば良いです。

html
1        <button name="sub" value="0">グー</button>
2        <button name="sub" value="1">チョキ</button>
3        <button name="sub" value="2">パー</button>

※type=imageはvalue使えないので例示のため変更しています。

php
1$action = ["グー","チョキ","パー"];
2
3$sub = filter_input(INPUT_POST,"sub");
4
5if(!is_null($sub)){
6    echo $sub;
7    echo "自分の手:".$action[$sub];
8
9    //以下、判定処理
10    $computer = rand(0,2);
11    echo "コンピュータの手:".$action[$computer];
12}

HTMLはブラウザのデベロッパツールでその場限りの改ざんが可能なので自分の手は初期値設定したうえでarray_key_existsなどでチェックしたほうが良いかもしれませんけどね。

投稿2021/09/24 21:55

編集2021/09/25 04:18

m.ts10806

総合スコア80875

ak.n

2021/09/25 03:29

綺麗なコードですね、勉強になります。

m.ts10806

2021/09/25 04:18 編集

1個失敗してますね私。 > https://developer.mozilla.org/ja/docs/Web/HTML/Element/input/image <input type="image"> 要素は value 属性を受け付けませんかえておこう。

HUREBURU

2021/09/26 16:15

お二人のおかげでより深く理解し学ぶことが出来ましたありがとうございます！お二人ともにベストアンサーを渡したかったです;;

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

ベストアンサー

html
1<input type="image" src="sub1.png" name="sub1">

とした場合 name を sub1 としているにも関わらず、sub1 いう名前では POST されず、
画像のどこの座標を押したのかが、sub1_x, sub1_y という名前で POST されるようです。

そのため、

php
1if (!empty($_POST["sub1"]){
2}

では押されたかどうかの判定はできず、

php
1if (!empty($_POST["sub1_x"]){
2}

とでもしてあげると良いでしょう。! はどの手も必ずつけてください。

投稿2021/09/24 15:45

ak.n

総合スコア291

HUREBURU

2021/09/24 15:49

うわああああああああああああ本当にありがとうございました！！！おかげで正しく動作してくれました！！！本当に助かりました！！

ak.n

2021/09/24 15:56

動作がおかしいときは、変数を表示してみてください。今回の場合、$_POST の if がうまく動いていないなと感じたと思いますので、 var_dump($_POST); を if の前に書いてあげて、ちゃんと思い通りに POST されてきているのか、チェックすればいいです。

tanat

2021/09/26 16:42

empty()だと座標値が0の時(タブ移動でカーソルを合わせてエンターで選択したり、画像の端をクリックした場合は0になったはず)で判定がおかしくなってしまいませんかね？ filter_input(INPUT_POST,"sub1_x");で取得した値で判定するか、 if(isset($_POST["sub1_x"]) and !is_null($_POST["sub1_x"]) で判定する方が良いかと思います。

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

isset() のかわりに !empty() としたら動きますか?
じゃんけんの勝敗判定の方法がなかなかいいですね。

あと、初回の表示では $_POST が空なので、$player が定義されません。
なので、Undefined Variable $player ... が出ると思います。
$_POST が空のときは、勝敗判定をスキップするようにしたほうがいいですね。

投稿2021/09/24 14:46

編集2021/09/24 14:52

ak.n

総合スコア291

HUREBURU

2021/09/24 15:10 編集

またグーのみになってしまいました。判定をスキップする方法ですがcontinueを使ってみたのですがエラーがでてしまいelseで書きましたがこれは大丈夫なのでしょうか, formのaction=""と空になっているのですがこちらは問題ないでしょうか <?php $computer = rand(0,2); //プレイヤーの手 if (!empty($_POST["sub1"])) { $player = 0; echo "自分の手はグー", " "; } elseif (!empty($_POST["sub2"])) { $player = 1; echo "自分の手はチョキ", " "; } elseif (!empty($_POST["sub3"])) { $player = 2; echo "自分の手はパー", " "; } //コンピューターの手 if ($computer == 0) { echo "相手の手はグー", " "; } elseif ($computer == 1) { echo "相手の手はチョキ", " "; } elseif ($computer == 2) { echo "相手の手はパー", " "; } //勝敗判定 $judge = ($player - $computer + 3) % 3; //小数点は考えない if ($judge == 0) { //0の場合あいこ echo "あいこ", " "; } elseif ($judge == 1) { //1の場合勝ち echo "負け", " "; } elseif ($judge == 2) { //2の場合負け echo "勝ち", " "; }else {　　　　ーーーつけたした echo ""; } ?>

HUREBURU

2021/09/24 15:08

!emptyをグーとチョキの判定の所のみ empty(ビックリマークなし)をパーの判定の所にしてみたらエラーはきえたのですが次はすべての手がパー判定になってしまいました;; //プレイヤーの手 if (!empty($_POST["sub1"])) { $player = 0; echo "自分の手はグー", " "; } elseif (!empty($_POST["sub2"])) { $player = 1; echo "自分の手はチョキ", " "; } elseif (empty($_POST["sub3"])) { $player = 2; echo "自分の手はパー", " "; }

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

あなたの回答