| マス目をタップしたらイベント内容を表示 |
| マスの内容を通知する処理 |
サンプル
 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();
flgTap=0;
return;
}
else if (index >= stopIndex)
{
clearInterval(intervalId);
mapMessage();
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 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:
text ="ゴール";
break;
}
return text;
}
このサンプルでのイベント表示は2箇所で実行しています。| (1)mapMessage |
| サイコロを振って、ひよこが止まったメッセージを表示 |
function mapMessage()
{
const obj = document.getElementById("msg");
obj.innerText=msg(index);
}
| (2)displayMsg |
| すごろくのマス目をタップしたときにメッセージを表示 ※ボタンイベント |
function displayMsg(index)
{
alert(msg(index));
}
上記(1)と(2)の共通に使用しているイベントが下記のメソッドです。
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:
text ="ゴール";
break;
}
return text;
}
ひよこが動く座標配列の個数分だけ、マス目ごとのイベントを表記しています。[謝辞]
「イラスト：農民イラスト」さんの画像を使用させていただいております。ありがとうございます。
| [URL]イラスト：農民イラスト | |
| URL[https://nawmin.stores.jp][クリックすると開きます]) |
戻る