戻る

画面切り替え
画面を切り替える例

マップ全体例
A
B
C
D

マップ画面切り替えサンプル

A
B
C
D
>
[CSS]
copy
.container{
	position: sticky;
}
.layer{
	width: 200px;
	height: 200px;
	position: absolute;
}
.layer0{
	top: 0px;
	left: 0px;
	width: 200px;
	height: 200px;
}
.layer1{
	top: 0px;
	left: 0px;
	width: 200px;
	height: 200px;
}
.layer2{
	top: 0px;
	left: 0px;
	width: 200px;
	height: 200px;
}
.layer3{
	top: 0px;
	left: 0px;
	width: 200px;
	height: 200px;
}
.layerButton{
	top: 0px;
	left: 0px;
	z-index:1;
}
[javascript]
copy
//画面枠の画面切り替えボタン(上下左右)
const o1 = document.getElementById("left");
const o2 = document.getElementById("right");
const o3 = document.getElementById("top");
const o4 = document.getElementById("down");
//左ボタン
o1.style.left = -25 +'px';
o1.style.top = 75 +'px';
o1.style.width=25+"px";
o1.style.height=50+"px";
//右ボタン
o2.style.left = 200 +'px';
o2.style.top = 75 +'px';
o2.style.width=25+"px";
o2.style.height=50+"px";
//上ボタン
o3.style.left = 75 +'px';
o3.style.top = -25 +'px';
o3.style.width=50+"px";
o3.style.height=25+"px";
//下ボタン
o4.style.left = 75 +'px';
o4.style.top = 200 +'px';
o4.style.width=50+"px";
o4.style.height=25+"px";

//初期段階でA以外を隠す
const m0 = document.getElementById("map0");//A
const m1 = document.getElementById("map1");//B
const m2 = document.getElementById("map2");//C
const m3 = document.getElementById("map3");//D
styleVisibility(m1,1);
styleVisibility(m2,1);
styleVisibility(m3,1);
//エリアの表示・非表示
//o:オブジェクト
//state:style.visibilityに設定する値
//0:visible:表示
//1:hidden:非表示
function styleVisibility(o, state)
{
	o.style.visibility = state == 0 ? "visible" : "hidden";
}
//現在座標位置
let x=0;
let y=0;
o1.addEventListener("click", () => 
{
	//left
	judgeMove(0);
});
o2.addEventListener("click", () => 
{
	//right
	judgeMove(1);
});
o3.addEventListener("click", () => 
{
	//top
	judgeMove(2);
});
o4.addEventListener("click", () => 
{
	//down
	judgeMove(3);
});
function judgeMove(direction)
{
	let result =0;
	//移動判定および座標更新処理
	switch(direction)
	{
		case 0:
			result =judgeMoveLeftRight(-1);
			if(result==0)x--;
			break;
		case 1:
			result =judgeMoveLeftRight(1);
			if(result==0)x++;
			break;
		case 2:
			result =judgeMoveTopDown(-1);
			if(result==0)y--;
			break;
		case 3:
			result =judgeMoveTopDown(1);
			if(result==0)y++;
			break;
	}
	if(result == 1)
	{
		//範囲外のため処理を抜けます。
		alert("選択した方向は範囲外です。");
		return;
	}
	//
	hiddenAllArea();
	displayArea();
}
//すべて(マップ用レイヤー)を非表示にします
function hiddenAllArea()
{
	styleVisibility(m0,1);
	styleVisibility(m1,1);
	styleVisibility(m2,1);
	styleVisibility(m3,1);
}
//座標のレイヤーを表示状態にします
function displayArea()
{
	if(x == 0 && y == 0)
	{
		styleVisibility(m0,0);
	}
	else if(x == 1 && y == 0)
	{
		styleVisibility(m1,0);
	}
	else if(x == 0 && y == 1)
	{
		styleVisibility(m2,0);
	}
	else// if(x == 1 && y == 1)
	{
		styleVisibility(m3,0);
	}
}
//移動判定(左右)
function judgeMoveLeftRight(direction)
{
	let result=0;
	let xx=x;
	xx += direction;
	if(xx < 0)
	{
		return 1;
	}
	if(1 < xx)
	{
		return 1;
	}
	return 0;
}
//移動判定(上下)
function judgeMoveTopDown(direction)
{
	let result=0;
	let yy=y;
	yy += direction;
	if(yy < 0)
	{
		return 1;
	}
	if(1 < yy)
	{
		return 1;
	}
	return 0;
}
レイヤーの表示切り替え
//o:オブジェクト
//state:style.visibilityに設定する値
//0:visible:表示
//1:hidden:非表示
function styleVisibility(o, state)
{
	o.style.visibility = state == 0 ? "visible" : "hidden";
}
style.visibilityを使用して、表示するレイヤーのみvisibleを設定します。
その他のレイヤーはhiddenを設定して非表示にします。

移動処理
[移動処理]
左に移動x座標をマイナス
右に移動x座標をプラス
上に移動y座標をマイナス
下に移動y座標をプラス
[各レイヤーの座標]
Ax0y0
Bx1y0
Cx0y1
Dx1y1
左に移動を例とします。
judgeMoveLeftRight関数で左方向にするためマイナスにします。
現在の座標をマイナスにした結果
0未満になる場合は枠外になるため移動できません。
この結果を受け取り、問題なければx座標を更新しています。
残りの右、上下も判定をします。
結果として移動可能な場合は、見えるレイヤーのみを表示しています。
このサンプルでは
hiddenAllArea関数で一度すべてのレイヤーを非表示にします。
そしてdisplayArea関数で該当レイヤーのみ表示しています。



戻る
back

Screen switching
Example of switching screens

Example of the entire map
A
B
C
D

Map screen switching sample

A
B
C
D
>
[CSS]
copy
.container{
	position: sticky;
}
.layer{
	width: 200px;
	height: 200px;
	position: absolute;
}
.layer0{
	top: 0px;
	left: 0px;
	width: 200px;
	height: 200px;
}
.layer1{
	top: 0px;
	left: 0px;
	width: 200px;
	height: 200px;
}
.layer2{
	top: 0px;
	left: 0px;
	width: 200px;
	height: 200px;
}
.layer3{
	top: 0px;
	left: 0px;
	width: 200px;
	height: 200px;
}
.layerButton{
	top: 0px;
	left: 0px;
	z-index:1;
}
[javascript]
copy
//Screen switching buttons on the screen frame (up, down, left, right)
const o1 = document.getElementById("left");
const o2 = document.getElementById("right");
const o3 = document.getElementById("top");
const o4 = document.getElementById("down");
//Left Button
o1.style.left = -25 +'px';
o1.style.top = 75 +'px';
o1.style.width=25+"px";
o1.style.height=50+"px";
//Right button
o2.style.left = 200 +'px';
o2.style.top = 75 +'px';
o2.style.width=25+"px";
o2.style.height=50+"px";
//Up button
o3.style.left = 75 +'px';
o3.style.top = -25 +'px';
o3.style.width=50+"px";
o3.style.height=25+"px";
//Down button
o4.style.left = 75 +'px';
o4.style.top = 200 +'px';
o4.style.width=50+"px";
o4.style.height=25+"px";

//Hide everything except A in the early stages
const m0 = document.getElementById("map0");//A
const m1 = document.getElementById("map1");//B
const m2 = document.getElementById("map2");//C
const m3 = document.getElementById("map3");//D
styleVisibility(m1,1);
styleVisibility(m2,1);
styleVisibility(m3,1);
//Show/hide area
//o:Object
//state: Value to set in style.visibility
//0:visible:display
//1:hidden:hidden
function styleVisibility(o, state)
{
	o.style.visibility = state == 0 ? "visible" : "hidden";
}
//Current coordinate position
let x=0;
let y=0;
o1.addEventListener("click", () => 
{
	//left
	judgeMove(0);
});
o2.addEventListener("click", () => 
{
	//right
	judgeMove(1);
});
o3.addEventListener("click", () => 
{
	//top
	judgeMove(2);
});
o4.addEventListener("click", () => 
{
	//down
	judgeMove(3);
});
function judgeMove(direction)
{
	let result =0;
	//Movement determination and coordinate update processing
	switch(direction)
	{
		case 0:
			result =judgeMoveLeftRight(-1);
			if(result==0)x--;
			break;
		case 1:
			result =judgeMoveLeftRight(1);
			if(result==0)x++;
			break;
		case 2:
			result =judgeMoveTopDown(-1);
			if(result==0)y--;
			break;
		case 3:
			result =judgeMoveTopDown(1);
			if(result==0)y++;
			break;
	}
	if(result == 1)
	{
		//Processing will be terminated as it is out of range.
		alert("The selected direction is out of range.");
		return;
	}
	//
	hiddenAllArea();
	displayArea();
}
//Hide everything (map layers)
function hiddenAllArea()
{
	styleVisibility(m0,1);
	styleVisibility(m1,1);
	styleVisibility(m2,1);
	styleVisibility(m3,1);
}
//Make the coordinate layer visible
function displayArea()
{
	if(x == 0 && y == 0)
	{
		styleVisibility(m0,0);
	}
	else if(x == 1 && y == 0)
	{
		styleVisibility(m1,0);
	}
	else if(x == 0 && y == 1)
	{
		styleVisibility(m2,0);
	}
	else// if(x == 1 && y == 1)
	{
		styleVisibility(m3,0);
	}
}
//Movement judgment (left and right)
function judgeMoveLeftRight(direction)
{
	let result=0;
	let xx=x;
	xx += direction;
	if(xx < 0)
	{
		return 1;
	}
	if(1 < xx)
	{
		return 1;
	}
	return 0;
}
//Movement judgment (up and down)
function judgeMoveTopDown(direction)
{
	let result=0;
	let yy=y;
	yy += direction;
	if(yy < 0)
	{
		return 1;
	}
	if(1 < yy)
	{
		return 1;
	}
	return 0;
}
Layer visibility toggle
//o: object
//state: value to set in style.visibility
//0: visible: visible
//1: hidden: hidden
function styleVisibility(o, state)
{
	o.style.visibility = state == 0 ? "visible" : "hidden";
}
Use style.visibility to set visible only to the layers you want to show.
Set other layers to hidden to make them invisible.

Movement
[Movement]
Move leftMinus x coordinate
Move rightPlus x coordinate
Move upMinus y coordinate
Move downIncrease y coordinate
[Coordinates of each layer]
Ax0y0
Bx1y0
Cx0y1
Dx1y1
Let's take moving to the left as an example.
The judgeMoveLeftRight function is used to make it negative to move to the left.
The result of making the current coordinate negative
If it is less than 0, it is outside the frame and cannot be moved.
This result is received, and the x coordinate is updated if there is no problem.
The remaining right, up and down are also judged.
If it is possible to move as a result, only visible layers are displayed.
In this sample
All layers are hidden once using the hiddenAllArea function.
Then the displayArea function is used to display only the relevant layer.



back



著作権情報
ホームページおよプリ等に掲載されている情報等については、いかなる保障もいたしません。
ホームページおよびアプリ等を通じて入手したいかなる情報も複製、販売、出版または使用させたり、
または公開したりすることはできません。
当方は、ホームペーよびアプリ利用したいかなる理由によっての障害等が発生しても、
その結果ホームページおよびアプリ等を利用された本人または他の第三者が被った損害について
一切の責任を負わないものとします。