| キャラ移動による画面切り替え |
| 移動による画面を切り替える例 |
サンプル
 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
ひよこが移動することにより、マップを切り替えるサンプルです。
[HTML]
[CSS]
copy
.container{
position: sticky;
}
.layer{
width: 250px;
height: 250px;
position: absolute;
}
.layer1{
top: 0px;
left: 0px;
z-index:1;
}
.layer2{
top: 0px;
left: 0px;
}
.layer3{
top: 250px;
left: 0px;
width: 100px;
height: 30px;
z-index:2;
}
.layer4{
top: 250px;
left: 150px;
width: 100px;
height: 30px;
z-index:2;
}
[javascript]copy
//マップ座標
const aryX=[200,200,200,200,200,150,100, 50, 0, 200,150,100, 50, 0, 0, 0, 0, 50,100,150,200,200, 0, 50,100,100,100];
const aryY=[0 , 50,100,150,200,200,200,200,200, 200,200,200,200,200,150,100, 50, 50, 50, 50, 50,100, 100,100,100, 50, 0];
let index = 0;
let x=0;
let y=0;
mapA();
//ひよこの位置
chickPosition();
//map A
function mapA()
{
hiddenAllMap();
displayMap(0,8);
displayMap(22,26);
}
//map B
function mapB()
{
hiddenAllMap();
displayMap(9,21);
}
//ひよこの位置
function chickPosition()
{
const chick = document.getElementById("chick");
chick.style.left = aryX[index] +'px';
chick.style.top = aryY[index] +'px';
}
//マップ表示
function displayMap(startIndex,endIndex)
{
for(i=startIndex; i <= endIndex; i++)
{
const map = document.getElementById("map"+i);
map.style.visibility = "visible";
map.style.left = aryX[i] +'px';
map.style.top = aryY[i] +'px';
}
}
//マップ非表示
function hiddenAllMap()
{
for(i=0; i < aryX.length; i++)
{
const map = document.getElementById("map"+i);
map.style.visibility = "hidden";
}
}
const b1 = document.getElementById("b1");
b1.addEventListener("click", () =>
{
moveChick(1);
});
const b2 = document.getElementById("b2");
b2.addEventListener("click", () =>
{
moveChick(-1);
});
//ひよこ移動
function moveChick(direction)
{
index += direction;
if(index >= aryX.length)
{
index = aryX.length - 1;
}
if(index<0)
{
index =0;
}
switch(index)
{
case 8:
case 22:
mapA();
break;
case 9:
case 21:
mapB();
break;
}
chickPosition();
}
[画面切り替え処理]
switch(index)
{
case 8:
case 22:
mapA();
break;
case 9:
case 21:
mapB();
break;
}
例えばマップAの画面のマス目「8」から「9」に切り替わるとき
画面がマップBに切り替わる処理を入れています。
マップBの画面のマス目「21」から「22」に切り替わるとき
画面がマップAに切り替わる処理を入れています。
マップの表示を一度クリアしてから
指定したマップの情報のみ表示しています。
[マップの表示を一度クリア]
function hiddenAllMap()
{
for(i=0; i < aryX.length; i++)
{
const map = document.getElementById("map"+i);
map.style.visibility = "hidden";
}
}
map.style.visibility = "hidden";
「style.visibility」に「hidden」を設定することでマップのdivタグを非表示にしています。[指定したマップの情報を表示]
function displayMap(startIndex,endIndex)
{
for(i=startIndex; i <= endIndex; i++)
{
const map = document.getElementById("map"+i);
map.style.visibility = "visible";
map.style.left = aryX[i] +'px';
map.style.top = aryY[i] +'px';
}
}
map.style.visibility = "visible";
「style.visibility」に「visible」を設定することでマップのdivタグを表示状態にします。map.style.left = aryX[i] +'px';
map.style.top = aryY[i] +'px';
divタグを座標を指定して移動することで表示します。map.style.top = aryY[i] +'px';
[謝辞]
「イラスト：農民イラスト」さんの画像を使用させていただいております。ありがとうございます。
| [URL]イラスト：農民イラスト | |
| URL[https://nawmin.stores.jp][クリックすると開きます]) |
戻る