【JavaScript】プログラミング授業案⑩【タイピングゲーム】

２年後には実際にプログラミングを授業の中で実施しなくてはなりません。
有難いことに、学校設定科目として３年生に情報演習の授業があります。
今年度から、実験的にプログラミング授業を行うことにしました。
前回までの配列の知識や関数、条件分岐の知識を総動員してタイピングゲームを作っていきます。

【JavaScript】プログラミング授業案⑨【配列の基本編】

２年後には実際にプログラミングを授業の中で実施しなくてはなりません。授業案の９時間目。今回は、配列の基本を確認しておきます。

今回の学習成果

すしネタタイピング

   <div id="game">
      <ul>
        <li>すしネタタイピング</li>
        <li id="target"></li>
        <li id="result"></li>
      </ul>
    </div>

リスト構造をしていますが、HTMLはシンプルです。
タイピングする文字を表示するリストと、終わった時に結果を表示するリストを組んであります。

CSSの記述

CSSの中身をシンプルです。
もちろんこだわって記述してもいいのですが、授業ということを考えると、あくまでJaveScriptに時間をかけたいところです。
早く完成した子たちのプラスαとして、CSSは残しておいてもいいかもしれません。

JavaScriptの記述

以前作成したタイピングゲームを、より簡略化してあります。

【JaveScript】タイピングゲームの制作

ブラウザ上で動くタイピングゲームのミニアプリです。表示された文字列をタイピングすると、ランダムに次の単語が出てきます。プログラミング初級編としても、とっつきやすいように感じます。

文字がランダムで登場する仕掛けをつくると、Math.randomの知識が必要になってきます。
ここは応用として、40名くらいの一斉授業を想定するならば、省きたいところです。
それから、入力した文字を「_」に変えていく動作も省きました。
単純に文字が消えていくのですが、これはこれで面白いのではないでしょうか。
const wordsの中身を増やしていけば、長時間かかるゲームも可能です。