JavaScriptを使ったライブラリを使わないRPGの作り方(入門編)2

マップ場でキャラクターを動かす方法

マップでキャラクターが動く原理について説明していきます。

まず動かすために扱うイベントを作成します。

「移動」ということですので矢印キーを使用していこうと思います。

各キーコードについては

// ↑:38
// ←:37
// ↓:40
// →:39

これらの値が格納されています。

ハンドラの種類はonkeydownで行います。

※キー値取得はIEとFirefox郡ブラウザで異なるので注意(最後に処理をまとめる)

Sample1

function move_chara(e){
        switch(e.keyCode){
		case 37://←:こっちに移動する時
			
			if( b == 0){ b++; }
			document.getElementById("chip" + flan_move[a][b-1]).innerHTML = "<img src='" + image_dot[2] + "'>";
			document.getElementById("chip" + flan_move[a][b] ).innerHTML = "<img src='" + image_dot[0] + "'>";
			b--;
			break;

		case 38://↑:こっちに移動する時
			
			if( a == 0){ a++; }
			document.getElementById("chip" + flan_move[a-1][b]).innerHTML = "<img src='" + image_dot[2] + "'>";
			document.getElementById("chip" + flan_move[a][b] ).innerHTML = "<img src='" + image_dot[0] + "'>";
			a--;
			break;

		case 39://→こっちに移動する時
			
			if( b == 7){ b--; }
			document.getElementById("chip" + flan_move[a][b+1]).innerHTML = "<img src='" + image_dot[2] + "'>";
			document.getElementById("chip" + flan_move[a][b] ).innerHTML = "<img src='" + image_dot[0] + "'>";
			b++;
			break;

		case 40://↓こっちに移動する時
			
			if( a == 7){ a--; }
			document.getElementById("chip" + flan_move[a+1][b]).innerHTML = "<img src='" + image_dot[2] + "'>";
			document.getElementById("chip" + flan_move[a][b] ).innerHTML = "<img src='" + image_dot[0] + "'>";
			a++;
			break;

	}



}

document.onkeydown = move_chara;

</script>

まとめて説明していきます。

• document.onkeydown = move_chara;

によってキーを押された時に関数を呼ぶようにします。

そこからmove_charaという名前をつけた関数に同時にキー値も送ります

• IEではevent.keyCode
• Firefox郡ブラウザでは引数に適当な文字を入力しその引数.keyCodeに値が格納されます。

今回は入力されるキーが4つであることからifよりもswitchを使う方を優先します。

caseの中身の処理ですが、配列の中身を交換しています。

8×8のマップを二次元配列でflan_move[a][b]としています。

aは縦軸そしてb軸は横軸となります。

• aを負に→上に移動
• aを正に→下に移動
• bを負に→左に移動
• bを正に→右に移動

キャラクター本体のチップの位置座標を動かして再度innerHTMLで画像を上書きします。

それでこのままでは、元の所にあったキャラクターの画像が残ったままになってしまうため。

移動させるごとにキャラクターの画像が残されてしまうという形になってしまいます。

ですので、元の画像を草原のチップに変えるようにしています。

そしてもう一つてを加えて、端に行ってしまった時に、座標がマイナスになってしまうのを防ぐために

if分を追加しておき、a,b各最大と最小値である0と7の範囲になっていたときそれぞれに適応する値を入れていきます

例)もしa値が0であるならば、1を足しておきます結果的にアルゴリズムはaが1になりますが、後半のデクリメントでまた0になり結果は変わりません = 移動していない状態となる。

実際のソースについてはDemo版から見てください。

これが一番単純なキャラクター移動の原理となります。

Demo

http://yatagarasu0495.web.fc2.com/javascript/blog/map/map02.html