ツクログ

tsukulognet

tsukulognet

道産子。Reactでなまら面白いものを作りたい。

おみくじの作り方

eye catch

JavaScriptで簡単なおみくじを作る方法です。

Demo

START!ボタンを押すとおみくじの結果が表示されます。

HTML

<div id="wrapper"> <h1>おみくじ</h1> <p>おみくじです。スタートボタンをクリックして始めよう!</p> <div id="output"></div> <div id="btn">START!</div> </div> <div id="overlay"></div>

<div id="output"></div>は、おみくじの結果を表示します。

<div id="overlay"></div>は、<div id="output"></div>の背後に表示するオーバーレイです。

CSS

body { background: #F5F5F5; } #wrapper { color: #333; text-align: center; } #btn { background: #F27398; border-radius: 6px; border: none; color: #fff; cursor: pointer; display: inline-block; padding: 20px 60px; text-decoration: none; } #output { background: #fff; border-radius: 10px; color: #333; height: 50vh; line-height: 50vh; overflow: hidden; position: absolute; top: 50%; left: 50%; text-align: center; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 50%; z-index: 1000; } #overlay { background: rgba(0, 0, 0, .7); height: 100%; position: fixed; top: 0; left: 0; width: 100%; z-index: 1; } #output, #overlay { opacity: 0; transition: all 0.5s; visibility: hidden; } #output.fadein, #overlay.fadein { opacity: 1; visibility: visible; }

初期設定として#output#overlayopacity:0;visibility:hidden;を指定して非表示にしています。

#output.fadein#overlay.fadeinは、おみくじの結果をフェードインで表示させるためのクラスであり、後にJavaScriptで追加します。

JavaScript

(function() { var btn = document.getElementById('btn'); var output = document.getElementById('output'); var overlay = document.getElementById('overlay'); btn.addEventListener('click', function() { result(); overlay.classList.add('fadein'); output.classList.add('fadein'); }); overlay.addEventListener('click', function() { output.classList.remove('fadein'); overlay.classList.remove('fadein'); }); function result() { var index = Math.floor(Math.random() * 6); switch (index) { case 0: output.textContent = '大吉です。'; break; case 1: output.textContent = '吉です。'; break; case 2: output.textContent = '中吉です。'; break; case 3: output.textContent = '小吉です。'; break; case 4: output.textContent = '末吉です。'; break; default: output.textContent = '凶です。'; break; } } })();

ポイントは以下の通りです。

おみくじの結果を決める

おみくじの結果はresult()関数で決めます。

function result() { var index = Math.floor(Math.random() * 6); switch (index) { case 0: output.textContent = '大吉です。'; break; case 1: output.textContent = '吉です。'; break; case 2: output.textContent = '中吉です。'; break; case 3: output.textContent = '小吉です。'; break; case 4: output.textContent = '末吉です。'; break; default: output.textContent = '凶です。'; break; } }

result()関数が呼ばれる度にMath.floor(Math.random() * 6)で0~5のランダムな値を1つ取得します。

続けてswitch文で、取得した値indexに対応する結果を#outputに挿入します。値に対応する結果は以下の通りです。

結果
0 大吉
1
2 中吉
3 小吉
4 末吉
5

ボタンを押すとおみくじの結果が表示されるようにする

ボタン#btnを押すと、おみくじの結果が表示されるようにします。

btn.addEventListener('click', function() { result(); overlay.classList.add('fadein'); output.classList.add('fadein'); });

処理の流れは

  1. result()関数でおみくじの結果を決める。
  2. オーバーレイ#overlayと結果#output.fadeinクラスを追加してフェードインさせる。

です。

オーバーレイを押しておみくじを終了する

オーバーレイ#overlayを押すと結果#outputと自身#overlayをフェードアウトさせておみくじを終了します。

overlay.addEventListener('click', function() { output.classList.remove('fadein'); overlay.classList.remove('fadein'); });

おわりに

以上で、JavaScriptによるおみくじの作り方を終わります。