カテゴリー
サインイン 新規登録

間違いや改善の指摘

内容の技術的な誤り・誤字脱字やミスのご報告・解説やトピックの追記/改善のご要望は教材をさらに良くしていく上でとても貴重なご意見になります。

少しでも気になった点があれば、ご遠慮なく投稿いただけると幸いです🙏

実際には誤りではなく勘違いであっても、ご報告いただけることで教材のブラッシュアップにつながります。

質問ポリシー①

教材受講者みなさんのスムーズな問題解決のために、心がけていただきたいことがあります。

教材の内容に関する質問を投稿しましょう

教材の内容に関係のない質問や教材とは異なる環境・バージョンで進めている場合のエラーなど、教材に関係しない質問は推奨していないため回答できない場合がございます。

その場合、teratailなどの外部サイトを利用して質問することをおすすめします。教材の誤字脱字や追記・改善の要望は「文章の間違いや改善点の指摘」からお願いします。

0-1

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

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

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

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

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

サンプル

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

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

所要時間

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

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

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

用意するもの

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

https://codepen.io/

アカウント作成後、プロファイル画面に移るので右上のアイコンをクリックし、「New Pen」を選択してください。

_2019-02-27_15_38_09

「New Pen」選択後、以下の画面になります。以後はこの画面でコーディングを行います。

_2019-02-27_15_50_09

カリキュラム構成

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

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

1章:HTMLを構成する

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

3章:JavaScriptの実装

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

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

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

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

7章:時間を測ろう

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

現在のパート (0)
全パート (6)
みんなで助け合おう!
現在のパートのディスカッション 全0件