概要

YouTubeにてJavaScriptを学んだ際に作成したクイズゲームです。

オリジナルはBootstrapのデザインを使用した簡素なものでした。

そのままではただ動画を観て写経しただけになってしまうので、自分なりの工夫を凝らしたいと考えました。その結果、キャラクターの動作を追加することを思いつき、正解・不正解に応じてキャラクターが喜んだり悲しんだりする動きを加えました。

setAttributeで画像を指定し、if構文の条件分岐によって出しわけています。このキャラクターの部分は自分で分岐条件を考え記述しました。最初は不正解なのにキャラクターが喜んでしまったり、全問正解なのに悲しんでしまったりと実装に苦労した点もありましたが、最終的にはうまくいきました。

また、デザインも自分で考えたものに変更しています。ボタンを大きめにして押しやすくしたり、HTML版とCSS版の各クイズへの扉ページを作成したりしました。そして言うまでもありませんが、レスポンシブにも対応済みです。

制作時間

約12.5時間
※デザイン思案の時間含む