アバターをキーで操作

RPG ゲームのアバターに見立てた GIF 画像を、矢印キーで操作します。
rpg_abc.php を呼び出すコードです。
<a href="http://maedakobe.rw.xsi.jp/php/rpg_abc.php">キーで操作</a>

次のリンクをクリックするとアバターを矢印キーで操作出来ます。
キーで操作

プログラムの説明

  1. 画像を矢印キーで操作する基本プログラムは、次のページを参照して下さい。
    矢印キーで画像を移動(PHP) 及び 矢印キーで画像を移動(JavaScript)
    今回はアバターに見立てた3体の画像を表示して 'AA' の画像を矢印キーで操作します。
  2. "rpg_abc.php" の全ソースコードです。
    utf-8 でタイプして、サーバーにアップロードして下さい。
    <html>
    <head>
      <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <script type="text/javascript">
      document.onkeydown = KeyCode;
      cnt = 100000;
      id = '-';
      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.Dog.style.left= x;
        document.Dog.style.top= y;
        cnt--;
        if (cnt<0)
        {   cnt = 250;
            str= "rpg_abc.php?id=" + id + "&x=" + x + "&y=" + y;
            window.alert(str);
            location.href = str;
        }
      }
      function Set(pid, pcnt, px, py)
      { id = pid;
        cnt = pcnt;
        x = px;
        y = py;
        setid = setInterval('moveImage()', 25);
      }
    </script>
    </head>
    
    <body bgcolor="#f4f8ff">
    <h2>rpg.db View ABC</h2>
      <?php
        $id= $_GET['id'];
        $x= $_GET['x'];
        $y= $_GET['y'];
        if (!isset($id))    $id= 'AA';
        if (!isset($y))     $y= 100;
        if (!isset($x))
        {   $x= 200;
            if ($id=='BB')  $x= 300;
            if ($id=='CC')  $x= 400;
        }
    error_log("$id  Recall rpg_abc.php [$x, $y]\n", 3, 'app.log');
        require_once("rpg_class.php");
        $game= new rpg_class();
        $game->draw($id, $x, $y);
        $game->view($id);
        print("<script type='text/javascript'>\n");
        print("var id = '" . $id . "';\n");
        print("Set(id, 250, $x, $y)");
        print("</script>\n");
      ?>
    </body>
    </html>
    
  3. function KeyCode() では、上下左右のキーを判定して座標(x, y)を更新します。
    JavaScript はマウスやキーボードの操作を検出してリアルタイムに処理するのに適しています。
    これに対して、PHP はサーバーサイドで複数ユーザーの管理や情報の交換などを担当します。
  4. moveImage() では Dog の画像を x, y の座標に移動します。
    cnt をカウントダウンして、0以下になれば "rpg_abc.php" を呼び直します。
    複数のアバターが操作されている時は、このタイミングでDBを更新して描画します。
      function moveImage()
      { document.Dog.style.left= x;
        document.Dog.style.top= y;
        cnt--;
        if (cnt<0)
        {   cnt = 250;
            str= "rpg_abc.php?id=" + id + "&x=" + x + "&y=" + y;
            window.alert(str);
            location.href = str;
        }
      }
    
  5. パラメータで渡された $id, $x, $y を取得します。
    これらのパラメータは moveImage() から呼び直されたときに、ゲームのセマンテックを保つために必要です。
        $id= $_GET['id'];
        $x= $_GET['x'];
        $y= $_GET['y'];
        if (!isset($id))    $id= 'AA';
        if (!isset($y))     $y= 100;
        if (!isset($x))
        {   $x= 200;
            if ($id=='BB')  $x= 300;
            if ($id=='CC')  $x= 400;
        }
    
  6. $game= new rpg_class(); で rpg_class を生成します。
    draw($id, $x, $y); 関数で矢印キーで操作中のアバターを描画します。
    view($id) 関数で rpg.db に登録された $id 以外の画像を描画します。
    rpg_class の説明は RPG Class を参照して下さい。
        require_once("rpg_class.php");
        $game= new rpg_class();
        $game->draw($id, $x, $y);
        $game->view($id);
    
  7. JavaScript の Set(id, 250, $x, $y) 関数を呼び出します。
    250 は次に "rpg_abc.php" が呼び直される間隔です。
        print("<script type='text/javascript'>\n");
        print("var id = '" . $id . "';\n");
        print("Set(id, 250, $x, $y)");
        print("</script>\n");
    
  8. Set(pid, pcnt, px, py) 関数では PHP から渡された $id, $x, $y を JavaScript の変数に設定します。
    setInterval で 25 ミリ秒ごとに moveImage() を呼び出します。
      function Set(pid, pcnt, px, py)
      { id = pid;
        cnt = pcnt;
        x = px;
        y = py;
        setid = setInterval('moveImage()', 25);
      }
    

[Next Chapter ↓] RPG Game α版
[Previous Chapter ↑] RPG Class

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