思いつきで行動することがよくある阿部洋太郎です、おこんばんわ-。さて、先日ふと「富士山すごろく、作ってみようかなー」と思いつきました。
①マス目の数を決める。
すごろくと言えばマス目、ということで五合目のスタートから山頂のゴールまでを20マスに分けました。

②マス目の数だけ”投稿ページ”を作る。
『サイコロを振る→1~6の数字がランダムで出る→出た数だけ進んだページに飛ぶ』とできるように、マス目ページを20個作りました。
③Javascriptで「サイコロ」のプログラムを作る。
必要な動作は次の4つ。
・ボタンを押す。
・1~6の数字がランダムで決まる。
・「○マス進む」と表示する。
・○マス先のマス目ページに移動する。
ということで、ネットで参考になりそうなソースを調べながら下記のようなプログラムを作りました。
<input type=”button” value=”サイコロを振る” onclick=”saikoro()”>
<script type=”text/javascript”>
function saikoro() {
rand = Math.floor(Math.random()*6+1);
if (rand == 1) {
alert(‘| ○ |’+’ 1マス進む’);
location.href = “https://feeltherain.net/2020/09/22/f2/” ;}
if (rand == 2) {
alert(‘|●●|’+’ 2マス進む’);
location.href = “https://feeltherain.net/2020/09/22/f3/” ;}
if (rand == 3) {
alert(‘|●●●|’+’ 3マス進む’);
location.href = “https://feeltherain.net/2020/09/22/f4/” ;}
if (rand == 4) {
alert(‘|::|’+’ 4マス進む’);
location.href = “https://feeltherain.net/2020/09/22/f5/” ;}
if (rand == 5) {
alert(‘|:・:|’+’ 5マス進む’);
location.href = “https://feeltherain.net/2020/09/22/f6/” ;}
if (rand == 6) {
alert(‘|:::|’+’ 6マス進む’);
location.href = “https://feeltherain.net/2020/09/22/f7/” ;}
}
</script>
カスタムHTMLブロックにプログラムを書き込んで投稿すると問題なく動きました。
「サイコロの目」のアスキーアートは不評
| ○ | |●●| |●●●| |::| |:・:| |:::|
・・・自分ではなかなかいいと思ったのですが、奥様に聞いたら「え?あれサイコロの目やったん?」と言われてしまいましたorz すごろく自体は好評だったので、とりあえずは良しとします。
できあがった『すごろく』はコチラ。
【初心者向け】吉田ルート版
【難しい】富士宮ルート版
コメント