ネットワークエンジニアで高きを目指せ(サイバージャヤ、マレーシア)

世界を股にかけて転職する男(マレーシア<ー>ベトナム)

現在の課金状態

ドットインストール:月1000円

Progate:月980円

AWS:0.53USD/Month

Paiza:月1078円:7月1日までに解約すること!

Amazon Unlimited:解約(月1000円)

ネットワーク用のコマンドを学べるタイピングゲームを作ってみた。

Graspyで無料プログラミング講座を受講する

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

 

 

 

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

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

 

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

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

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

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

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

 

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

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

f:id:tsuyunaruhito:20200224223932p:plain


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

f:id:tsuyunaruhito:20200224224213p:plain

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

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

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

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

 

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

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

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

https://dotinstall.com/lessons/typing_js_v3

 

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

 

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

まず、HTMLでPタグを増やし、"comment"というIDをあてました。

 

<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のドメイン名をABCとして設定する'],
['vtp version 3','VTPバージャンの設定(1,2,3)を行います'],
['vtp mode transparent','VTPモードはデフォルトでserverモードです。server,client,transparentの中から選択することができます'],
];

 

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

 

イヤ、マジで!

 

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

 

#comment{
font-size:60px;

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

 

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

 

interier.hatenablog.com

interier.hatenablog.com

 

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

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

↓↓↓↓↓

 

 

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

読者登録をしていただけると大変助かります。

 
 本サイトが参考になったらクリックをお願いします。

  にほんブログ村 にほんブログ村へ