JavaScriptを使った表示切替で指名プログラムを作ろう!!

こんにちは!最近ライターになりつつあるS.K.です。

さて、今回もPythonで作ったプログラムの紹介を!

と思っていたのですが、今回は違う制作物の紹介です。

理由は簡単。うまくいかない…(号泣)

本当は、PythonのフレームワークDjangoを使ったWebページ作成の紹介をしたかったんです!!

参考書まで買ってやる気十分で始めたのですが、うまく動かないんですよ～～～(泣)

かなり悩んだのですが、

人間、諦めが肝心だよね♪

の境地に達しました。

まあ、そんな悲しい話は置いときまして、

今回はHTML、CSS、JavaScriptを使った回答者指名プログラムの紹介です。

箸休め的な感じで見ていただければ。

シメイダー参上!!（回答者指名プログラムの概要）

まずは仕様を簡単に

• 回答者の欄に配列に入れた名前をクリックされたらランダムに表示する。ただし、1周するまで被りはなしとする。
• 「あたり」、「おしい」、「はずれ」のボタンを作り、それぞれのボタンが押されたら画像を表示し、効果音を鳴らす。

とこんな感じです。（実際はもっと細かいですが、自分で工夫してみてくださいね♪）

そして、誕生したのが「指名ダー」です!!

このイラストと効果音が癖になりませんか？

作成時間は30分+αです。イラストと効果音探すのに手間取りました(汗)

表示切替ってどうやるの?回答者が被らないってどうするの？

冒頭で説明したとおり、今回はJavaScriptを使っています。なので、クリックされたら関数が動く[onclick]を使っています。

これを使って、クリックされたらinnerHTMLが動くようにして、HTMLを書き換えて表示を変えています。

回答者は配列に入れているのですが、回答者が被らないようにするにはランダムに要素番号を選ぶのでは厳しいですよね。

なので、今回はページを開いた時点で回答者を入れた配列をシャッフル(配列内をランダムに入れ替え)しています。このようにすることでシャッフル後の配列を0番から読み込んでいけば、回答者の被りがなくなるわけですね。

シャッフルにはいろいろなやり方があるので自分で考えてみると力になりますよ。

ちなみに効果音の再生は、こんな風に書きます。

まとめ

JavaScriptを使った表示切替は[onclick]を使えば簡単にできるので、表現の幅が広がります。

デザイン的にも見栄えが良くなるし、便利でオススメです♪

余談ではありますが、これ作りだしたのが夜中の0時頃で妙なテンションだった記憶があります。

思いついたら作り出すまでいかなくても、書き留めていくと面白いものが作れたりしますよ。

今回は以上です。