このページを見ているあなたはきっと
自分が作った暗記カードをもっとリッチな感じにしたい。
と思っていますね。
16回までの授業では少し難しい内容となりますが、
余裕がある方は挑戦して見てください。
このページの内容を全部こなすと、次のようなゲームになります。
ぜひ挑戦してみてください
16回までで作成できる暗記カードの完成形は次のものです。
これを下のように変更していきます。
追加した機能は次の通りです。
- キャラクターのセリフを吹き出しに入れる
- 正解、不正解の文字を装飾する。
- キャラクタを動かす
- 正解、不正解時に音をだす。
まずは1番目の吹き出しから行っていきます。
今回は吹き出しをCSSで作成します。
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
/*キャラクターのコメントの吹き出し化*/ .balloon { float: left; border-left: 5px solid black; border-top: 10px solid transparent; background-color:white; margin-left:10%; margin-top:-15px; padding:0px; } /*吹き出しの中身*/ .balloon .body { float: left; margin-left: -20px; background: white; border: 2px solid black; border-radius:10px; padding:10px; } |
HTML
|
1 2 3 4 5 |
<span class="balloon"> <span class="body"> 吹き出しの中身 </span> </span> |
表示結果
吹き出しが表示されます。
吹き出しが表示される理由はborder(境界線)の挙動にあります。
borderの端は斜めに表示されます。
次のサンプルを見てください。
CSS
|
1 2 3 4 5 6 7 |
.border_test { border-top: 25px solid gray; border-left: 25px solid black; background-color:white; height:50px; width:20px; } |
HTML
|
1 2 |
<div class="border_test"> </div> |
divの上の境界線をグレーで、左の境界線を黒で引いています。
結果は次のようになります。
topの境界線とleftの境界線の境目が斜めになっています。
cssでこのdivの高さを50pxと指定しましたが、今度はcssで高さ
と幅を0pxにします。
こうなります。
これで灰色を透明にすれば上むきの黒い吹き出しの尻尾ができます。
黒を透明にした場合は下向きの尻尾ができますね。
透明にする場合はcssで『transparent』と記述します。
吹き出しは完成したので、キャラクタのメッセージを吹き出し内に
表示するようにします。これまではspanにid『result』を割り当てて
そこに入力していました。
今回は先ほどの吹き出しの中身span.bodyの中に入れたいので。
idをresultとします。この手順を行うとidがresultの要素が複数で来てしまうので
以前作成したspanの方は削除するようにしてください。
|
1 2 3 4 5 |
<span class="balloon"> <span id="result" class="body"> 吹き出しの中身 </span> </span> |
表示してみます。
吹き出しの内容がないので、枠だけ出てしまっていますね。
初期表示と『次の問題』ボタンが押された場合は吹き出しを非表示に
しましょう。
初期表示に非表示にする。
|
1 2 3 4 5 |
//画面読み込み時の処理 $(window).on('load',function(){ $('#next_question').trigger('click'); $('.balloon').hide(); }); |
『次の問題』を押された場合に吹き出しを非表示にする
|
1 2 3 4 5 |
//次の問題ボタンの処理 $(document).on('click', '#next_question', function(){ ~~~省略~~~ $('.balloon').hide(); }); |
理解できましたか？上と合わせて、
『回答』ボタンを押した場合（キャラクタの文字を表示する）には
吹き出しをshow()で表示するようにしてください。
こんな感じになります。
これで吹き出しの処理は完了です。
正解、不正解時の文字の修飾
正解、不正解時の文字の大きさや色を変えてみましょう。
考え方は単純です。
1.CSSに正解した場合と、不正解の時のセレクタを追加
2.正解、不正解時のスタイルをCSSに追加
3.jQueryを使って、正解した場合は吹き出しの中の要素に
正解のセレクタを追加、不正解の場合は不正解のセレクタを
追加すれば良いです。
まずはセレクタの追加です。
|
1 2 3 4 5 |
.correct{ } .miss{ } |
正解、不正解のスタイルを書いていきます。
|
1 2 3 4 5 6 7 8 9 10 11 |
.correct{ color:red; font-weight:bold; font-size:20%; } .miss{ color:blue; font-weight:bold; font-size:20%; } |
正解、不正解時にクラスがなければ追加するようにします。
逆に『次の問題』時にはクラスを削除します。
クラスの削除は次の一行で実現できます。
|
1 |
removeClass('削除するクラス名') |
クラスの追加は次の一文です。
|
1 |
addClass('追加するクラス名') |
では、この２つの文を利用して、正解と不正解時に
クラスの追加削除を行ってみてください。
うまくプログラムがかけると次のように表示されます。
キャラクタを動かす
少し難しいです。
CSSでキャラクターの動きをアニメーションにすることができます。
アニメーションを付ける場合は次のようなCSSを書きます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
@keyframes jump { 0% { transform: scale(1.0, 1.0) translate(0%, 0%); } 15% { transform: scale(1.1, 0.9) translate(0%, 5%); } 30% { transform: scale(1.2, 0.8) translate(0%, 10%); } 40% { transform: scale(1.3, 0.7) translate(0%, 15%); } 50% { transform: scale(1.0, 1.0) translate(0%, 0%); } 60% { transform: scale(0.9, 1.2) translate(0%, -100%); } 75% { transform: scale(0.6, 1.4) translate(0%, -20%); } 85% { transform: scale(1.2, 0.8) translate(0%, 15%); } 100% { transform: scale(1.0, 1.0) translate(0%, 0%); } } .jump { animation-name: jump; animation-duration: 0.7s; } |
『@keyframe』の部分で動きを設定しています。
動きの開始が0%、終了が100%です。
今回はtransformで大きさ(scale)と位置(translate)を指定しています。
scaleとtranslateのかっこの中は左からx座標、y座標を表しています。
上の内容を踏まえてcssを改めてみると、0%から50%まで横に広がりながら
縦に縮んで下に移動していることがわかると思います。
その後、50%~100%まで横幅を縮めて縦に伸び、もどのサイズに戻っていく
様子がイメージできると思います。
この動きを何秒かけて実施するかを指定するのがjumpの部分です。
jumpでは実行したいアニメーションと、何秒かけてアニメーションを実施
するか指定しています。HTMLには、動かしたい要素にjumpを付けることで
アニメーションを行うことができます。
正解した場合はjumpのアクションをするようにjavascriptを変更してみてください。
不正解の場合は震えるような動作にします。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
.hurueru { animation-name: hurueru; animation-duration: 0.7s; } @keyframes hurueru { 0% {transform: translate(0px, 0px) rotateZ(0deg)} 25% {transform: translate(3px, 3px) rotateZ(1deg)} 50% {transform: translate(0px, 3px) rotateZ(0deg)} 75% {transform: translate(3px, 0px) rotateZ(-1deg)} 100% {transform: translate(0px, 0px) rotateZ(0deg)} } |
問題が切り替わった時は、再度アニメーションにクラスが付けられるように
追加したアニメーションのクラスを削除するようにしてください。
正解、不正解の時に音を出す
正解時と不正解時に出す音が必要です。
下のURLからファイルをダウンロードしてください。
correct.mp3が正解時、miss.mp3が不正解時の音です。
以下のURLからダウンロードしてindex.htmlと同じフォルダに
入れておいてください。
処理の内容は以下のように記述します。
HTML
|
1 2 3 |
<audio id="correct_sound" preload="auto"> <source src="correct.mp3" type="audio/mp3"> </audio> |
音を再生する場合は次のように記述します。
javascript
|
1 |
$( '#correct_sound' ).get(0).play() |
idが『correct_sound』の中の0番目の要素を再生してくださいということです。
上のjavascriptを正解時の処理に入れてやれば正解と同時に音が出力されます。
実際に試してみてください。
不正解の場合は新しいaudioタグを作成して同じように
sourceにファイル名を記述して、jqueryで0番目を取得して再生してあげれば
再生されるので試してみてください。
アドバンスバージョンはここまでですが、
正解数に合わせて問題の背景色を変えたり、ゲームオーバの時の
サウンド追加等色々できることがまだまだあるので、
もっと楽しいゲームを自分なりに作成してみてください！
