第5回 javascriptでキャラクター画像を動かす その2

前回の続き。

二つのファイルをまとめたものを書いていく。

b.html


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>画像の移動</title>
</head>
<body>

<table border="1">
<tr><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td></tr>
</table>

<div id="ch">
<img src="./1.jpg">
</div>

<script type="text/javascript" src="./b.js"></script>
</body>
</html>

<style>
img{
width:100px;
}
#ch{
top:10px;
left:10px;
position:absolute;
}

table{
border-collapse: collapse;
}
td{
width:100px;
height:100px;
}
</style>

HTMLファイルでは


#ch{
	top:10px;
	left:10px;
	position:absolute;
}

という部分を変更した。

topとleftが0だと、初期画像位置がマス目とずれてしまうからである。この値は、設定している画像によって多少変化するだろう。適切な値を設定してほしい。

b.js



document.onkeydown=kdown;	//キーが押されたらdown関数を実行
document.onkeyup=kup;		//キーが話されたらup関数を実行

var x=10;	//画像のx座標
var y=10;	//画像のy座標
var move=103	//移動量

//押されたキーによってこの値が1になったり0になったりする
var left=0;
var up=0;
var right=0;
var down=0;

function kdown(e)
{
	//押されたキーの判別
	if(e.keyCode==37)
	{
		 left=1;
	}
	if(e.keyCode==38)
	{
		up=1;
	}
	if(e.keyCode==39)
	{
		right=1;
	}
	if(e.keyCode==40)
 	{
		down=1;
	}
	
	//x軸,y軸の更新
	if(left==1)
	{
		x=x-move;
	}
	if(right==1)
	{
		x=x+move;
	}
	if(up==1)
	{
		y=y-move;
	}
	if(down==1)
	{
		y=y+move;
	}

	//実際の移動
	document.getElementById("ch").style.left=x+"px";
	document.getElementById("ch").style.top=y+"px";
}

function kup(e)
{
	if(e.keyCode==37)
	{
		 left=0;
	}
	if(e.keyCode==38)
	{
		up=0;
	}
	if(e.keyCode==39) 
	{
		right=0;
	}
	if(e.keyCode==40)
 	{
		down=0;
	}
}

javascriptファイルで変更した部分は、



var x=10;	//画像のx座標
var y=10;	//画像のy座標
var move=103	//移動量

という部分だ。

xとyの値はHTMLファイルで先ほど設定した値と同じにする必要がある。jsプログラムとHTMLの座標でずれがあるといけないからだ。

それと1回に動く移動量が103なのは、これも画像によって多少の変化があるだろう。視覚的にちょうどいい移動量を設定してほしい。

マスを制限する

このままだと、右を押しっぱなしにすると4×4を通り過ぎて、場外へ画像が動いてしまう。それを防ぐためにif文で条件分岐する必要がある。

b.htmlを変更する必要はない。

b.js



document.onkeydown=kdown;	//キーが押されたらdown関数を実行
document.onkeyup=kup;		//キーが話されたらup関数を実行

var x=10;	//画像のx座標
var y=10;	//画像のy座標
var move=103	//移動量

//押されたキーによってこの値が1になったり0になったりする
var left=0;
var up=0;
var right=0;
var down=0;

function kdown(e)
{
	//押されたキーの判別
	if(e.keyCode==37)
	{
		 left=1;
	}
	if(e.keyCode==38)
	{
		up=1;
	}
	if(e.keyCode==39)
	{
		right=1;
	}
	if(e.keyCode==40)
 	{
		down=1;
	}
	
	//x軸,y軸の更新
	if(left==1)
	{
		x=x-move;
	}
	if(right==1)
	{
		x=x+move;
	}
	if(up==1)
	{
		y=y-move;
	}
	if(down==1)
	{
		y=y+move;
	}
	

	//移動できないマスを判断
	if(x<10 || x>410)
	{
		if(left==1)
		{
			x=x+move;
		}
		if(right==1)
		{
			x=x-move;
		}
	}
	if(y<10 || y>410)
	{
		if(up==1)
		{
			y=y+move;
		}
		if(down==1)
		{
			y=y-move;
		}
	}

	//実際の移動
	document.getElementById("ch").style.left=x+"px";
	document.getElementById("ch").style.top=y+"px";
}

function kup(e)
{
	if(e.keyCode==37)
	{
		 left=0;
	}
	if(e.keyCode==38)
	{
		up=0;
	}
	if(e.keyCode==39) 
	{
		right=0;
	}
	if(e.keyCode==40)
 	{
		down=0;
	}
}

追加した部分はここだ。


	//移動できないマスを判断
	if(x<10 || x>410)
	{
		if(left==1)
		{
			x=x+move;
		}
		if(right==1)
		{
			x=x-move;
		}
	}
	if(y<10 || y>410)
	{
		if(up==1)
		{
			y=y+move;
		}
		if(down==1)
		{
			y=y-move;
		}
	}

x軸が10pxより小さいとき、410pxより大きいとき、y軸が10pxより小さいとき、410pxより大きいときに移動できないようにする必要がある。

if文の(x<10 || x>410)を見てほしい、これは「xが10より小さく、または410より大きいとき」という意味だ。||は「または」を意味する。

その時に、leftのフラグがたっていたら、moveをプラスしてx軸の値をもとに戻し、rightのフラグがたっていたらmoveをマイナスしてx軸の値をもとに戻す。y軸も考え方は同じだ。

まとめ

実際はこのマスが4×4ではなく、もっと細かく設定されている。

さらに、キャラクターを表示する場合は歩くような動作を表現する必要もある。その場合は数秒おきに画像を更新し続けるという作業も必要となる。これらは少し難しいので、もう少し後に説明することにする。