JavaScriptでおみくじアプリをつくります。
やるなら1月1日にやれ！
はい、分かっています。
はじめに超簡単なおみくじをつくる
おみくじアプリはJavaScriptの学習ネタのなかでも定番中の定番です。それではやってみましょう。
おみくじの上下関係
ところで大吉が一番よいのは疑いようがないのですが、吉と中吉、小吉、末吉の上下関係はどうなっているのでしょうか？ これは神社によってさまざまで吉は「中吉より上」とか「小吉より下」などいろいろなルール（？）があります。正月からこんなことでもめたくないので「吉」はなしにして[‘大吉’, ‘中吉’, ‘小吉’, ‘末吉’, ‘凶’]とします。
最初は超基本の部分からはじめます。ボタンをクリックしたら[‘大吉’, ‘中吉’, ‘小吉’, ‘末吉’, ‘凶’]のなかからランダムに選んで結果を表示するだけです。レイアウトとかビジュアルとか一切考えていません。
[‘大吉’, ‘中吉’, ‘小吉’, ‘末吉’, ‘凶’]と要素が5つあるので0～4までの整数の乱数を生成して結果を表示させています。
これだけでは味気ないので次はもうちょっとデザイン性のあるものをつくります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>鳩でもわかる シンプルなおみくじ</title> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> #container { margin: 30px; } </style> </head> <body> <div id="container"> <button id="button" type="button" onclick="Run()">おみくじを引く</button> <div id="ret"></div> </div> <script> let rets = ['大吉', '中吉', '小吉', '末吉', '凶']; function Run(){ let r = Math.random(); // 0 以上 1 未満 r = r * rets.length; // 0 以上 5 未満 r = Math.floor(r); // 小数点以下を切り捨てることで 0～4の整数の乱数が得られる let ret = rets[r]; document.getElementById('ret').innerText = ret; } </script> </body> </html> |
箱からおみくじが飛び出させるには
文字だけでは味気ないので次はデザイン性も考えます。おみくじの箱のなかからおみくじが飛び出してきて結果が表示されるようにつくりかえます。あと結果が表示されたときに効果音もならします。
素材はここから拝借しました。これを加工して箱とおみくじに分割します。
おみくじイラスト – No: 23385904／無料イラストなら「イラストAC」
絶対配置にして箱とおみくじの表示座標を好きなように変更できるようにします。最初はおみくじは箱の後ろに隠れていてみえません。
HTML部分
index.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>鳩でもわかる おみくじ</title> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> #box { position: absolute; top: 50px; left: 200px; z-index: 10; } #button { position: absolute; top: 370px; left: 200px; width:150px; } #dai,#chu,#shou,#sue,#kyou { position: absolute; top: 50px; left: 225px; z-index: 1; } </style> <link rel="apple-touch-icon" href="https://lets-csharp.com/wp-content/themes/cool_black/images/apple-touch-icon.png"> <link rel="apple-touch-icon-precomposed" href="https://lets-csharp.com/wp-content/themes/cool_black/images/apple-touch-icon.png"> <link rel="icon" href="https://lets-csharp.com/wp-content/themes/cool_black/images/apple-touch-icon.png"> <link rel="shortcut icon" type="image/x-icon" href="https://lets-csharp.com/wp-content/themes/cool_black/favicon.ico"> </head> <body> <div id = "box"><img src="box.png" alt="" width="150" /></div> <div id = "dai"><img src="dai.png" alt="" width="100" /></div> <div id = "chu"><img src="chu.png" alt="" width="100" /></div> <div id = "shou"><img src="shou.png" alt="" width="100" /></div> <div id = "sue"><img src="sue.png" alt="" width="100" /></div> <div id = "kyou"><img src="kyou.png" alt="" width="100" /></div> <button id="button" type="button" onclick="Run()">おみくじを引く</button> <script src="app.js"></script> </body> </html> |
JavaScript部分
JavaScript部分を示します。
最初は最初はおみくじは箱の後ろに隠れていてみないのですが、ボタンをクリックすると乱数で選ばれたおみくじのひとつが上に移動して見えるようになります。ある程度上まで移動したら下に移動させます。
下に移動させるタイミングでz-indexを変更して箱よりもおみくじが手前に表示させるようにします。これでおみくじが箱のなかから飛び出したように見せかけます。おみくじの動作が停止したら効果音として太鼓の音をならします。
app.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 |
let sound = new Audio('sound.mp3'); let box = document.getElementById('box'); let dai = document.getElementById('dai'); let chu = document.getElementById('chu'); let shou = document.getElementById('shou'); let sue = document.getElementById('sue'); let kyou = document.getElementById('kyou'); let rets = [dai, chu, shou, sue, kyou]; let retPosY = 50; let isUp = true; let ret = null; let timerId = 0; function Run(){ retPosY = 50; isUp = true; // 2回目以降の処理 // すでに表示されているおみくじを初期の状態に戻す // また立て続けにボタンが押された場合は現在動作しているタイマーを止める if(ret != null){ clearInterval(timerId); ret.style.zIndex = 1; ret.style.top = `${retPosY}px`; } let r = Math.floor(Math.random() * rets.length); // 0～4の整数の乱数を生成 ret = rets[r]; // タイマーでおみくじのY座標を変化させる // 箱からとびだしたおみくじの座標が120より大きくなったらタイマー停止してこれ以上動かないようにするとともに // 効果音を鳴らす timerId = setInterval(() => { if(retPosY > 120){ clearInterval(timerId); sound.currentTime = 0; sound.play(); return; } // 最初はおみくじを上へ移動するがY座標が-250以下になったら下へ移動させる // このときz-indexを変更して箱よりも手前に見えるようにする if(isUp && retPosY < -250) { ret.style.zIndex = 20; isUp = false; } if(isUp) retPosY -= 16; else retPosY += 16; ret.style.top = `${retPosY}px`; }, 30); } |
