| イベントの画像とメッセージを表示 |
| イベントに一致する画像とメッセージを表示 |
サンプル
 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
| メッセージ |
[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: 50px;
height: 50px;
z-index:2;
}
.layer4{
top: 250px;
left: 100px;
width: 150px;
height: 30px;
z-index:2;
}
[javascript]
copy
//マップ座標
const aryX=[200,200,150,100,100,50,0,0,0,0,0,50,100,100,150,200,200];
const aryY=[0,50,50,50,0,0,0,50,100,150,200,200,200,150,150,150,200];
let index = 0;
let x=0;
let y=0;
let flgTap=0;
displayMap();
chickPosition();
//マップ表示
function displayMap()
{
for(i=0; i < aryX.length; i++)
{
//jp
//map
const map = document.getElementById("map"+i);
map.style.left = aryX[i] +'px';
map.style.top = aryY[i] +'px';
//button
const btn = document.getElementById("btn"+i);
btn.style.left = aryX[i] +'px';
btn.style.top = aryY[i] +'px';
}
}
//ひよこの位置
function chickPosition()
{
//jp
const chick = document.getElementById("chick");
chick.style.left = aryX[index] +'px';
chick.style.top = aryY[index] +'px';
}
//サイコロの目を取得
function dice()
{
const start = 1;
const end = 6;
//指定の範囲の整数を返します
return Math.floor(Math.random() * (end - start + 1)) + start;
}
//サイコロを表示
function displayDice(number)
{
//サイコロの画像は準備してください
let file = "";
switch(number)
{
case 1:
file = "dice1.png";
break;
case 2:
file = "dice2.png";
break;
case 3:
file = "dice3.png";
break;
case 4:
file = "dice4.png";
break;
case 5:
file = "dice5.png";
break;
case 6:
file = "dice6.png";
break;
}
const img = document.getElementById("dice");
img.src = img;
}
//ひよこの場所変更
function moveChick()
{
//ひよこ
const obj = document.getElementById("chick");
obj.style.left = aryX[index] +'px';
obj.style.top = aryY[index] +'px';
}
function walkChick(number)
{
let stopIndex = index + number;
const intervalId = setInterval(() =>
{
// 止める条件
if (index >= aryX.length)
{
clearInterval(intervalId);
judgeEnd();
mapMessage();
displayEventImage();
flgTap=0;
return;
}
else if (index >= stopIndex)
{
clearInterval(intervalId);
mapMessage();
displayEventImage();
flgTap=0;
return;
}
index++;
moveChick();
}, 1000);
}
function judgeEnd()
{
//ボタンを非表示にします。
const b1 = document.getElementById("b1");
b1.style.visibility="hidden";
//ゴールのメッセージを表示します。
alert("ゴールしました。");
}
const b1 = document.getElementById("b1");
b1.addEventListener("click", () =>
{
if(flgTap==1)
{
return;
}
flgTap=1;
//サイコロの目を取得
let number = dice();
//サイコロを表示
displayDice(number);
walkChick(number);
});
const btn0 = document.getElementById("btn0");
btn0.addEventListener("click", () =>
{
displayMsg(0);
});
const btn1 = document.getElementById("btn1");
btn1.addEventListener("click", () =>
{
displayMsg(1);
});
const btn2 = document.getElementById("btn2");
btn2.addEventListener("click", () =>
{
displayMsg(2);
});
const btn3 = document.getElementById("btn3");
btn3.addEventListener("click", () =>
{
displayMsg(3);
});
const btn4 = document.getElementById("btn4");
btn4.addEventListener("click", () =>
{
displayMsg(4);
});
const btn5 = document.getElementById("btn5");
btn5.addEventListener("click", () =>
{
displayMsg(5);
});
const btn6 = document.getElementById("btn6");
btn6.addEventListener("click", () =>
{
displayMsg(6);
});
const btn7 = document.getElementById("btn7");
btn7.addEventListener("click", () =>
{
displayMsg(7);
});
const btn8 = document.getElementById("btn8");
btn8.addEventListener("click", () =>
{
displayMsg(8);
});
const btn9 = document.getElementById("btn9");
btn9.addEventListener("click", () =>
{
displayMsg(9);
});
const btn10 = document.getElementById("btn10");
btn10.addEventListener("click", () =>
{
displayMsg(10);
});
const btn11 = document.getElementById("btn11");
btn11.addEventListener("click", () =>
{
displayMsg(11);
});
const btn12 = document.getElementById("btn12");
btn12.addEventListener("click", () =>
{
displayMsg(12);
});
const btn13 = document.getElementById("btn13");
btn13.addEventListener("click", () =>
{
displayMsg(13);
});
const btn14 = document.getElementById("btn14");
btn14.addEventListener("click", () =>
{
displayMsg(14);
});
const btn15 = document.getElementById("btn15");
btn15.addEventListener("click", () =>
{
displayMsg(15);
});
const btn16 = document.getElementById("btn16");
btn16.addEventListener("click", () =>
{
displayMsg(16);
});
function mapMessage()
{
const obj = document.getElementById("msg");
obj.innerText=msg(index);
}
function displayEventImage()
{
let image = displayUseImage();
const obj = document.getElementById("event");
obj.src=image;
}
function displayUseImage()
{
let image = "";
switch(index)
{
case 0:
image = "noimage";
break;
case 1:
image = "nawmin_sample8";
break;
case 2:
image = "nawmin_sample13";
break;
case 3:
image = "nawmin_sample15";
break;
case 4:
image = "nawmin_sample14";
break;
case 5:
image = "nawmin_sample17";
break;
case 6:
image = "nawmin_sample8";
break;
case 7:
image = "nawmin_sample2";
break;
case 8:
image = "nawmin_sample16";
break;
case 9:
image = "nawmin_sample2";
break;
case 10:
image = "nawmin_sample15";
break;
case 11:
image = "nawmin_sample13";
break;
case 12:
image = "nawmin_sample3";
break;
case 13:
image = "nawmin_sample4";
break;
case 14:
image = "nawmin_sample14";
break;
case 15:
image = "nawmin_sample16";
break;
case 16:
default:
image = "noimage";
break;
}
return image+".png";
}
function displayMsg(index)
{
alert(msg(index));
}
function msg(index)
{
let text ="";
switch(index)
{
case 0:
text ="スタート";
break;
case 1:
text ="大豆をみつけた";
break;
case 2:
text ="ネコがいた";
break;
case 3:
text ="桃をゲット";
break;
case 4:
text ="タカが狙ってる";
break;
case 5:
text ="ミミズをみつけた";
break;
case 6:
text ="大豆をみつけた";
break;
case 7:
text ="くまがいた";
break;
case 8:
text ="バッタをみつけた";
break;
case 9:
text ="くまがいた";
break;
case 10:
text ="桃をゲット";
break;
case 11:
text ="ネコがいた";
break;
case 12:
text ="どんぐりをみつけた";
break;
case 13:
text ="農家の人がエサをくれた";
break;
case 14:
text ="タカが狙ってる";
break;
case 15:
text ="バッタをみつけた";
break;
case 16:
default:
text ="ゴール";
break;
}
return text;
}
サイコロを振ってひよこが止まったらメッセージの他に画像を表示するサンプルです。そのためひよこが止まるイベントで画像を表示させるメソッドを実行します。
画像を表示させるメソッドは「displayEventImage()」です。
function walkChick(number)
{
let stopIndex = index + number;
const intervalId = setInterval(() =>
{
// 止める条件
if (index >= aryX.length)
{
clearInterval(intervalId);
judgeEnd();
mapMessage();
displayEventImage();
flgTap=0;
return;
}
else if (index >= stopIndex)
{
clearInterval(intervalId);
mapMessage();
displayEventImage();
flgTap=0;
return;
}
index++;
moveChick();
}, 1000);
}
「displayUseImage()」メソッドでマスのインデックスに一致する画像名を返します。画像のsrcプロパティに取得した画像を設定します。
function displayEventImage()
{
let image = displayUseImage();
const obj = document.getElementById("event");
obj.src=image;
}
function displayUseImage()
{
let image = "";
switch(index)
{
case 0:
image = "noimage";
break;
case 1:
image = "nawmin_sample8";
break;
case 2:
image = "nawmin_sample13";
break;
case 3:
image = "nawmin_sample15";
break;
case 4:
image = "nawmin_sample14";
break;
case 5:
image = "nawmin_sample17";
break;
case 6:
image = "nawmin_sample8";
break;
case 7:
image = "nawmin_sample2";
break;
case 8:
image = "nawmin_sample16";
break;
case 9:
image = "nawmin_sample2";
break;
case 10:
image = "nawmin_sample15";
break;
case 11:
image = "nawmin_sample13";
break;
case 12:
image = "nawmin_sample3";
break;
case 13:
image = "nawmin_sample4";
break;
case 14:
image = "nawmin_sample14";
break;
case 15:
image = "nawmin_sample16";
break;
case 16:
default:
image = "noimage";
break;
}
return image+".png";
}
[謝辞]
「イラスト：農民イラスト」さんの画像を使用させていただいております。ありがとうございます。
| [URL]イラスト：農民イラスト | |
| URL[https://nawmin.stores.jp][クリックすると開きます]) |
戻る