国名入力ゲーム(13/16)出題処理

 

オブジェクトを利用した出題処理を作成

前回は、タイマー処理を作成して、HTML上でカウントダウンを表示する機能を作成しました。
今回は問題を出題する処理を作成します。

STEP1で作成した暗記ゲームと行うことはほとんど同じです。
回答させる国を配列から取り出します。

出題の大まかな流れは次の通りです。

①配列からデータを取り出す。
②取り出したデータを色で塗る

これだけです。
色を塗るだけという単純な処理ですが、
この処理は他の処理でも利用することがあります。

  1. 出題時に対象の国を白くする
  2. 不正解時に対象の国を赤くする
  3. 正解時に対象の国を緑にする

以上の3処理で色を変更する機会があるので色違いで
同じ関数を複数作成するのは効率がよくありません。
そこで、同じ関数に引数に色を取り、その色で国を塗りつぶす。
関数を作成しましょう。そうすれば1つの関数で出題時、不正解時、正解時の色の塗り分けを行うことが可能になります。

コードで表すと次のような関数です。

この関数を描いた後、以下のコードを実行するとアメリカ緑になることがわかると思います。

続いて出題の処理です。
問題となる国名はmapDataの配列に格納されています。
配列の要素としてオブジェクトが格納されています。内容として、英語名(enName)日本語名(jaName)
のプロパティを持ちます。
出題する場合はこのmapDataから要素を1つ取り出し先ほど作成したchangeMapcolorにenNameと
色を与えてやれば良いのです。
そして入力された日本語名(jaName)と入力欄に入力された回答が正解している場合は再度changeMapcolorで
色を変えていけばよいですね。
コードは次のようになります。
関数内のif文は(mapData.length)が0より大きい場合にpopをするようにしています。
popは末尾の配列を取り出して削除するので、mapData.lengthに要素がない場合はpopしないようにするためです。
また、returnで配列の最後の要素を返しています。これは回答処理に利用します。

次回は回答処理を作成して行きます。

国名入力ゲーム(12/16)タイマー実装

javascriptで小数点を含むカウントダウンタイマーを作成する

前回はまでで、javascriptでの時間の扱い方と定期処理の方法を学びました。
今回はそれらを用いて実際のタイマー処理を作成します。

前回定期処理を学んだ際に以下のようなプログラムを書きましたが、
覚えているでしょうか。

大まかに流れを説明すると次のようにプログラムが動きます。

  1. 変数iに10を代入
  2. setIntervalで1秒毎に関数hensuが呼び出される
  3. 関数hensuが繰り返されるたびにiの値が1ずつ減っていて
    iが0より小さくなった場合に繰り返し処理が停止する

このプログラムが理解できていることが重要です。

 

今回作成するタイマー処理は次のコードです。

コードの内容から説明します。

1.カウントダウンタイマー用変数
カウンドダウンを実装するにあたり、最初の秒数を変数limitTimeを設定しています。
変数startTimeにDate.now()で1970年1月1日午前0時0分0秒からの経過時間をミリセック(1/1000秒)単位で
取得します。
経過時間の差分を格納する変数をtimeDiffとします。

2.次にカウントダウン関数の部分の説明です。

①.timeDiff変数に現在までの経過時間とカウントダウン開始時刻の差分時間(ミリセック)格納。
②制限時間を格納したlimitTime(単位秒)と①で差分として取得したミリセックを1000で割って秒に変換
 して差分をtimeDiffに格納(ここで単位は秒になる)これが残り時間となる。
③少数点第2まで表示したいため、小数点第3以下の数字消すために、一旦timeDiffに100をかける
④③の結果timeDiffの小数点以下の数字は本来小数点第3以下の値のため、不要。
 よって、timeDiffをMath.floor関数で少数点以下を切り捨てる。
⑤timeDiff小数点第3以下を捨てたので、3で100を掛けた分を戻すため100で割る
⑥timeDiffの値を.secの要素に書き込む

メインの処理は①から②の処理です。現在時刻までに経過時間Data.now()から開始時刻startTime
を引き算することで、何秒経過したか得ることができます。
③と④については若干複雑に見えるかもしれませんが、行いたいことは単純で、少数点第2まで求めたいため
一旦100掛けて、小数点以下を切り捨てして、100で割って少数点を戻すということですね。
少し面倒な処理ですが、数値が高速で切り替わるのは入力を急かす演出になるので、
どんどん利用していきましょう。

⑤行目の処理で、テキストを要素に書き込む場合
jQueryを利用するので、HTMLのheadにjQueryを読み込んでおいてください。

 

最後にインターバルの処理です。
流れは単純です。
①setIntervalでカウントダウン関数を呼び出します。
②カウントダウン関数終了後、経過時間が0より小さくなった場合は
 繰り返し処理を中断して回答入力欄を消す。
 それ以外はカウントダウン関数を繰り返し続けます!入力が完了したら、実際にページを確認してましょう。
固定でsecの部分がカウントダウンしていればOKです。

・Date.now()で1970年1月1日午前0時0分0秒から現在までの経過時間をミリセック(1/1000秒)単位で
 取得することができる。
・ミリセックに1000をかけることで秒を得ることができる。
・国名当てゲームでは小数点第2までの秒数を得るために、100を掛けて残りを切り捨てて
 100で割る。

次回は出題処理の作成です。

国名入力ゲーム(9/16) 関数式

関数はまだまだ続きます。
関数の概念は概ね伝えましたがもう少し細かい部分が
あるので、それは後々説明していきます。

今回は関数の作り方の別バージョンをやっていきます。
続きを読む

即時間数イメージ

国名入力ゲーム(8/16)即時関数

前回は関数のスコープで関数を使うと変数の有効範囲を決めることができる。
ということを学びましたが、今回はまた関数に戻りますー!
またかよ。と思いましたね。関数嫌いですか?
僕は関数が大好きです。       
もう少し頑張っていきましょう。

続きを読む

変数のスコープ1

国名入力ゲーム(6/16)変数のスコープ

スコープというのは、範囲とか、視野とかそういう意味があります。
変数のスコープというのは変数使用できる範囲のことです。

例を挙げて説明します。そうですね、学校で考えましょう。
学校のクラス(3組とかA組等)には出席番号がありますね。
「出席番号1番」を人を入れる箱とイメージしてください。
続きを読む