RPG Gama

RPG(Role-playing game) に挑戦します。

キャラクターを操作

キーでキャラクターを操作(rpg_key.html)

【rpg_key.html のソースコード】

<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="javascript.css" type="text/css">
<title>Image KeyMove</title>
<script>
document.onkeydown = KeyCode;
  x=300;
  y=200;
  ary = new Array("anime_1.gif", "anime_2.gif", "anime2.gif");
  num = 0;
  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;
      case 0x0d:    //GIF Chenge
          num= (num+1)%3;
          document.Enemy.src= ary[num];
          break;

    }          
  }
  function moveImage()
  {
    document.Enemy.style.left= x;
    document.Enemy.style.top= y;
  }
</script>
</head>

<body onLoad="setInterval('moveImage()',25)">
<h1>矢印キーで画像を移動</h1>

<img src="anime_1.gif" name="Enemy"
  style="position:absolute;left:300px;top:200px;">

</body>
</html>

body の onLoad で setInterval を設定して 25 ミリ秒ごとに moveImage() を呼び出します。
<body onLoad="setInterval('moveImage()',25)">

moveImage() では Enemy.style.left= x; Enemy.style.top= y; の座標に画像を移動します。

  function moveImage()
  {
    document.Enemy.style.left= x;
    document.Enemy.style.top= y;
  }

画像は img タグで name="Enemy" と style で座標を設定して anime1.gif を描画しています。
Animation GIF の画像を使うと、アニメーションしながら移動します。
<img src="anime_1.gif" name="Enemy" style="position:absolute;left:300px;top:200px;">
document.onkeydown = KeyCode; でキーが押されると KeyCode 関数が呼ばれます。
Enter キーで画像を切り変える領域です。
ary = new Array(...) が切り替える画像で、num が現在描画中の画像です。
"anime_1.gif" と "anime_2.gif" はよく似ていますが、右手を上げるところが違います。
ary = new Array("anime_1.gif", "anime_2.gif", "anime2.gif"); num = 0;

function KeyCode() では、上下左右のキーを判定して x=300; y=200; を更新します。
kcode の取得はブラウザによって異なり、なるべく多くのブラウザに対応しています。

  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;
      case 0x0d:    //GIF Chenge
          num= (num+1)%3;
          document.Enemy.src= ary[num];
          break;
    }          
  }

キャラクターは歩いたり、走ったり、ジャンプしたりします。
その場面に合ったアニメーション GIF を作成して、画像を切り替えて下さい。

進行方向で画像を切り替える(walk.html)

【walk.html のソースコード】

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="javascript.css" type="text/css">
<title>Walk</title>
<script type="text/javascript">
<!--
document.onkeydown = KeyCode;
  x=200;    //X座標
  y=100;    //Y座標
  dir=0;    //進行方向
  chg=0;    //画像の切り替え
  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;
          dir= 6;
          break;
      case 0x26:    //↑
          if (y>1)  y-= 2;
          dir= 0;
          break;
      case 0x27:    //→
          x+= 2;
          dir= 2;
          break;
      case 0x28:    //↓
          y+= 2;
          dir= 4;
          break;
    }          
  }
  function walk()
  {
    chg= (chg+1)%16;
    var n= dir+Math.floor(chg/8);
    document.char.src= images[n].src;
    document.char.style.left= x;
    document.char.style.top= y;
  }
  function preload()
  {
    imgnum = 8;     //画像の枚数
    images = new Array();
    for(i=0; i<imgnum; i++)
    { images[i] = new Image();
      images[i].src = "chr47_"+i+".gif";
    }
    setInterval('walk()',50);
  }  
// -->
</script>
</head>

<body onLoad="preload()">

<h1>矢印キーでキャクターが歩く</h1>
<img src="chr47_0.gif" name="char"
  style="position:absolute;left:300px;top:200px;">

</body>
</html>

body から onLoad で preload() 関数を呼び出します。
preload() 関数では "chr47_0.gif" ～ "chr47_7.gif" の Image をプリロードします。
ロードが終わると setInterval('walk()',50); で 50 ミリ秒ごとに walk() 関数を呼び出します。

<body onLoad="preload()">

  function preload()
  {
    imgnum = 8;     //画像の枚数
    images = new Array();
    for(i=0; i<imgnum; i++)
    { images[i] = new Image();
      images[i].src = "chr47_"+i+".gif";
    }
    setInterval('walk()',50);
  }

walk() 関数では進行方向によって二枚の画像を交互に切り替えます。
dir が進行方向で、chg が二枚の画像を切り替える領域で、x,y が画像の座標です。
今回は二枚の画像を切り替えていますが、滑らかな動きにするには枚数を増やして下さい。

  x=200;    //X座標
  y=100;    //Y座標
  dir=0;    //進行方向
  chg=0;    //画像の切り替え

  function walk()
  {
    chg= (chg+1)%2;
    var n= dir+chg;
    document.char.src= images[n].src;
    document.char.style.left= x;
    document.char.style.top= y;
  }

KeyCode() 関数でキーの押し下げを検出して座標を移動します。
document.onkeydown = KeyCode; function KeyCode() { ・・・ }

背景(BG)を描画

一般的な背景の描画は Back Image を参照して下さい。

Game Map-1(game_map1.html)

ダウンロードサイトから提供している Map Editor を使ってゲームの背景に使用する大きな画像を作成します。
Map Editor を起動して gamemap.map を開いて下さい。
「ファイル／JavaData作成」を選ぶと gamemap.css と gamemap.js が保存されます。
上の画像(maps.png)を 16*16 で切り分けて、背景画像を作成したファイルです。
背景画像は、セルを横方向に６４個, 縦方向に３２個並べた 1024×512 ピクセルのサイズです。
Shift_JIS でも動きますが、今回は utf-8 に統一します。

このプログラムでは、次のファイルを使用しています。

ファイル名	説明
game_map1.html	BG MAP を描画するプログラム
gamemap.css	マップチップの分割情報が定義された CSS ファイル
gamemap.js	BG の並び情報が定義された JavaScript ファイル
maps.png	背景画像を構成するマップチップ画像ファイル

gamemap.css に書かれている maps.png が大文字のときは小文字に修正して下さい。
サーバー上ではファイル名を小文字に統一しています。
gamemap.js からタイトルを表示している次の行を削除して下さい。
document.write('<div class="info">BG(Back Ground) Map<br></div>');

CSS で大きな背景画像を表示する【game_map1.html(Game Map-1)】の全ソースコードです。
gamemap.css と gamemap.js と maps.png を同じフォルダーに格納して下さい。
gamemap.css と gamemap.js を使うとプログラムは簡単です。

<html>
<head>
  <meta http-equiv="Content-Script-Type" content="text/javascript" charset="utf-8">
  <link rel="stylesheet" href="gamemap.css" type="text/css">
</head>

<body>
<script src="gamemap.js"></script>
</body>
</html>

Game Map-2(game_map2.html)

Game Map-1 で作成したマップ上でアニメーションGIF のキャラクターを動かします。
次のファイルを game_map2.html と同じフォルダーに格納して下さい。

ファイル名	説明
game_map2.html	マップ上でキャラクターを動かすプログラム
gamemap.css	マップチップの分割情報が定義された CSS ファイル
gamemap.js	BG の並び情報が定義された JavaScript ファイル
maps.png	背景画像を構成するマップチップ画像ファイル
anime1.gif	矢印キーで操作するキャラクター画像

マップ上でキャラクターを動かすプログラム【game_map2.html(Game Map-2)】のソースコードは実行画面から右クリックで表示されます。
画像の移動やキーで移動を参考にして下さい。
<body> の onLoad で setInterval を設定して 25 ミリ秒ごとに moveImage() を呼び出します。
<body bgcolor="#f4f8ff" onLoad="setInterval('moveImage()',25)">
moveImage() では document.Dog.style.left= x; document.Dog.style.top= y; の座標に画像を移動します。
画像は img タグで name="Dog" と style で座標を設定して anime1.gif を描画しています。
<img src="anime1.gif" name="Dog" style="position:absolute;left:300px;top:200px;">
document.onkeydown = KeyCode; でキーが押されると KeyCode 関数が呼ばれます。
function KeyCode() では、上下左右のキーを判定して x=300; y=200; を更新します。
document.onkeydown = KeyCode; x= 300; y= 200; function KeyCode() { ・・・ }

BG Wall(bg_wall.html)

Game Map-1 で作成したマップからはみ出さないようにキャラクターを動かします。
Game Map-2 ではアニメーションGIF を使いましたが、今回は進行方向に合わせて２枚の画像を切り替えながらアニメーションします。
次のファイルを bg_wall.html と同じフォルダーに格納して下さい。

ファイル名	説明
bg_wall.html	マップ上でキャラクターを動かすプログラム
gamemap.css	マップチップの分割情報が定義された背景画像の CSS ファイル
gamemap.js	BG の並び情報が定義された背景画像の JavaScript ファイル
maps.png	背景画像を構成するマップチップ画像ファイル
chr47_0.gif～chr47_7.gif	矢印キーで操作するキャラクター画像ファイル

マップからキャラクターがはみださないように動かすプログラム【bg_wall.html(BG Wall)】のソースコードは実行画面から右クリックで表示されます。

キャラクター画像も Map Editor を使って CSS で切り分ける方法もあるのですが、背景に CSS を使っているので両方リンクすると定義が重複します。
そこでキャラクターの描画は chr47.gif を８枚の画像に切り分けた chr47_0.gif～chr47_7.gif を使うことにします。
詳細は Animation から Walk Animation を参照して下さい。
背景画像の表示は簡単で "gamemap.css" をリンクして "gamemap.js" で描画するだけです。
<link rel="stylesheet" href="gamemap.css" type="text/css"> <script src="gamemap.js"></script>
Game Map-2 では背景画像の範囲を超えてキャラクターが動き回りましたが、今回は背景画像の周辺に壁を用意して超えられないようにします。
かっこ良く言いましたが、左と上は元々超えられないので、実質的には右と下の移動を制限するだけです。 (^_^;)
背景画像のサイズは 1024×512 なので、その手前で止めます。
case 0x27: //→ if (x<1000) x+= 2; dir= 2; break; case 0x28: //↓ if (y<484) y+= 2; dir= 4; break;

BG Map 上を歩く(map_walk.html)

ＲＰＧゲームなどでは、マップチップ(背景を構成する画像)に属性を待たせて、キャラクターを制御します。
今回は「通過できるセル/通過できないセル」を設定してキャラクターを動かします。
【map_walk.html(BG Map 上を歩く)】のソースコードは、実行画面からマウスの右クリックで表示されます。

属性はマップチップに格納されているセルの画像に対して与えます。
このプログラムで使用したマップチップの画像(maps.png)は 256*384 ピクセルで、16*16 のセルが１６列２４行で構成されています。
マップチップに属性を設定する att.js ファイルです。
0 が通過できるセルで、0 以外が通過できないセルです。画像と見比べて下さい。
【att.js】

var att = [
0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
1, 1, 1, 1, 2, 2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
1, 1, 1, 1, 2, 2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
1, 1, 1, 1, 0, 0, 1, 1, 1, 1, 3, 3, 1, 1, 1, 1,
1, 1, 1, 1, 0, 0, 1, 1, 1, 1, 3, 3, 1, 1, 1, 1,
1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 3, 3, 1, 1, 1, 1,
1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 3, 3, 1, 1, 1, 1,
1, 1, 1, 1, 0, 0, 1, 1, 0, 0, 3, 3, 1, 1, 1, 1,
1, 1, 1, 1, 0, 0, 1, 1, 0, 0, 3, 3, 1, 1, 1, 1,
1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 1, 1, 0, 0,
1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 1, 1, 0, 0,
1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0,
1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0,
1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
]

"gamemap.css" をリンクして src で "att.js" を指定して下さい。

<link rel="stylesheet" href="gamemap.css" type="text/css">
<script src="att.js" type="text/javascript"></script>

KeyCode() 関数では、進行方向の属性を調べてキャラクターを動かします。
get_att() 関数のリターン値が 0 のとき通行可能です。

  function KeyCode()
  {   ・
      ・
      ・
    xw = x;
    yw = y;
    switch(kcode)
    {    
      case 0x25:    //←
          if (xw>1) xw-= 2;
          dir= 6;
          break;
           ・
           ・
           ・
    }
    if (get_att()==0)
    {   x = xw;
        y = yw;
    }
  }

セルの属性を調べる get_att() 関数です。
(yw+12) の 12 は小数点以下を切り捨てるので、その調整です。
map[] 配列は "gamemap.js" で定義されているセルの並び情報です。
function get_att() { ywk = Math.floor((yw+12)/16); xwk = Math.floor((xw+12)/16); ps = map[ywk*64+xwk]; return att[ps]; }

BG Map で制御(map_ctrl.html)

BG(Back Ground)で作成した画像を背景に、ゲームをコントロールします。
RPG ゲームなどでは、マップチップ(背景を構成する画像)に属性を待たせて、キャラクターを制御します。
属性はゲームに合わせて、例えば次のように様々に設定します。
- キャラクタが通過できるセル
- キャラクタが通過できないセル
- ジャンプすれば飛び越えられるセル
- ジャンプすれば上に乗れるセル
- アイテムが隠されているセル
- アイテムを持っていれば通過できるセル
- 落ちればゲームが終了するセル
- イベントが発生するセル
- 別の画面に続くセル
- その他ゲーム毎に様々な設定が考えられます
今回はキャラクターが「通れる/通れない」に加えて「アイテムの取得と宝物の箱」をプログラムしてみます。
att.js で定義されている 2 と 3 がその属性です。
【map_ctrl.html(BG Map で制御)】のソースコードは、実行画面からマウスの右クリックで確認することが出来ます。

鍵の取得フラグを定義して 2 のセルに出会うと、alert("鍵を拾った！") を表示して 1 に設定します。
井戸をのぞくと鍵を拾うことができ、鍵を持って宝箱に近づくと宝が手に入ります。
フラグが 1 のとき 3 のセルに出会うと、alert("宝物を手に入れた！"); を表示して 2 に設定します。
フラグを 2 に設定するのは、宝物を取得すると 2 や 3 のセルを無効にするためです。

  flg=0;    //鍵のフラグ
  function KeyCode()
  {   ・
      ・
      ・
    switch(get_att())
    { 
      case 2:
          if (flg==0)
          {   window.alert("鍵を拾った！");
              flg = 1;
          }
          break;
      case 3:
          if (flg==1)
          {   window.alert("宝物を手に入れた！");
              flg = 2;
          }
          break;
      case 0:
          x = xw;
          y = yw;
          break;
    }

前田稔の超初心者のプログラム入門
 超初心者のプログラム入門(JavaScript)