おためし受講中

JavaScript実践 〜タイピングゲームの作成②〜

■ タイピングゲームを作ろう

今回はJavaScriptを使ってタイピングゲームを作成します。実際の制作を通じて、JavaScriptでのプログラミングに慣れる事が出来ます。

第一回: タイピングゲームを作ろう
第二回: アニメーションをつけたり、出題を変更できるようにしよう

今回作成するアプリは別の授業、ライブコーディングのすゝめ【第二弾】で作成されたアプリになります。
完成サンプル 

■ 事前準備

この授業では下記ソフトウェアを使用します。事前にインストールしておいて下さい。

GoogleChrome
https://www.google.co.jp/chrome/browser/desktop/index.html
・人気のWebブラウザです。Windows/Mac両方で利用可能で、JavaScriptの開発に便利な機能を持っています。

Sublime Text
http://www.sublimetext.com/
・人気のテキストエディタです。Windows/Mac両方で利用可能で、JavaScriptの開発に便利です。
使い慣れているエディタがあれば、そちらをご利用いただいても構いません。


またこの授業はJavaScriptの知識を前提としています。
JavaScriptに自信の無い方は、下記コースを受けてみてください。
JavaScript入門(全4回)

学生代表

  • 大木 しのぶ

    大木 しのぶ

    スクー放送部

【ノート機能】
授業内容や覚えておきたいポイントなど、ノートに自由に残せます

再生位置挿入 資料挿入
筆記アシスト
ONOFF
    【チャプター機能】
    授業内容をピンポイントでおさえながら
    ご自身のペースで進めることができます
    【前半】授業
    自己紹介&アジェンダ
    02:32  (00:13 ~ )
    事前準備の確認
    02:10  (02:45 ~ )
    ゴールの確認
    02:02  (04:55 ~ )
    タイマー機能の実装
    04:39  (06:57 ~ )
    タイマーを表示させる場所を指定する
    04:56  (11:36 ~ )
    タイマーの表示場所を調整しよう
    02:56  (16:32 ~ )
    Webフォントの導入
    04:57  (19:28 ~ )
    アニメーション機能実装
    06:13  (24:25 ~ )
    リトライ機能実装
    07:30  (30:38 ~ )
    問題変更機能の実装
    08:30  (38:08 ~ )
    【後半】質疑応答
    Q:ローカルストレージに入れたものはどこに行くのですか?
    01:41  (46:38 ~ )
    Q:JavaScriptから見れるということは、そこからハックされる可能性はありますか?
    01:35  (48:19 ~ )
    Q:ライブコーディングとかで作るものを考えるときは、どの位かけますか?
    01:31  (49:54 ~ )
    Q:=の前後にスペースは必要なのですか?
    00:30  (51:25 ~ )
    Q:ライブコーディングが失敗した時に立ち直る方法とか教えてください。
    01:38  (51:55 ~ )
    Q:入力ミスしたとき、文字にokとngのクラスが同時に設定される状態になるのですが、これはok,ngどちらが設定されるようにした方がいいのですか?
    01:34  (53:33 ~ )
    Q:先生はどのようにして、集中力を継続されていますか?
    01:33  (55:07 ~ )
    Q:これからJavascriptをマスターするには、繰り返し同じものを作ってもOKですか?
      (56:40 ~ )