HTMLとJavaScriptで簡単なおみくじを実装してみた
そろそろWeb系の技術を本腰入れて勉強したくなってきたので、Web勉強記を書き残すことにした。今回は簡単なHTMLとJavaScriptで、Webおみくじをつくってみた。HTMLのコードは以下の通り。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <link rel = "stylesheet" href = "omikuji_element.css"/> | |
| <script> | |
| function tryFortune() { | |
| var resultInt = Math.floor(Math.random () * 7) | |
| switch (resultInt) { | |
| case 0 : resultText = "大凶"; break; | |
| case 1 : resultText = "凶"; break; | |
| case 2 : resultText = "末吉"; break; | |
| case 3 : resultText = "小吉"; break; | |
| case 4 : resultText = "中吉"; break; | |
| case 5 : resultText = "吉"; break; | |
| default : resultText = "大吉"; break; | |
| } | |
| document.getElementById("result").textContent = resultText; | |
| } | |
| </script> | |
| </head> | |
| <body> | |
| <h1>HTMLとJavaScriptによるWebおみくじ</h1> | |
| <button class = "button_omikuji" onclick="tryFortune()">おみくじを引く</button> | |
| <p id = "result"></p> | |
| </body> | |
| </html> |
ポイントしては、7種類の結果を表示したかったので、疑似乱数を発生させてランダムに結果が変わるようにした。
Math.random()は0～1までの浮動小数点の擬似乱数を返す関数なので、まずはこれに7をかけて、0～7の範囲の浮動小数をつくる。Math.floor()関数は、引数として与えた数以下の最大の整数を返す関数なので、0～7以下の浮動小数の乱数を整数に変換している。
最後にswitch、case文で、疑似乱数に対応したおみくじの結果をresultに入れ、これをボタンクリック時にtryFortune関数を実行することでおみくじの結果が表示される。
実行結果
本当は作成したhtmlファイルをサーバーに上げて実行できるようにしたいのだが、それはまた今度やろうと思う。今回は実行結果の様子だけ画像で張っておく。 ボタンをクリックすると、おみくじの結果が表示される。
参考書籍
今はこの本を読みながらHTML、CSS、JavaScriptの勉強してます。書籍のコードをなぞるだけだと面白味が無いしブログにものっけられないので、今回の記事のように本で勉強したことをもとに何かつくり、コードを公開していくスタイルで日記を書いていくつもり。最終的にはWebブラウザ上で動くゲームをつくって公開したい。
 |
ゲームを作りながら楽しく学べるHTML5 CSS JavaScriptプログラミング［改訂版］ (Future Coders（NextPublishing）) |
+1
