35歳未経験からのプログラミング|タイピングゲームのコードレビュー

スポンサードリンク

勉強27日目

ドットインストールのレッスンである「JavaScriptでタイピングゲームを作ろう(全15回)」を3周目にしてようやくゼロから自分の頭で考えて作ることができたので、コードレビューしたいと思います。

作ったコードはGITHUBにアップしました。ページはこちら

お手本コードと自分の書いたコードを見比べて気になったところをコメント残しとこうと思います。備忘録です。(一部割愛)

#07 正解した文字の表示を変えよう

appleの「a」が正解だったら、_ppleにするって処理。

お手本だと関数内でplaceholderという変数を宣言・初期化してfor文まわしてる。

function updateTarget() {
let placeholder = '';
for (let i = 0; i < loc; i++) {
placeholder += '_';
}
target.textContent = placeholder + word.substring(loc);
}

私が書いたコードは、外でplaceholderに該当する変数を宣言・初期化してるだけ。target.textContentの書き方は同じだけどfor文は使ってません。初期化を外でしているのでfor文を回す必要がなかった。このときは。

function updateTaget() {
clearTypo += '_';
target.textContent = clearTypo + word.substring(loc);
}

#08 複数の単語に対応させよう

お手本だと、正誤判定のif文をしている中に、更にif文を書いて打った文字数と表示されている文字の長さが同じ場合は新しい単語を更新するように書いてある。なおかつlocの中身を初期化。

お手本コード

window.addEventListener('keydown', e => {
if (e.key === word[loc]) {
loc++;
if (loc === word.length) {
word = words[Math.floor(Math.random() * words.length)];
loc = 0;
}
updateTarget();
score++;
scoreLabel.textContent = score;
} else {
miss++;
missLabel.textContent = miss;
}
});

私も同じことをしようと思ったんですが、updateTarget関数の書き方がここで影響し、どうしてもうまく行かなかったので、正誤判定あとに呼ばれるupdateTaget関数内で記述した。結果として同じコードを書いたりなど結構汚くなってきた。どうやっても更新されたあとの単語に”_”がつく現象がクリアできなかった。updateTaget内で初期化すればよかったのか。勉強になった。ただfor文を使うという頭にはならなかった。

function updateTaget() {
clearTypo += '_';
target.textContent = clearTypo + word.substring(loc);
if(loc === word.length){
loc = 0;
clearTypo = '';
word = words[Math.floor(Math.random() * words.length)];
target.textContent = word;
}
}

#10 タイマーを表示しよう

これは何回かストップウォッチのコードを書いていたのでなんとか自力でできた。

new Date(変数名)でDate.now()で取得した協定世界時の経過ミリ秒を時分秒に変更するという処理をしなくても秒数だけなら、1000で割って、小数点を.toFixed()で調整すればいいんですね。勉強になった。

#13 isPlayingによる状態管理

let isPlaying = false; でまず初期化処理しておき、各自のイベントで利用する。

クリックスタート時、isPlayingがtrueだったゲームが始まってるので以降のプログラムは読み込まないようにreturnさせている。書き方は少し違うけど概ねOK。

キーダウン時、isPlayingがtrueじゃなかったら正誤判定に進まない。つまりゲームができないようにしている。これもOK。

タイムカウントが0になったとき。isPlayingをfalseにしている。これも概ねOK。

#14 正答率を表示しよう

ここではタイムカウントが終了時にshowResult関数を呼び出して処理している。私はsetTimeoutの中に書いている。やってることは一緒だが、関数呼ぶほうがいいのか?外でも使うって考えるってことか?

#15 リプレイができるようにしよう

あとはゲーム終了時にクリックしたらリプレイができるようにするという処理。クリックイベントの中に初期化処理をもってきてるだけ。これも概ねOK。

終わってみて

ドットインストールに沿ってこのプログラムをつくると、全15回、1回約3分なので45分で作り上げることができる。が、何も見ずにやった場合、2時間以上かかりました。難所に感じたのは正誤判定したあとに文字を”_”に変える処理。ここが躓かなければもう少しスムーズにできたかもしれない。

 

 

スポンサードリンク

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です