2021年3月となりました。
2月半ばに始めた「JavaScriptでゲームを作りまくったらプログラミングを習得できるのか」ですが、2月はオセロ・テトリスに加えてもう一つ、合計3つのゲームを作りました。
本記事は3つ目に作ったゲームに関する記事となります。
この記事はあくまでJavaScript勉強のメモのような記事です。
これを見てもプログラミングができるようになるわけではありませんので、ご注意ください。
3つ目のゲームはタイピングゲーム
今回はタイピングゲームを選びました。
前回のテトリスが難しすぎたので、比較的簡単そうなものを選びました。
ちなみに私がよくやるタイピングゲームは寿司打です。
今回は、作業時間としては2時間ほどかかりました。
htmlにコードをすべて書くとすると、200行ほどです。
完成形↓
参考サイト↓
こちらのサイトは、プログラミング学習の有名サイト「ドットインストール」で作られているタイピングゲームのコードを解説してくれています。
cssのコードは掲載されていなかったのですが、テキストを中央寄せにして文字サイズを少し調整しました。
今回もほとんど見本通りに作りましたが、単語数を少し増やしました。
他にアレンジはなしです。
JavaScriptがもっとできるようになったら、次の2点をアレンジしたいです。
- 単語ごとに制限時間を設ける
- 日本語も表示して、英単語の勉強ができるように
まずはJavaScriptに慣れて、ある程度自分でコードが書けるようになることが目的なので、アレンジは一度置いておきます。
タイピングゲームを作って学んだJavaScriptの知識
ここではタイピングゲームを作りながら学んだことを3つ紹介します。
ゲーム中のフラグ
タイピングゲームは、ゲームが始まった後とゲームが始まる前では違う動きをする部分があります。
そのときにゲーム中がゲーム中でないかを示すのが、ゲーム中のフラグです。
ゲーム中でないときは、let isPlaying = false;
ゲーム中のときは、let isPlaying = true;
とすることで区別できます。
これは他のゲームを作るときにも生かせそうです。
substring
substringって何それ？と思い調べました。
substringは文字列を切り取って取得するようです。
タイピングゲームでは打った文字を＿で表示し、それ以外は変更せずそのまま表示します。
それを次のようなコードで書きました。
target.textContent = placeholder + word.substring(loc);
これでテキストを「＿＋残りの文字列」と表示できます。
（定義省略）
ゲーム残り時間の計算
ゲーム残り時間の計算は次のようなコードを書きました。
const timeLeft = startTime + timeLimit - Date.now();
startTime：クリックしてゲームを始めた時刻
timeLimit：ゲームの制限時間
Date.now()：ゲーム中の現在時刻
このように書くことでゲームの残り時間を計算できます。
制限時間のあるゲームではテンプレとして使用できるのではないかと思いました。
JavaScript初心者がタイピングゲームを作った感想
今回は比較的簡単だと感じました。
コードの量も少なく、オセロやテトリスよりもシンプルでわかりやすかったです。
8割ほど理解できました。
私と同じようにJavaScript初心者の人はぜひ作ってみてください。
また、忘れたころに自分でコードを書いてみたいと考えています。
これまで3つのゲームを作りましたが、やはりコードの意味を一つ一つ勉強するより楽しいです。
3月も頑張ります。
なぜこのような挑戦をしているのか↓
オセロ編↓
テトリス編↓