ドットインストールとYouTubeでJavaScriptを学習。組み合わせてクイズゲーム作りました。

ドットインストールとYouTubeでJavaScriptを学習しました。

そして、それらを組み合わせてクイズゲームを作りました。

できた時は感動です!

スポンサーリンク

ドットインストールとYouTubeでJavaScriptを学習。

今回学習したのは、

ドットインストールの

  • 詳解JavaScript DOM編(無料動画のみ)
  • はじめてのJavaScript
  • JavaScriptでおみくじを作ろう

いづれも無料動画です。

あとYouTubeのこの動画↓

YouTube動画は4択クイズゲームを作るのですが、とてもわかりやすかった。

ドットインストールも課金はしてないので、全て無料です。

いづれも実際にコードを書いて学習しました。

DOM操作は楽しい。

今回の学習はgetElementByIdなどを使ってHTML CSSを操作する「DOM操作」ってやつです。

プロゲートはやってるとき結構苦痛だったのですが、これはやってて楽しい!

これぞJavaScriptって感じ。

ただ関数の引数にさらに関数が入ったり(コールバック関数)するので、結構難しいです。

プロゲートやってたから理解できましたが、はじめからドットインストールをやるとたぶん理解できないと思います。

やはりプロゲート→ドットインストールの順に学習するのがおすすめです。

classList.add(‘〇〇’)やtextContent=’〇〇’がややこしい。

getElementsById(‘〇〇’)やclassList.add(‘〇〇’)はカッコ「()」なのに、

textContent=’○○’やstyle.background=’○○’はイコール「=」。

まぎらわしいですね。

この違いは何なんだろうと調べたところ、

  • 「()」のやつはメソッド
  • 「=」のやつはプロパティ

だそうです。

プロパティは変数のように「=」で値を変えることができます。

ドットインストールとYouTubeを組み合わせてクイズゲームを作りました。

ドットインストールとYouTube動画を組み合わせてクイズゲームを作りました。

YouTube動画のような4択クイズなのですが、ドットインストールのようにボタンを押すとクルクル回ってスタイルが変化し、中のテキストも「せいかい!」「はずれ」に変わります。

まずはどんなものかご覧ください。その名も「鬼滅の刃クイズ」です!↓

ボタンを押すと、ドットインストールのようにクルクル回ってスタイルが変わり、中のテキストも変わります↓

3秒後に自動的に次の問題に移ります。

間違えると「はずれ」となり、ボタンが少し小さくなります↓

全部終わるとこのようなダイアログボックスが↓

以下、難しかった点・つまずいた点を書いていきます。

関数の実行を遅らせるのにsetTimeoutメソッドを使う。

苦労したのは、回答した(ボタンを押した)あとに数秒たってから自動的に次の問題に移行するところです。

数秒たってからにしないと、ボタンを押した瞬間に次の問題にいってしまいます。

「関数の実行を遅らせるにはどうしたらいいのかな?」と調べたところ、setTimeouotメソッドを使うといいという事がわかりました。

classList.removeが効かない!

一問終わってボタンのスタイルをリセットするのに「$button.classList.remove(‘circle’);」とやっても、なぜか効きません。

これは色々ググったりして、解決するまでかなり苦労しました。

原因は、$buttonの中は配列になっていて、$button[]とやらなければいけなかったからです。

わかると当たり前なんですけど、考えてるときはホントわからなくて苦労しました。

今後の予定。

今後の予定は、このクイズをもう少しグレードアップして、実際にサーバーにアップして遊べるようにしたいと思います。

コメント

タイトルとURLをコピーしました