RPG Alpha版

3体のアバターが操作出来るだけなので RPG Alpha 版とは言い難いのですが、当初の目的は達成です。

AA, BB, CC で Login すると矢印キーでアバターを操作することが出来ます。
また同時に Login すると各自のアバターを操作することが出来ます。
Login AA
Login BB
Login CC

プログラムの説明

  1. クライアント側だけで事足りる場合は PHP よりも JavaScript の方が適しています。
    アバターの操作や背景の描画は JavaScript も合わせて参照して下さい。
    RPG ゲームで使用する Object Class(class rpg_class) は RPG Class を参照して下さい。
    rpg_class.php と rpg_alpha.php を utf-8 でタイプしてアップロードして下さい。
  2. RPG Alpha 版(rpg_alpha.php) です。
    <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)
        {   clearInterval(setid);
            str= "rpg_alpha.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 Alpha</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;
        }
        require_once("rpg_class.php");
        $game= new rpg_class();
        $game->put($id, $x, $y);
        $game->dbcheck();
        $game->draw($id, $x, $y);
        $game->view($id);
        print("<script type='text/javascript'>\n");
        print("var id = '" . $id . "';\n");
        print("Set(id, 100, $x, $y)");
        print("</script>\n");
      ?>
    </body>
    </html>
    
  3. rpg_alpha.php の説明です。
    JavaScript で矢印キーを検出してアバターに見立てた GIF 画像を移動します。
    キー操作で画像を移動するプログラムは キーで画像を移動 を参照して下さい。
  4. Set() 関数から setInterval で 25 ミリ秒ごとに moveImage() を呼び出してキーの操作で移動します。
      function Set(pid, pcnt, px, py)
      { id = pid;
        cnt = pcnt;
        x = px;
        y = py;
        setid = setInterval('moveImage()', 25);
      }
    
  5. moveImage() では x, y の座標に画像を移動します。
    cnt をカウントダウンして、0以下になれば "rpg_alpha.php" を呼び直します。
    複数のアバターが操作されている時は、このタイミングでDBを更新します。
      function moveImage()
      { document.Dog.style.left= x;
        document.Dog.style.top= y;
        cnt--;
        if (cnt<0)
        {   clearInterval(setid);
            str= "rpg_alpha.php?id=" + id + "&x=" + x + "&y=" + y;
            //window.alert(str);
            location.href = str;
        }
      }
    
  6. "rpg_alpha.php" の呼び出しで渡されたパラメータ $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;
        }
    
  7. $game= new rpg_class(); で rpg_class を生成します。
    put($id, $x, $y); 関数で操作中のアバターの座標を記録します。
    同時に3体が操作されているときには、それぞれのプログラムで座標が更新されます。
    draw($id, $x, $y); 関数で矢印キーで操作中のアバターを描画します。
    view($id) 関数で rpg.db に登録された $id 以外の画像を描画します。
    このタイミングで、参加者全員のアバターの座標が移動します。
    ゲームの実行には直接関係しませんが、$game->dbcheck(); でデータベースを確認しています。
        require_once("rpg_class.php");
        $game= new rpg_class();
        $game->put($id, $x, $y);
        $game->dbcheck();
        $game->draw($id, $x, $y);
        $game->view($id);
    
  8. JavaScript の Set(id, 100, $x, $y) 関数を呼び出します。
    100 は次に "rpg_abc.php" が呼び直される間隔です。
    この値を小さくすると自分以外のアバターの反応が速くなるのですが、サーバーの負担が増えます。
        print("<script type='text/javascript'>\n");
        print("var id = '" . $id . "';\n");
        print("Set(id, 100, $x, $y)");
        print("</script>\n");
    
  9. 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);
      }
    
  10. 背景画像は「超初心者のプログラム入門(JavaScript)」を参照して下さい。
    JavaScript では、背景画像(BG Map)に属性を設定してキャラクターを動かす方法も説明しています。

[Previous Chapter ↑] アバターをキーで操作

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