前のパートに戻る 完了して次のパートへ  

  0 - 1タイピングゲームを作ってみよう!

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


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

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

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


サンプル


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

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


所要時間


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

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

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


用意するもの


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

https://codepen.io/


カリキュラム構成


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

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


1章:HTMLを構成する

2章:スタイル(css)を調整する

3章:javascriptの実装

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

4章:問題数の設定をする

5章:問題をランダムに出す

6章:タイピングの正確率を出す

7章:時間を測ろう

8章:はじめからやりなおす


議論
0 質問
このコースの評価は?