第7回 javascriptでキャラクターをかに歩きさせる

2018/12/8 解説

キャラクターを歩行させるということをするが、右を押したら右を向くということはまだしない。すべて前を向いた状態で移動させる。

かに歩き

a.html


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>coutdown</title>
</head>
<body>

<div id="trim">
<img src="./img/girl.png">
</div>

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

<style>
#trim{
top:10px;
left:10px;
position:absolute;
}
</style>

a.htmlで変化させる部分は、top:10px;left:10px;というところだ。前回のソースコードにこれらを追加してほしい。

a.js


var count=0;
var rect=[0,0,48,-32];	//上右下左の順
var margin=[0,0,0,32];	//上右下左の順

re="rect("+rect[0]+"px,"+rect[1]+"px,"+rect[2]+"px,"+rect[3]+"px)";
document.getElementById("trim").style.clip= re;

setInterval(
function(){

	if(count==4)
	{
		rect[1]=32;
		rect[3]=0;
		margin[3]=0;
		count=0;
	}
	else{
		rect[1]=rect[1]+32;
		rect[3]=rect[3]+32;
		margin[3]=margin[3]-32;
	}
	re="rect("+rect[0]+"px,"+rect[1]+"px,"+rect[2]+"px,"+rect[3]+"px)";
	ma=margin[0]+"px "+margin[1]+"px "+margin[2]+"px "+margin[3]+"px";
	document.getElementById("trim").style.clip= re;
	document.getElementById("trim").style.margin=ma;
	count++;
},500);


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

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

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

function a()
{
	alert(x+"to"+y);
}

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("trim").style.left=x+"px";
	document.getElementById("trim").style.top=y+"px";
}

function kup(e)
{
	console.log(x,y);
	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文で改行していた部分が醜かったので、改行をなくし見やすいようにした。

基本的に、前回と前々回のソースコードを二つつなげただけだが、ちゅいしてほしい部分がいくつかある。一つはIDの名前を変更する必要があるということだ、前々回と比べ、IDの名前はtrimになっている。

今回はこれだけだが、次は右を向くとキャラクターの画像も右を向いている画像へ変化させるということをする。