【広告】
今回はプログラミング初心者でとにかく開発してみたい方や、お子さまにプログラミングを覚えさせたい方向けに、簡単なタイピングゲームの作り方を解説とともに説明します。
基本的なHTML・CSSはサッと解説し、今回使用したプログラミング言語の『Javascript』を中心に解説していきます。
成果物：タイピングゲームの確認
まずは早速成果物を確認してみましょう！
プログラミングの初歩を勉強済の方は成果物を見て、どんなコードでどんなメソッドを使われているかなども想像しながら確認してみてください。
See the Pen Untitled by ちきんまさ@Web自由人 (@koujousijousyug) on CodePen.
確認できましたでしょうか？
今回は簡単に作成しているため、UI /UXは特に突き詰めていません。
HTMLの解説
それではまずはHTMLの解説をしていきます。
h１やpタグは簡単に言うと文字を入力するタグです。それすらわからない場合は下記記事を先に参照し、自分に合った学習サービスを一通り学んでください。
inputタグ
次にinputタグです。
inputタグはHTML文書でユーザーがデータを入力するためのテキストフィールド、ラジオボタン、チェックボックス、ボタンなどのフォーム要素を定義するために使用されるHTMLタグの一つです。
inputタグは、type属性を使用して、入力欄の種類を指定します。
今回の場合テキスト入力をしたいため、『type=”text”』となっています。
また「autofocus」属性をつけWebページを開いたときに、自動的にそのinputタグにカーソルを移動し、ユーザーが直ちに入力を開始できるように指定しています。
buttonタグ
buttonタグは、HTML文書でボタンを定義するために使用されるタグです。
buttonタグは、ボタンを作成するための様々な属性を持ち、テキスト、画像、または両方の形式でボタンを表示することができます。
buttonタグにもtype属性があり、ボタンの種類を指定できます。
今回はスタートとリセットをするJavaScriptのイベントを指定するためだけの簡易的なものになるためtype属性は指定していませんが、例えば『type=”submit”』は、フォームを送信するボタンを作成し、『type=”reset”』は、フォームの値をリセットするボタンを作成します。
CSSの解説
CSSの解説をします。
と言ってもCSSは大したことはしてないのでさらっと解説します。
idを指定したものにCSSをあて装飾していくのですが、今回は画面中央に配置することと『width』で幅を固定することしか特別なことをしていません。
気になることがありましたらコメントで質問ください。
JavaScriptの解説
いよいよメインになりますJavascriptの解説をしていきます。
リストの作成
まずは「const」で定数を宣言し、その中に今回タイピングの内容になるものをリスト化します。
内容を変えたい場合はここを書き換えてください。
定数宣言＝document.getElementByIdでHTMLから要素を取得
HTMLから要素を取得する場合、今回は「id」を指定しているため『document.getElementById』で取得します。
要素を取得することによって、JavaScriptで行ったイベントでその要素を上書きしていきます。
ゲームの初期状態設定
次にゲームの初期状態を「let」を宣言して決めておきます。
「let」は定数を宣言する「const」と違って、内容をその都度書き換える場合に宣言する変数になります。定数は最初の設定から変えられませんが、変数にしたらその都度上書きできるようになります。
ですので、この初期値で設定した内容はゲームを進めるにつれて変わっていくものになります。
あとはこの初期値設定の中に「Math.floor」や「Math.random」、「words.length」というものがあります。
「Math.floor」は与えられた数値を切り捨てて、整数値を返します。
つまり、Math.floor(3.14)の場合は3を返し、Math.floor(5.9999)の場合は5を返します。
次に「Math.random」ですが、0から1未満の範囲で疑似乱数を生成して返します。
つまり、今回の設定したリストからランダムで出題する設定になります。
そして「words.length」ですが、オブジェクトの要素数や文字数を返す設定になります。
つまり、正解するたびにスコアに数値を返す設定になります。
HTML要素の更新
ここではゲームを進めるにつれて表に見えている数値を変更を設定しています。
設定している「updateDisplay」は、通常はウェブページ内の要素の表示を更新するために使用されます。この関数は、HTML要素の内容を更新するための情報を含むデータを受け取ります。
この関数を利用し、「Score」や「Time」をどんどん更新していきます。
インプット要素のイベント
次に「addEventListener」などを使用し、「input」で取得した要素をどんどん追加していきます。
正解の場合はスコアに点数を加算し、ランダムで次の問題を出していくイベントをここで指定しています。
冒頭に書いた「addEventListener」は、JavaScriptでイベントをおこす指定になります。
スタートボタンのイベント
次にスタートボタンのイベント設定になります。
スタートボタンをクリックしたらイベントが行われ、問題が出されると同時に６０秒で設定されたタイマーが１秒ずつ減っていく設定がされています。
そして６０秒たったらタイムアウトとスコアの表示がされるようになっています。
６０秒のタイマー設定は「setTimeout」でされ、が１秒ずつ減っていく設定がされています。
１秒は１０００ミリ秒のため「６０＊１０００」で設定されています。
リセットのイベント設定と初期化設定
ここではリセットボタンを押した際に数値を初期化し、「clearInterval」や「clearTimeout」でタイマーの初期化などを行っています。
途中リセットしたい時に便利かと思い設定しました。
そして最後「updateDisplay」でHTML要素を更新しています。
本格的にプログラミングを学びたいなら
今回はプログラミングを学び始めたばかりの方でもできるようなタイピングゲームを作ってみました。
今回の記事をキッカケに本格的にプログラミングを学びたいと思った場合、独学でもある程度できるのですが、やはり実用性のある知識とスキルをつけるには誰かしらに学ぶのが一番の近道です。
じゃあすぐそばに都合よくプログラマーがいればいいのですが、誰しもがそんな境遇ではないでしょう。
そこで、あくまでひとつの選択肢ではあるのですが、『TechAcademy [テックアカデミー]
』という、自宅で現役エンジニアから学べるオンライン学習サービスがあります。
TechAcademy無料動画説明会
『テックアカデミー』は先述した通り自宅で現役のエンジニアから学ぶことができるオンラインプログラミングスクールです。
通う必要がなく、自宅でもWeb制作・プログラミング・アプリ開発を学べます。
転職の支援はもちろん、副業に活かせるスキルの習得から、副業の仕事紹介まで寄り添ってくれるサービスとなっています。
そうは言われても、いきなり本格的に受講するのは迷うものです。
ですので、まずは無料体験から始めることがベストでしょう。
それで自分の生活のベースに障害なく、また自分に合ったペースで学べそうであれば、実際に受講することをおすすめします。
コメントを残す