ネットワーク用のコマンドを学べるタイピングゲームを作ってみた。 - ネットワークエンジニアで高きを目指せ（横浜編）

22日はネットワークのコマンドを学べるタイピングゲームを作るべく、ドットインストールのタイピングゲームを改造していました。

なんとか、ネットワークのコマンドをタイピングゲームで学べないか作ってみました。https://t.co/qVQcXj2tiz
解説を読む時間がないため、どうしようか考え中。
（プロトタイプです）
— tsuyunaruhito (@tsuyunaruhito) February 22, 2020

なんかこう、プログラミングを通じてネットワークのコマンドやら知識やらを得られるようなウェブアプリを作りたい。

ちなみにその日の食事はテキサスチキンでＧＯ。

今日はテキサスチキンでタイピングゲームの改造中!
In suban jaya，Malaysia pic.twitter.com/OGz2plGI10
— tsuyunaruhito (@tsuyunaruhito) February 22, 2020

出来上がったタイピングゲームは下記のＵＲＬで紹介しております。

https://cyberjaya.xyz/2/typinggamef/ftyping.html

簡単にウェブアプリの紹介をさせてください。

ＵＲＬへいくと、クリックを押すように催促されるのでクリックしてください。

そうしたら、すぐ以下のような画面に映るはずです。

赤い部分は"comment"部分です。

おススメはまず以下の赤い部分を一瞬見てから、上のコマンドを打つことをおススメします。

f:id:tsuyunaruhito:20200224223932p:plain

ちなみにうまく打てていると、点に変わります。

f:id:tsuyunaruhito:20200224224213p:plain

まだ登録してあるコマンドは10個にも満たないです。

解説、フォントの色など工夫したいですね。

ＩＴ用語タイピングゲームとかも考えてて、打つ前に画像が出てそれみてからタイピングするとかそういうのもアイデアとしては持っています。

とにかくなんかこう、ネットワークやハード、ソフトの3つの部分をうまく組み合わせて学べるような奴を作りたい。

さて、今回のプログラミングの仕組みですが少し解説します。

なお、タイピングゲームのプログラミング自体はドットインストールで学んでください。約千円ほどかかりますが、たった千円でこんなアプリ作れるなら安い。

ドットインストールのＵＲＬは以下の通りです。

https://dotinstall.com/lessons/typing_js_v3

さて今回工夫した点は、タイピング用のコマンドが出てきたと同時に、下記に対応する"comment"をつけたところです。

JavaScriptの二次元配列とか言う奴を利用しました。

まず、ＨＴＭＬでPタグを増やし、"comment"というＩＤをあてました。

<p id="comment"></p> 

ちなみに今回のタイピングゲームの場合、時間が短いと"comment"を読む暇もないので時間を1分に延ばしました。慣れれば、"comment"を読む時間もタイピング速度も上がると思われます。

次に2次元配列の実装を行いました。

簡単な例は以下の通り。

const words = [

['apple', '赤い!'],

['orange', '愛媛!'],

['banana', '甘い!'],

['kiwi', '美味しい!'],

['cherry', '可愛い!'],

];

配列では各要素に順に0から番号が割り当てられていました。

words[0] apple

words[1] orange

words[2] banana

words[3] kiwi

words[4] cherry

では二次元配列とは？

配列の各要素に更に配列があるのです。

	0	1
0	words[0][0] apple	words[0][1] 赤い!
1	words[1][0] orange	words[1][1] 愛媛!
2	words[2][0] banana	words[2][1] 甘い!
3	words[3][0] kiwi	words[3][1] 美味しい!
4	words[4][0] cherry	words[4][1] 可愛い!

以下のようなページを目指しました。

f:id:tsuyunaruhito:20200224234106p:plain

今はまだ実装していませんが、もちろんもっと増やすこともできます。

	0	1	2
0	words[0][0] apple	words[0][1] 赤い!	words[0][2] アップル
1	words[1][0] orange	words[1][1] 愛媛!	words[1][2] オレンジ
2	words[2][0] banana	words[2][1] 甘い!	words[2][2] バナナ
3	words[3][0] kiwi	words[3][1] 美味しい!	words[3][2] キウイ
4	words[4][0] cherry	words[4][1] 可愛い!	words[4][2] チェリー

つまり単語words[n][0]に対応するコメントはwords[n][1]と表すことが出来ます。

ドットインストールでは整数nはMath.floorとMath.random()を使用しました。

let n; // words[n][0]、words[n][1]

n = Math.floor(Math.random() * words.length); // ランダムな整数を生成

word = words[n][0]; // 単語

target.textContent = word;

comment.textContent = words[n][1]; // コメント

comment.textContent = words[n][1]; で”comment”をコメントwords[n][1]に置き換えます。

ここまでは、window.addEventListener('click', () => {}の中身を改造してきました。つまりゲームをスタートさせるためにクリックし、最初に表示される単語に対するコメントだけを追加することが出来ました。次は、window.addEventListener('keydown', (e) => {}の中を改造していきます。

ここには、タイピングの正誤判定と、カーソルの位置(loc)と単語の長さ(word.length)が一致したときに次の単語を表示する、という処理が書かれています。ここで新しい整数を生成すれば次の単語とコメントが表示できます。

n = Math.floor(Math.random() * words.length); // ランダムな整数を生成

word = words[n][0]; // 単語

comment.textContent = words[n][1]; // コメント

さて、最終的には当然りんごとかアップルじゃなくて、ネットワークのコマンドを打ち込んで"comment"されるようにしたいので以下の文章に変えています。

const words = [
['switchport mode access','スイッチポートの変更です。ポートをアクセスポートに変更します。'],
['switchport access vlan 10','アクセスモードに変更した後、VLAN IDを1－4094の範囲で変更します'],
['switchport mode trunk','スイッチポートの変更です。ポートをトランクポートに変更します。'],
['switchport trunk encapsulation dot1q','トランキングプロトコルをdot1qかislに変更します'],
['vtp domain ABC','vtpのドメイン名をＡＢＣとして設定する'],
['vtp version 3','VTPバージャンの設定(1,2,3)を行います'],
['vtp mode transparent','VTPモードはデフォルトでserverモードです。server,client,transparentの中から選択することができます'],
];

正直長い間ネットワークの勉強から離れていたので、だいぶ忘れちゃいましたが、復活してこちらのプログラミングに組み込んでいきたいですね！

イヤ、マジで！

ちなみに、"comment"があまりに小さいので、ＣＳＳで文字を大きくしておきました。そこらへんは簡単にできると思います。

#comment{
font-size:60px;
}

もっといい感じに改造ができたらまた紹介します。

★その他、最近の記事は以下の通り。

interier.hatenablog.com

信じられないことに約660人の方に現在フォロー頂いております！。

迷える子羊である私と絡んでくれる方がいらっしゃいしたら、是非以下フォローお願い致します。

↓↓↓↓↓

私のよく知っているベトナムにて、ＩＴ留学ができるようです。2週間からでも参加できるようなので、検討されては如何でしょうか。下記、バナーより説明会に参加できますので、ご検討お願い致します。