MY Page-2

ビルトインサーバーでゲームで使う画像のテストをします。

プログラムの説明

  1. index.html にテストする PHP のリンクを設定します。
    img.php には、パラメータとしてボタンの数「val=1~7」を渡します。
    <html>
    <head>
    <meta charset=utf-8>
    <link rel="stylesheet" href="php.css" type="text/css">
    <title>Index</title>
    </head>
    
    <body>
    <h1>Image のテスト</h1>
    
    <ol>
      <li><a href="imgrand.php">乱数で石の数を決める</a><br>
      <li><a href="img.php?val=5">石を並べる</a><br>
      <li><a href="formbutton.html">JavaScript でボタンを並べる</a><br>
      <li><a href="img_num.php">数字の画像を切り分ける</a><br>
          詳しい説明は JavaScript の Image Counter を参照して下さい。<br>
      <li><a href="img_cnt.php">画像でカウンターを描画する</a><br>
          詳しい説明は JavaScript の Image Counter を参照して下さい。<br>
    </ol>
    
    </body>
    </html>
    
  2. imgrand.php を utf-8(BOM 有り)でタイプします。
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>Image Rand</title>
    </head>
    <body>
    <h2>乱数で石の数を決める</h2>
    <?php
        $n= rand(5,10);
        for($i=0; $i<$n; $i++)
        {   print "<IMG SRC=\"img/jewel.gif\">\r\n";
        }
    ?>
    </body>
    </html>
    
  3. img.php を utf-8(BOM 有り)でタイプします。
    パラメータ(val)を受け取って val 個の画像を描画します。
    <?php
    $n= $_GET['val'];
    error_log("img.php が呼ばれました  $n\n", 3, 'app.log');
    for($i=0; $i<$n; $i++)
    {   print "<img src=\"img/jewel.gif\">\r\n";
    }
    ?>
    
  4. formbutton.html を utf-8(BOM 有り)でタイプします。
    form で7個のボタンを表示して、クリックされた数をパラメータとして img.php を呼び出します。
    formbutton.html の拡張子は html ですが img.php を呼び出すので、サーバーまたはビルトインサーバーから起動して下さい。
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <link rel="stylesheet" href="php.css" type="text/css">
    <title>forn button</title>
    </head>
    
    <body>
    <h1>JavaScript でボタンを並べる</h1>
    <img src="img/jewel.gif"><br><br>
    
    JavaScript でボタンを並べて、選択された数の画像を PHP で表示します。<br>
    ボタンのクリックで石の画像を表示します。<br>
    <form action="img.php" method="get">
    <script type="text/javascript">
        for(i=1; i<8; i++)
        {   document.write('<input type=radio name="val" value=',i,'>',i,' 個<br>');
        }
    </script>
    <input type="submit" value="送信">
    </form>
    </body>
    </html>
    
  5. img_num.php を utf-8(BOM 有り)でタイプします。
    0~9の画像を切り分けて数字を描画します。
    数字の画像は上から重ねて描画されるので、最後に描画した数字だけしか見えません。
    <html>
    <head>
    <meta charset=utf-8">
    <title>Image Num</title>
    <?php
      function View_Num($num)
      {
        $pos = $num*60;
        $s1 = '(0px,' . ($pos+60) . 'px,60px,' . $pos . 'px)';
        $s2 = 'left:' . (100-$pos) . 'px;top:100px;">';
        $s = '<img src="img/num.gif" style="clip:rect' . $s1 . '; position:absolute;' . $s2;
        error_log("View_Num が呼ばれました  $s\n", 3, 'app.log');
        print($s);
      }
    ?>
    </head>
    
    <body>
    <h2>数字の画像を切り分ける</h2>
    <?php
        //View_Num(0);
        //View_Num(2);
        View_Num(5);
        //View_Num(8);
    ?>
    </body>
    </html>
    
  6. img_cnt.php を utf-8(BOM 有り)でタイプします。
    0~9の画画を使ってカウンターを6桁で描画します。
    数字の桁によって、座標をずらして描画しています。
    <html>
    <head>
    <meta charset=utf-8">
    <title>Image Num</title>
    <?php
      function View_Cnt($cnt)
      {
        $w= $cnt;
        for($i=0; $i<6; $i++)
        {  $c= $w%10;
           $w= floor($w/10);
           View_Num($c, 360-$i*60,100);
        }
      }
    
      function View_Num($num, $x, $y)
      {
        $pos = $num*60;
        $s1 = '(0px,' . ($pos+60) . 'px,60px,' . $pos . 'px)';
        $s2 = 'left:' . ($x-$pos) . 'px;top:' . $y . 'px;">';
        $s = '<img src="img/num.gif" style="clip:rect' . $s1 . '; position:absolute;' . $s2;
        error_log("View_Num が呼ばれました  $s\n", 3, 'app.log');
        print($s);
      }
    ?>
    </head>
    
    <body>
    <h2>画像を切り分けてカウントを描画</h2>
    <?php
        //View_Num(1,60,100);
        //View_Num(4,120,100);
        //View_Num(3,180,100);
        View_Cnt(14375);
    ?>
    </body>
    </html>
    
  7. コマンドプロンプトを起動して phpbat.bat を実行します。
    ブラウザを起動して http://localhost:8000 をURLに貼り付けると index.html が実行されます。
  8. index.html の項目から「乱数で石の数を決める」をクリックすると幾つかの石が描画されます。
    「石を並べる」をクリックすると5個の石が描画されます。(パラメータに5が設定されている)
    「JavaScript でボタンを並べる」をクリックすると7個のボタンが並び、選択した数の石が描画されます。
    「数字の画像を切り分ける」をクリックすると0~9の数字の画像を切り分けて描画されます。
    「画像でカウンターを描画する」をクリックすると0~9の数字の画像を使ってカウンターが描画されます。

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