タイピングゲームを作ってみよう！

本講座ではProgateでjavascript, jQueryを一通りやって、次のステップとして「動くものを作る」という点にフォーカスして、シンプルなタイピングゲームを作ります。

Progateのjavascript, jQueryで学んだ全ての知識を使わなくてもできるように、なるだけ簡単なソースコードになるようにしています。

jQuery初級〜中級はやってみたというレベルでもできると思います。

サンプル

実際にどんなものを作るか、以下のURLから試してみましょう。

https://codepen.io/narith/full/WaBKPB/

所要時間

約2~3時間を目安としています。

ある程度知識があれば1時間くらいで終わります。

分からないところがあれば適宜調べていきましょう。

用意するもの

上記のサンプルでも使った「codepen」というオンラインエディタで開発していきますので、アカウントを作っておきましょう。

https://codepen.io/

カリキュラム構成

HTML,cssでまず作って見た目を作ります。（全てソースコードがあるので安心してください)

そこからjavascriptで少しずつ動きをつけていく形でドンドンタイピングゲームが出来あがります。

１章：HTMLを構成する

２章：スタイル(css)を調整する

３章：javascriptの実装

• 3-1 キー入力のイベントバインド
• 3-2 入力文字の判定
• 3-3 次の問題の表示
• 3-4 最後の問題の処理

４章：問題数の設定をする

５章：問題をランダムに出す

６章：タイピングの正確率を出す

７章：時間を測ろう

８章：はじめからやりなおす