ドットインストール - 3分動画でマスターできるプログラミング学習サービス
レッスン一覧
プレミアム会員
法人でのご利用
レッスン一覧
プレミアム会員
法人でのご利用
ログイン
運営からのお知らせ
2023/05/25
NEW
週刊ドットインストール(2023/05/25号)を更新しました!
2023/05/24
NEW
ポートフォリオ掲載可能!実案件をイメージした新クラス、『Webアプリ案件修行 ダミーデータジェネレータ編』をリリースしました
PREMIUM
JavaScriptでタイピングゲームを作ろう
JavaScriptで簡単なタイピングゲームを作る方法について学んでいきます。
0%
動画レッスン一覧
(11)
質問と回答
(44)
未完了
#01 タイピングゲームを作ろう
(02:18)
無料公開中
完成版の確認
index.htmlの作成
未完了
#02 画面のスタイルを整えよう
(02:46)
無料公開中
マークアップ
styles.cssの作成
スタイリング
未完了
#03 タイプしたキーを表示しよう
(02:08)
無料公開中
main.jsの作成
keydownイベントの設定
キーの取得
未完了
#04 タイピングの正誤を判定しよう
(02:53)
文字列へのアクセス
正誤判定の条件分岐
未完了
#05 正解した文字の表示を変えよう
(01:52)
repeat()
substring()
未完了
#06 早期リターンを使ってみよう
(01:38)
早期リターン
未完了
#07 複数の単語に対応させよう
(01:24)
複数の単語を定義
ランダムな要素の選択
未完了
#08 次の単語をセットしよう
(01:52)
setWord()
未完了
#09 単語の重複を防ごう
(02:28)
splice()
結果表示
未完了
#10 ゲームをスタートさせよう
(02:43)
clickイベントの設定
クリアタイムの表示
未完了
#11 ゲームの不具合を修正しよう
(01:37)
ゲームの状態を管理
不具合の修正
#02 画面のスタイルを整えよう
この場合のemはどういう意味ですか?
2022年1月27日
#03 タイプしたキーを表示しよう
なぜ innerText ではなく、 textContent を使うのですか?
2022年7月9日
addEventListener('keydown', e 〜 の e は何を表しているのですか?
2022年1月27日
#04 タイピングの正誤を判定しよう
なぜ loc++ とする必要があるのですか?
2022年10月28日
word[loc] で loc 番目の文字を取得できるのはなぜですか?
2022年6月9日
const word = 'red'; だと、 word[0] は 'r' という認識であっていますか?
2022年6月3日
if (e.key === word[loc]) のところで key と付けるだけで、タイプしたキーを識別できるのはなぜですか?
2022年1月27日
addEventListener の e は何を意味しているのですか?
2022年1月27日
Stringオブジェクトについて教えて下さい
2022年1月27日
locとは?
2022年1月27日
#05 正解した文字の表示を変えよう
"abc".substring(1,2); で 'b' が返るのはなぜですか?
2022年2月21日
'_'.repeat(loc) と word.substring(loc) の関数同士を + で繋げられるのはなぜですか?
2022年1月27日
なぜ red 以外の他の文字を入れても表示されないのですか?
2022年1月27日
substring(loc) の loc が文字の長さを超えた場合はエラーにならないのですか?
2022年1月27日
配列の任意の番目の文字列を置き換えることはできますか?
2022年1月27日
repeatとsubstringについて教えて下さい
2022年1月27日
#06 早期リターンを使ってみよう
なぜ文字である e.key と 数値である word[loc] を比較できるのですか?
2023年4月4日
早期リターンを使う理由がわかりません
2022年1月27日
returnするとどうなるかわかりません
2022年1月27日
早期リターンを使ってelseは使わないほうがいいのですか?
2022年1月27日
#07 複数の単語に対応させよう
Math.floor(Math.random() * words.length) の処理がわかりません
2022年1月27日
配列から要素をランダムではなく、順番に取り出すにはどうしたらよいですか?
2022年1月27日
Math.random を console.log で確認したいのですが、意図した動作になりません
2022年1月27日
#08 次の単語をセットしよう
let loc = 0 を setWord() 関数内に入れるとうまく動作しないのはなぜですか?
2022年4月4日
document.addEventListener ではループ処理をしていますか?
2022年1月27日
なぜ setWord(); を書く必要があるのでしょうか?
2022年1月27日
2周目のsetWord();の実行について教えて下さい
2022年1月27日
loc === word.length の意味がわかりません
2022年1月27日
#09 単語の重複を防ごう
わざわざ return を記載するのはなぜですか?
2023年4月12日
[0] としているのに word に words 配列の一番目である red が代入されないのはなぜですか?
2022年1月27日
ゲームが中断される return と、そうではない return があるのはなぜですか?
2022年1月27日
returnの意味について教えて下さい
2022年1月27日
splice()の挙動について教えて下さい
2022年1月27日
spliceのあとにつけた[0]の意味を教えて下さい
2022年1月27日
#10 ゲームをスタートさせよう
new Date(); と Date.now(); の違いはなんですか?
2022年1月27日
変数を宣言するタイミングについて教えて下さい
2022年1月27日
startTimeは定数にしてもいいのでは?
2022年1月27日
テンプレートリテラルの使い方がいまいちわかりません
2022年1月27日
#11 ゲームの不具合を修正しよう
なぜ return をしているのにそれ以降の命令が実行されるのですか?
2022年4月4日
let startTime や let isPlaying の T や P が大文字なのはなぜですか?
2022年1月27日
return より下に書いた命令が実行されるのはなぜですか?
2022年1月27日
isPlaying周りの処理がわかりません
2022年1月27日
コードを書く順番について教えて下さい
2022年1月27日
isPlayingの判定はfalseで行ってもいいですか?
2022年1月27日
ギャラリー
このレッスンについて
最終更新日
2020年9月2日
バージョン情報
Chrome 84 / Visual Studio Code 1.48.2
関連キーワード
(6)
基礎講座
(368)
初心者向け
(367)
HTML
(115)
CSS
(116)
JavaScript (ES2017)
(36)
ミニプログラム
(142)
このレッスンを共有する