Image Click3

JavaScript の MouseClick() で三つの山から石を取り除きます。

Image Click3 を呼び出すコードです。
<a href="http://maedakobe.rw.xsi.jp/php/img_click3.php">Image Click3</a>
次のリンクをクリックすると Image Click3 が呼び出されます。
Image Click3

プログラムの説明

  1. Image Click では連続して石を取り除くことは出来ませんでした。
    今回はクリックされた石の番号と3つの山の石数をパラメータで渡して、次々と連続して石を取り除きます。
  2. 3つの山から石を取り除く(img_click3.php)です。
    shift-jis でタイプしてサーバーにアップロードします。
    <html>
    <head><title>Image Click3</title>
    <script type="text/javascript">
    // マウスのクリックで img_click3.php を呼び出す
    function MouseClick(num, y1, y2, y3)
    {   str= "img_click3.php?num=" + num + "&y1=" + y1 + "&y2=" + y2 + "&y3=" + y3;
        window.alert(str);
        location.href = str;
    }
    </script>
    <?php
    // 三つの山に10個以下の石を並べる
    function disp($y1, $y2, $y3)
    {   $ary= array($y1, $y2, $y3);
        for($i=0; $i<3; $i++)
        {   $n= $i*10;
            for($j=0; $j<$ary[$i]; $j++)
            {   print "<img src=\"img/jewel.gif\" onClick=\"MouseClick($n, $y1, $y2, $y3)\">\n";
                $n++;
            }
            print "<br><br>\r\n";
        }
    }           
    ?>
    </head>
    
    <body bgcolor=#f4f8ff>
    <h1>Image Click3</h1>
    JavaScript でマウスのクリックを検出して、三つの山から石を取り除きます。<br>
    <?php
        $num= $_GET['num'];
        $y1= $_GET['y1'];
        $y2= $_GET['y2'];
        $y3= $_GET['y3'];
        print "$num : $y1 : $y2 : $y3<br>\r\n";
        if (!isset($num))
        {   disp(10, 10, 10);  }
        else
        {   $ary= array($y1, $y2, $y3);
            $y= $num/10;
            $c= $num%10;
            if ($c>=0)  $ary[$y]= $c;
            disp($ary[0], $ary[1], $ary[2]);
        }
    ?>
    </body>
    </html>
    
  3. head の中で JavaScript の MouseClick() 関数を定義します。
    山の画像をクリックするとこの関数が呼ばれます。
    クリックされた石の番号と3つの山の石数をパラメータで渡して、連続して石を取り除きます。
    window.alert(str); で呼び出す img_click3.php のパラメータを確認しています。
    <html>
    <head><title>Image Click3</title>
    <script type="text/javascript">
    // マウスのクリックで img_click3.php を呼び出す
    function MouseClick(num, y1, y2, y3)
    {   str= "img_click3.php?num=" + num + "&y1=" + y1 + "&y2=" + y2 + "&y3=" + y3;
        window.alert(str);
        location.href = str;
    }
    </script>
    
  4. head の中で3つの山に石の画像を表示する disp() 関数を定義します。
    img タグの onClick=MouseClick() で画像がクリックされたときに呼び出す関数を設定します。
    石の番号と3つの山の石数をパラメータで渡します。
    石の番号は、1番目の山は0から、2番目の山は10から、3番目の山は20から番号を振ります。
    <?php
    // 三つの山に10個以下の石を並べる
    function disp($y1, $y2, $y3)
    {   $ary= array($y1, $y2, $y3);
        for($i=0; $i<3; $i++)
        {   $n= $i*10;
            for($j=0; $j<$ary[$i]; $j++)
            {   print "<img src=\"img/jewel.gif\" onClick=\"MouseClick($n, $y1, $y2, $y3)\">\n";
                $n++;
            }
            print "<br><br>\r\n";
        }
    }           
    ?>
    </head>
    
  5. img_click3.php では、渡されたパラメータ $num, $y1, $y2, $y3 を取得します。
    渡されたパラメータの印字は、山の石を取り除く前の値です。
    $num が設定されていないときは最初の呼び出しで、山に10個ずつ石を設定します。
    $num(クリックされた石の番号)が設定されているときは山の番号を調べて石を取り除きます。
    更新された石の数をパラメータにして disp() 関数を呼び出します。
    次々と山から石を取り除くことが出来るので試して下さい。
    <body bgcolor=#f4f8ff>
    <h1>Image Click3</h1>
    JavaScript でマウスのクリックを検出して、三つの山から石を取り除きます。<br>
    <?php
        $num= $_GET['num'];
        $y1= $_GET['y1'];
        $y2= $_GET['y2'];
        $y3= $_GET['y3'];
        print "$num : $y1 : $y2 : $y3<br>\r\n";
        if (!isset($num))
        {   disp(10, 10, 10);  }
        else
        {   $ary= array($y1, $y2, $y3);
            $y= $num/10;
            $c= $num%10;
            if ($c>=0)  $ary[$y]= $c;
            disp($ary[0], $ary[1], $ary[2]);
        }
    ?>
    </body>
    

前田稔の超初心者のプログラム入門
PHP Program