Javascript MEMO

自動で動かしたときのキャラの向き

キャラを動かしたときのキャラの向きを変更

サンプル

let index = 0;
//ひよこの歩く判定のため追加
const aryX=[150,100,100,150,150,150,100,100, 50, 50,  0,  0,  0, 50, 50,  0];
const aryY=[  0,  0, 50, 50,100,150,150,100,100,150,150,100, 50, 50,  0,  0];
//ひよこの初期位置
moveChick();
const b1 = document.getElementById("btn1");
b1.addEventListener("click", () => 
{
	//ひよこを進める
	walkChick();
});
const b2 = document.getElementById("btn2");
b2.addEventListener("click", () => 
{
	//リセット
	chickReset();
});
function walkChick()
{
	const intervalId = setInterval(() => 
	{
		// 止める条件
		if (index >= aryX.length) 
		{
			clearInterval(intervalId);
			judgeEnd();
			return;
		}
		
		index++;
		moveChick();
	}, 1000);
}
function judgeEnd()
{
	//ボタンを非表示にします。
	const b1 = document.getElementById("btn1");
	b1.style.visibility="hidden";
	//ゴールのメッセージを表示します。
	alert("ゴールしました。");
}
//ひよこの場所変更
function moveChick()
{
	//ひよこ
	const obj = document.getElementById("hiyoko");
	obj.style.left = aryX[index] +'px';
	obj.style.top = aryY[index] +'px';
	const img = document.getElementById("img");
	img.src = chickDirection();
}
//パスを返す処理
function chickDirection()
{
	let path = "";//パスを指定してください ex.) img/
	let up = "nawmin_sample10.png";
	let left = "nawmin_sample6.png";
	let right = "nawmin_sample9.png";
	if(index==0)
	{
		return path + up;
	}
	if(aryX[index] < aryX[index-1])
	{
		return path + left;
	}
	else if(aryX[index] > aryX[index-1])
	{
		return path + right;
	}
	else
	{
		return path + up;
	}
}
//リセット
function chickReset()
{
	index = 0;
	//ひよこの歩く判定のため追加
	moveChick();
	const b1 = document.getElementById("btn1");
	b1.style.visibility="visible";
}

function chickDirection()

画像の向きの判定は、この処理では前回の座標との比較によって決定しています。
ひよこの移動処理はaryXおよびaryY配列の座標をインデックス0の次から順番に移動することを仕様としています。
現在の座標は「index」変数に格納されています。
前回の座標は「index - 1」となります。

方向	判定方法
左	aryXの座標が小さいケース (例) if(aryX[index] < aryX[index - 1])
右	aryXの座標が小さいケース (例) if(aryX[index] > aryX[index - 1])
上下	else

本来の上向きは
if(aryY[index] < aryY[index - 1])
本来の下向きは
if(aryY[index] > aryY[index - 1])
となります。

[謝辞]

「イラスト：農民イラスト」さんの画像を使用させていただいております。
ありがとうございます。

[URL]イラスト：農民イラスト
URL[https://nawmin.stores.jp][クリックすると開きます])

戻る

back

Character direction when moving automatically

Change the character's orientation when moving the character

sample

copy

let index = 0;
//Added for chick walking detection
const aryX=[150,100,100,150,150,150,100,100, 50, 50,  0,  0,  0, 50, 50,  0];
const aryY=[  0,  0, 50, 50,100,150,150,100,100,150,150,100, 50, 50,  0,  0];
//Chick's initial position
moveChick();
const b1 = document.getElementById("btn1");
b1.addEventListener("click", () => 
{
	//Advance the chick
	walkChick();
});
const b2 = document.getElementById("btn2");
b2.addEventListener("click", () => 
{
	//reset
	chickReset();
});
function walkChick()
{
	const intervalId = setInterval(() => 
	{
		//Stop conditions
		if (index >= aryX.length) 
		{
			clearInterval(intervalId);
			judgeEnd(lang);
			return;
		}
		
		index++;
		moveChick();
	}, 1000);
}
function judgeEnd(lng)
{
	//Hide the button.
	const b1 = document.getElementById("btn1");
	b1.style.visibility="hidden";
	//Displays the goal message.
	alert("reached the goal.");
}
//Change chick location
function moveChick()
{
	//chick
	const obj = document.getElementById("hiyoko");
	obj.style.left = aryX[index] +'px';
	obj.style.top = aryY[index] +'px';
	const img = document.getElementById("img");
	img.src = chickDirection();
}
//Returning the path
function chickDirection()
{
	let path = "";//Please specify the path ex.) img/
	let up = "nawmin_sample10.png";
	let left = "nawmin_sample6.png";
	let right = "nawmin_sample9.png";
	if(index==0)
	{
		return path + up;
	}
	if(aryX[index] < aryX[index-1])
	{
		return path + left;
	}
	else if(aryX[index] > aryX[index-1])
	{
		return path + right;
	}
	else
	{
		return path + up;
	}
}
//reset
function chickReset()
{
	index = 0;
	//Added for chick walking detection
	moveChick();
	const b1 = document.getElementById("btn1");
	b1.style.visibility="visible";
}

function chickDirection()

In this process, the orientation of the image is determined by comparing it with the previous coordinates.
The chick's movement process is designed to move the coordinates of the aryX and aryY arrays in order, starting from index 0.
The current coordinates are stored in the "index" variable.
The previous coordinates are "index - 1".

Direction	Determination method
Left	When aryX coordinates are small (Example) if(aryX[index] < aryX[index - 1])
Right	When aryX coordinates are small (Example) if(aryX[index] > aryX[index - 1])
up and down	else

The original upward direction is
if(aryY[index] < aryY[index - 1])
The original downward direction is
if(aryY[index] > aryY[index - 1])

[Acknowledgements]

images used are from "illustration by nawmin.com"
Thank you very much.

[URL]illustration by nawmin.com
URL[https://nawmin.stores.jp][click to open the homepage])

back