前回まででJavaScriptの基礎を簡単にまとめました。これでJavaScriptによるDOMの操作はなんとなく分かってきたかと思います。
※JavaScriptの基礎～サイドメニューの作成まではこちらでまとめています。↓
今回は、それを応用して簡単なゲームを作成してみようかと思います。
タイトルの通り、「おみくじ」を作成してみます。
完成形は下記のような感じで、クリックすればおみくじが揺れて、その後に中からおみくじの結果がにゅっと出てくるようなやつを作ります。
ファイル構成はいつもと同じです。cssとjsはそれぞれのディレクトリの中に作成していきます。
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>おみくじ</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div id="box">恋<br>み<br>く<br>じ<br><div id="box2" class="kuji"></div><br></div> <script src="js/main.js"></script> </body> </html> |
head内の説明は割愛します。
bodyタグ内に、おみくじの要素を記述します。
おみくじの外側になる要素と、おみくじの中身の要素（表示位置を調整するために子要素にする）2つの要素をdivで作り、それぞれidを付けておきます。
くじがにょっと出てくる要素には、classをふっておきます。javascriptのイベント処理で、classを変更させるためです。
外側になる要素には、縦方向に”おみくじ”と表示させたいので、一文字づつ改行して文字を記述します。
CSS
|
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 |
#box { width:100px; height: 400px; background: skyblue; cursor: pointer; position: relative; left: 40%; top: 200px; text-align: center; font-size: 40px; font-weight: bold; padding-top: 50px; } .kuji { position: absolute; left: 10%; bottom: 100%; width: 80px; height: 0; background: orange; overflow: hidden; font-size: 24px; font-weight: bold; color: red; text-align: center; } .kuji2 { height: 100px; transition: 0.5s; } .omi { animation: omi 3s; } @keyframes omi { 20% { transform: rotate(10deg); } 40% { transform: rotate(-10deg); } 60% { transform: rotate(10deg); } 80% { transform: rotate(-10deg); } 100% { transform: rotate(0deg); } } .omi:hover { opacity: 0.8; } |
#boxはおみくじの外箱になるので、大きさ、表示位置(relative)、フォントの調整などを記述しています。
.kujiには遅れて出てくるくじの結果となる情報を記述しています。position:absolute;でbottomを100％とし、親要素#boxのtopに配置します。height:0;は、close状態を再現するためです。
.kuji2はイベント処理でにょきっと表示させるためのclassです。transitionでぬるっとした表現をつけています。
.omiには、animationをつけています。つまり、omi classが付いた場合には、omiという名前のanimationが3秒間実行されます。角度を10度、－10度動かす記述をいれています。
animationの内容は、@keyframesに記述します。
今回の場合だと、animationにomiという名前を付けているので、@keyframes omi とする事で.omiで実行されるanimationを設定できます。
3秒を5分割し、20％毎（0.6s）に角度を10度～－10度動かす動作を記述しています。
JavaScript
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
"use strict"; { const box = document.getElementById("box"); const box2= document.getElementById("box2"); const kuji = () => {box2.classList.add("kuji2")}; const kiti = ["キライ！", "普通！", "抱いて♡"]; box.addEventListener("click", () => { if(box.className === "") { box.classList.add("omi"); let n = Math.floor(Math.random() * 3); box2.textContent = kiti[n]; setTimeout(kuji, 3000); } else { box.classList.remove("omi"); box2.classList.remove("kuji2"); } }); } |
定数に各IDと、box2のIDにkuji2 classを追加する関数、くじの結果となる配列を代入します。
イベント処理は、box ID(おみくじの箱)をクリックすれば、if文の分岐に入る関数処理とします。
box IDのclassが空白（付いていない）なら真の処理、boxにomi classを追加します。つまり、前途したcssのanimationが3s実行されます。
続いて、変数nに、0～2のランダムな整数値を代入します。
その後、box2のテキストに、配列のn番目が反映されるようにします。
最後に、3秒のanimationが実効されたあとにくじが出る動作を表現したいので、指定した時間のインターバルを設けるsetTimeoutを使います。
カッコ内は、第一引数に関数処理、第二引数に時間(ms)を記述します。
つまり、今回の場合だと、クリックしたら左右に揺れるアニメーションが3秒動作し、３秒後にくじが出る動作が起こるようになります。
偽の処理は、すでにくじが出ている状態を表しているので、それにリセットをかける意味で追加したclassを削除しています。
