ドットインストール - 3分動画でマスターできるプログラミング学習サービス
レッスン一覧
料金プラン
レッスン一覧
料金プラン
ログイン
運営からのお知らせ
2024/10/03
NEW
【週刊ドットインストール】 DHHのお話、レッスン制作の進捗、その他のいろいろ
PREMIUM
【旧版】JavaScriptでタイピングゲームを作ろう
JavaScriptで簡単なタイピングゲームを作る方法について学んでいきます。
0%
新しいレッスンがあります
旧版のレッスンは更新を終了しており、現状と異なる場合があります。サポートも終了しておりますので、最新版への移行をお願いします。
PREMIUM
JavaScriptでタイピングゲームを作ろう
JavaScriptで簡単なタイピングゲームを作る方法について学んでいきます。
0%
動画レッスン一覧
(15)
質問と回答
(26)
#01 タイピングゲームを作ってみよう
(02:40)
無料公開中
完成版の確認
index.htmlの作成
未完了
#02 画面のマークアップをしよう
(02:45)
無料公開中
styles.cssの作成
main.jsの作成
マークアップ
未完了
#03 画面のスタイルを整えよう
(01:52)
無料公開中
bodyのスタイリング
#targetのスタイリング
.infoのスタイリング
未完了
#04 タイプしたキーを取得しよう
(01:46)
無料公開中
keydownイベントの設定
キーの取得
未完了
#05 タイピングの正誤を判定しよう
(02:59)
要素の取得
if文
未完了
#06 正解とミスの数をカウントしよう
(02:47)
要素の取得
scoreの表示
missの表示
未完了
#07 正解した文字の表示を変えよう
(02:38)
updateTarget()
for文
substring()
未完了
#08 複数の単語に対応させよう
(02:15)
配列wordsの定義
ランダムな要素の選択
未完了
#09 ゲームをスタートさせよう
(01:37)
clickイベントの設定
target.textContentの書き換え
未完了
#10 タイマーを表示しよう
(02:50)
Date.now()
updateTimer()
未完了
#11 タイマーを動かそう
(02:09)
setTimeout()
alert()
未完了
#12 タイマーの不具合を修正しよう
(01:51)
setTimeout()
alert()
未完了
#13 イベント発生時の誤動作を防止しよう
(02:38)
isPlayingによる状態の管理
if文
未完了
#14 正答率を表示しよう
(02:51)
条件演算子
テンプレートリテラル
未完了
#15 リプレイができるようにしよう
(02:26)
clickイベントの設定
変数の宣言と初期化の分離
未完了
#04 タイプしたキーを取得しよう
keyがどのようにして使えるようになったかわかりません
2022年1月27日
keyをkeysにするとエラーになりますがなぜですか?
2022年1月27日
windowとdocumentの違いは何ですか?
2022年1月27日
#05 タイピングの正誤を判定しよう
word[]という書き方がわかりません
2022年1月27日
#06 正解とミスの数をカウントしよう
「Uncaught TypeError: Cannot set property 'textContent' of null」と出ます
2022年1月27日
#07 正解した文字の表示を変えよう
forとforEachはどう使い分けるのですか?
2022年1月27日
iとlocの関係がうまくつかめません
2022年1月27日
substringを使った処理がわかりません
2022年1月27日
__が表示されていくロジックがわかりません
2022年1月27日
#08 複数の単語に対応させよう
順番が変わると実行されない理由がわかりません
2022年1月27日
#10 タイマーを表示しよう
「const timeLeft = startTime + timeLimit - Date.now();」の意味がわかりません
2022年1月27日
3秒を 3 * 1000 とする理由を教えて下さい
2022年1月27日
#11 タイマーを動かそう
setTimeout(updateTimer, 10);としてもいいですか?
2022年1月27日
「if (timeLeft < 2) { ... }」としても結果は変わらないようです
2022年1月27日
#12 タイマーの不具合を修正しよう
どうして10ミリ秒後ではなく100ミリ秒後にalertが出るようにしたのでしょうか?
2022年1月27日
#13 イベント発生時の誤動作を防止しよう
isPlayingを使った制御がよくわかりません
2022年1月27日
41行目でisPlaying = false;を書くのはなぜですか?
2022年1月27日
true falseの使い方がいまいちわかりません
2022年1月27日
「isPlaying === false」と書いてもいいですか?
2022年1月27日
#14 正答率を表示しよう
accuracyのあとの「!」は何ですか?
2022年1月27日
コードが実行される順番について混乱しています
2022年1月27日
:や?がわかりません
2022年1月27日
0で割っても0になると思うのですがなぜ計算できないのですか?
2022年1月27日
#15 リプレイができるようにしよう
処理を関数で切り出してみたのですが...
2022年1月27日
wordsに画像を紐付けて表示することはできますか?
2022年1月27日
eはなんですか?
2022年1月27日
リリース情報(note)
VS Codeに対応した『JavaScriptでタイピングゲームを作ろう』をリリースしました
詳細情報
最終更新日
2019年9月3日
バージョン情報
Chrome 76.0 / Visual Studio Code 1.37.1