| スコアの更新 |
| サイコロを振って進めたあとのスコア更新 |
サンプル
 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
| はっぴー指数 | 10 |
| メッセージ |
[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");
let text = msg(index);
let num = point(index);
text += "\n" + "point:" + num;
obj.innerText = text;
const score = document.getElementById("score");
score.innerText = Number(score.innerText) + num;
}
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;
}
function point()
{
let value = 0;
switch(index)
{
case 0:
value =0;
break;
case 1:
value =3;
break;
case 2:
value =-5;
break;
case 3:
value =5;
break;
case 4:
value =-7;
break;
case 5:
value =5;
break;
case 6:
value =3;
break;
case 7:
value =-10;
break;
case 8:
value =7;
break;
case 9:
value =-10;
break;
case 10:
value =5;
break;
case 11:
value =-5;
break;
case 12:
value =3;
break;
case 13:
value =10;
break;
case 14:
value =-7;
break;
case 15:
value =7;
break;
case 16:
default:
value =0;
break;
}
return value;
}
「mapMessage();」でサイコロを振って進んだマスのスコアを反映しています。
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);
}
「point」メソッドで進んだマス目のインデックス位置からスコアを取得します。| (1)「score」idの数字 | 今までのスコア |
| (2)今回のスコア | point(index) |
function mapMessage()
{
const obj = document.getElementById("msg");
let text = msg(index);
let num = point(index);
text += "\n" + "point:" + num;
obj.innerText = text;
const score = document.getElementById("score");
score.innerText = Number(score.innerText) + num;
}
サイコロを振って止まったマス目のインデックスに一致するスコアを返します。
function point()
{
let value = 0;
switch(index)
{
case 0:
value =0;
break;
case 1:
value =3;
break;
case 2:
value =-5;
break;
case 3:
value =5;
break;
case 4:
value =-7;
break;
case 5:
value =5;
break;
case 6:
value =3;
break;
case 7:
value =-10;
break;
case 8:
value =7;
break;
case 9:
value =-10;
break;
case 10:
value =5;
break;
case 11:
value =-5;
break;
case 12:
value =3;
break;
case 13:
value =10;
break;
case 14:
value =-7;
break;
case 15:
value =7;
break;
case 16:
default:
value =0;
break;
}
return value;
}
[謝辞]
「イラスト：農民イラスト」さんの画像を使用させていただいております。ありがとうございます。
| [URL]イラスト：農民イラスト | |
| URL[https://nawmin.stores.jp][クリックすると開きます]) |
戻る