ワードプレスで『すごろく』を作る。

WordPress作成

 思いつきで行動することがよくある阿部洋太郎です、おこんばんわ-。さて、先日ふと「富士山すごろく、作ってみようかなー」と思いつきました。

①:マス目の数を決める。

 すごろくと言えばマス目、ということで五合目のスタートから山頂のゴールまでを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 すごろく自体は好評だったので、とりあえずは良しとします。

できあがった『すごろく』はコチラ。

【シングルプレイ】富士山すごろく(富士宮ルート)【スタート】
function saikoro() { rand = Math.floor(Math.random()*6+1); if (rand == 1) {alert('| ○ |'+' 1マス進む');location.href...
「望んでいること」「現状」「やり方」の3つが明確になると、不安は小さくなる。
 そして、「質問に答える」だけで「望んでいること」「現状」「やり方」の3つは明確にできます。
WordPress作成
スポンサーリンク
阿部洋太郎をフォローする
くすぶっている人に自信を提供する。

コメント