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

解説

少しゲームっぽいことをしよう。

フィールドを作成し、矢印キーで移動できるようにする。

とりあえず、フィールドから先に作成する。

 

フィールド

a.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>

</body>
</html>

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

フィールドにはjavascriptは必要ないのでjsファイルの読み込みはいらない。

新しく出てきたのはtableというタグだ。

表を作りたいときなどに使用する。横を表すのはtr、要素を表すのがtdであるので、この場合は横に4つの要素が並び、さらにそれが4つ下にあるということだ。4×4の並びを想像してほしい。

これをcssで見やすいように拡大している。styleというタグで囲まれた部分を見てほしい。この部分がcssである。HTMLとはまた違っているのでbodyの要素内に書く必要はない。まあ、書いても問題はないが、ここではわかりやすくbodyの下に記述している。

cssに関しはこれ以降の記事で説明するので、ここでは軽く覚える程度でいい。

 


table{
	border-collapse: collapse;
}

というのは表の二重線を解除するという意味だ。よくわからないという人はこの3行を消して、HTMLファイルを開いてみてほしい。二重線の表ができるはずだ。

 


td{
	width:100px;
	height:100px;
}

これはtd要素の横幅(width)と縦幅(height)を100pxしろ、という意味だ。これで見やすい表の完成となる。

 

画像の移動

まずは最初に右に1回押すと10pxずつ進んでいくプログラムを作成する。（押し続けても結果が反映される）

b.html



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

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

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

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

新しく出てきたのはimgというタグだが、これは/imgと最後に書かなくてよい。imgだけで画像を出力するという意味を持つ。srcという要素に相対パスで画像の位置を設定している。動かしたい画像を自分で準備して、わかりやすいフォルダにまとめておくとよいだろう。

もう一つstyleのなかの#chという部分がある。imgというのはimgタグにstyleが適応されているということが雰囲気からわかるだろうが、#chはid要素にかかっている。id要素に直接styleを適応したいときはこのように記述するとよい。

 


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

について詳しく見てみる。top:0px,left:0pxというのはid要素chの位置を上から0px、左から0pxにしろという意味だ。画像が左上ぴったりに配置される。

position:absolute;というのが少し難しい。直訳すると「絶対表示」だが、それだといまいち意味が分からない。分かりやすいように言うと、「周りにとらわれないで自由に移動できる」という感じだろう。

 

つぎにjsファイルの方を見ていく。

b.js



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

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

//押されたキーによってこの値が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;
	}
}

多少長いが一つ一つしっかりと読み解いていけば難しいものではない。

とりあえず発火点をみると


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

という部分だ。

読み込まれているHTMLファイルを開いた状態で、キーを押すとkdown関数が実行され、キーを話すとkup関数が実行される。という意味だ。

次に変数の紹介をする。例によってvarを忘れないようにしてほしい。

 


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

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

x、yという変数は実際の座標を表している。例えばx=10、y=20となると上から10px、左から20pxを表すことになる。もちろんマイナスの値をとる場合もある。

moveというのは1回の実行で動く量である。今は10pxで動くが、ここを変更することで移動量を変更することができる。

left,up,right,downというのはフラグを意味している。ここは1か0の値しか取得しないようにしている。leftが1の時は左が押されたという意味を持ち、upが1の時は上が押されたという意味を持つ。

 

kdown関数


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";
}

何かしらのキーを押すと実行される。その中で十字キーが押されるとif文の中が実行される。左キーが37、上キーが38、右キーが39、下キーは40に対応している。e.keyCodeというのがキーを押すと得られる値となっているため、それと37が対応するということは左を押されたということとなる。

押されたキーが分かったところで次はx軸を更新する。leftの時はx軸がマイナスされ、rightの時はプラスされる。上下も同じだ。

実際にHTMLファイルのid要素chを更新させるにはdocument.getElementById(“ch”).style.left=x軸+”px”;という書き方で変更できる。意味は「読み込んでいるHTMLファイルのchというIDを取得し、そのstyleのleftをx軸pxに変更」だ。ｙ軸も同じである。

kup関数


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;
	}
}

キーを話したときに実行される。フラグをもとに戻して、実行されないようにする関数だ。厳密には実行されないようにするというよりは、次に実行したときに2つ以上のフラグが立たないようにするためだ。

例えば、leftのフラグが1で、次に上を押してupも1にすると二つのフラグがたってしまうこととなる。常にこのプログラム上でも恋愛ゲームでもフラグは1つしかたたないようにしなければならない。

次の記事へ続く

今回はフィールドと画像の移動と二つのプログラムを作成したが、次の記事では二つをプログラムをまとめるということをする。

 

参考サイト

キーボードによる画像の移動