キーで画像を移動

PHP で JavaScript と連携して、矢印キーで画像を移動します。
php_key.php を呼び出すコードです。
<a href="http://maedakobe.rw.xsi.jp/php/php_key.php">キーで画像を移動</a>

次のリンクをクリックすると矢印キーで画像を動かす PHP が実行されます。
ウインドウ上をクリックしてから矢印キーで操作して下さい。
キーで画像を移動

プログラムの説明

  1. マウスやキーの操作はクライアントサイドで動作する JavaScript を使います。
    今回は PHP で JavaScript と連携して、矢印キーで画像を移動します。
    このプログラムは JavaScript の 矢印キーで画像を移動 と同じで、拡張子が .html から .php に変わっただけです。
  2. "php_key.php" の全ソースコードです。
    shift-jis でタイプして、サーバーにアップロードして下さい。
    <html>
    <head>
    <script type="text/javascript">
      document.onkeydown = KeyCode;
      x= 300;
      y= 200;
      function KeyCode()
      { if(document.all)    kcode = event.keyCode;
        else if(document.getElementById)
            kcode = (event.keyCode)? event.keyCode: event.charCode;
        else if(document.layers)    kcode = event.which;
        switch(kcode)
        { case 0x25:
              if (x>1)  x-= 2;
              break;
          case 0x26:
              if (y>1)  y-= 2;
              break;
          case 0x27:
              x+= 2;
              break;
          case 0x28:
              y+= 2;
              break;
        }
      }
      function moveImage()
      {
        document.Bird.style.left= x;
        document.Bird.style.top= y;
      }
    </script>
    </head>
    <body bgcolor="#f4f8ff" onLoad="setInterval('moveImage()',25)">
    
    <h2>PHP Key Image Move</h2>
    <img src="../img/bird11.gif" name="Bird"
      style="position:absolute;left:300px;top:200px;">
    </body>
    </html>
    
  3. body の onLoad で setInterval を設定して 25 ミリ秒ごとに moveImage() を呼び出します。
    <body bgcolor="#f4f8ff" onLoad="setInterval('moveImage()',25)">
    
  4. moveImage() では Bird.style.left= x; Bird.style.top= y; の座標に画像を移動します。
        document.Bird.style.left= x;
        document.Bird.style.top= y;
    
  5. 画像は img タグで name="Bird" と style で座標を設定して bird11.gif を描画しています。
    bird11.gif は Animation GIF なので、アニメーションしながら移動します。
    <img src="../img/bird11.gif" name="Bird"
      style="position:absolute;left:300px;top:200px;">
    
  6. document.onkeydown = KeyCode; でキーが押されると KeyCode 関数が呼ばれます。
      document.onkeydown = KeyCode;
    
  7. function KeyCode() では、上下左右のキーを判定して座標を更新します。
  8. JavaScript はマウスやキーボードの操作を検出してリアルタイムに処理するのに適しています。
    これに対して、PHP はサーバーサイドで複数ユーザーの管理や情報の交換などを担当します。
    JavaScript のプログラムは JavaScript を参照して下さい。

直接 img タグで描画テスト

document.Bird.style. の代わりに img タグに座標を設定して描画テストをしてみました。
結論から言うと、この方法では移動出来ないようです。
座標 x, y を定義して描画するソースは次のようになります。
    x= 300;
    y= 200;
    var str= "style=\"position:absolute;left:" + x + "px;top:" + y + "px;\"";
    document.write("<img src='../img/bird11.gif' name='Bird'" + str + ">");
このソースを moveImage() に適用してみましたが、移動出来ませんでした。

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