PHP: 配列からランダムに取得する処理を、ボタン押下までリピートし続けたい

Question

前提・実現したいこと

PHPを独学中の初心者です。
基礎文法をさらったところで、一区切りのアウトプットとして
スロットゲームを作っています。

ページにアクセスした時点で、デフォルトで
３つのエリアにそれぞれ画像をランダムに表示し続けて、
stopボタンを押したときに、画像の動きを止める処理をしたいと考えております。

PHPで向かない処理かとは思うのですが、
勉強のアウトプットとして制作したいので、相談乗っていただきたいです。

###試したこと①
各画像エリアにページリロードのたびに、ランダムで画像を表示させるよう記述

<?php
//画像を配列格納
$imgArray = array(
         "images/img1.png",
         "images/img2.png",
         "images/img3.png",
         "images/img4.png",
         "images/img5.png"
       );

//配列からランダムに取得
$imgRand1 = $imgArray[mt_rand(0, count($imgArray)-1)];
$imgRand2 = $imgArray[mt_rand(0, count($imgArray)-1)];
$imgRand3 = $imgArray[mt_rand(0, count($imgArray)-1)];
?>

<div class="imgArea" id="area1">
    <img src="<?php echo $imgRand1 ?>">
</div>

<div class="imgArea" id="area2">
    <img src="<?php echo $imgRand2 ?>">
</div>

<div class="imgArea" id="area3">
    <img src="<?php echo $imgRand3 ?>">
</div>

試したこと②

ページリロードをしなくとも、ページアクセス時点で自動的にランダムに画像が変わるよう
sleep()を入れた関数を使えば、リピートされるかなと思い、処理をかきましたが
クルクルとページ取得に時間がかかって表示できませんでした・・

そもそもPHPで書くべきコードではないかもしれませんが
ご助言いただけると嬉しいです。
よろしくお願いいたします。

<?php
//画像を配列格納
$imgArray = array(
         "images/img1.png",
         "images/img2.png",
         "images/img3.png",
         "images/img4.png",
         "images/img5.png"
       );

//ボタンを押す前まではランダムにリピートさせる
//$imgRpt=trueをトリガーに
function imgRand1($imgArray) {
     $imgRpt = true;
     $imgRand1 = $imgArray[mt_rand(0, count($imgArray)-1)];
     return $imgRand1;
     while ($imgRpt = true) {
          imgRand1($imgArray);
          sleep(0.1);
        }
      }
?>
<div class="imgArea" id="area1">
     <img src="<?php echo imgRand1($imgArray) ?>">
</div>

Answer 1

その手のインタラクティブなコンテンツを作る場合、
どうしてもwebブラウザ上でjavascriptの支援なしには実現性が難しいように思うのですが。

PHPの動作として、
webブラウザに応答を返す際にHTMLコードを出力しきった時点で、
PHPコードの動作は終了しています。
PHPの動作が終わったのを検出してwebサーバーがwebブラウザあてに
応答を出力します。
（PHPやwebサーバープログラムの調整の仕方によってはその限りではないこともできるかもしれませんが。）

何が言いたいのかというと、
画像を表示するためのIMG要素を出力して、
webブラウザ上でレンダリングされたものを、
取り消して画像を差し替えるような動作は
PHPのみでは実現は不可能という点です。

webブラウザ上でレンダリングされているHTMLコードに介入するには、
webブラウザ上で動作するjavascriptのコードでDOM操作するのが
無難なやり方だと思います。
表示中のIMG要素を特定し、表示に使う画像のURLを書き換えることによって、
別の画像をその場所に表示することができそうです。

javascriptを駆使したら、それこそ、
スタイルシートへの干渉もできますし、
縦方向にドラムが回るようなアニメーションももしかしたら実現できるかもしれません。

感じる学習レベルと、常識的に想像するスロットゲームとの間に
まだまだ知らなければならない技術と知識が足りていないのではないかと察します。

Comments

[000aiueo000]

>>m6u様
ご回答いただきありがとうございます。
やはり、PHPでは実現難しいですよね。。

以前似たようなゲームをJavascriptで制作したので、
同じことをPHPでもできるか今回試したかったという経緯なのですが、、

それぞれ言語のもつ目的と適用も違いますし、別のアウトプットを探ろうと思います。。！
ありがとうございました。