パネルの数字合わせゲームを作ってみた(HTML編)

ワギャンランド風絵合わせパネルを作ってみた

過去にG’s AcademyのJavaScriptに関する課題にて、Canvasの機能を使って何か作るというものがありまして。

その際、サンプルゲームを引用して、1~15までを順番に並べる数字合わせゲームを作ってました。

せっかくなので、自分の復習がてら、備忘録としてコードの解説を挟んでみようと思います。

ちなみにこのゲームは、HTML(JavaScript) , CSS, JQueryを用いて制作しました。

JQueryの解説記事はこちら ↓

HTMLのコード

HTML(JavaScript含む)のソースコードです。

なかなか上手くいかず、けっこう時間かかりましたね…

HTMLの用語解説

個人的に勉強になった項目をピックアップします。

頭ではなんとなく分かったつもりでも、実装して上手くいくかどうか全く別.. ..

ボタンにonclick属性をつけてカウントさせる

HTML部分は、基本見た目の装飾なので解説を省きます。あ、一箇所だけあげますと…

<div id="gameStats">
 <img id="example" src="???" width="400" height="350">
 <table id="table"></table>
 <p id="showtime"></p>
 <ul class="setbutton">
  <list id="start" class="button" onclick="count++;" href="">Start</list>
  <list id="gameBack" class="button" href="">Back</list>
  <list id="gameComplete" class="button" href="" >Complete</list>
 </div>

の、onclick=”count++;”

ここで、スタートボタンが押されてから時間のカウントが始まるようにしています。

htmlでonclickを指定してカウントさせる事ができるって知らなかったので、色々悩み考えて今回の実装に至りました。

JavaScriptの用語解説

JavaScriptのコードを使った時の学習メモです。

use stric

JavaScript内で厳格モードを実行するための記述です。

“use stric”宣言をすると、そのコードは厳格モードで実行されるようになり、より的確なエラーチェックが行われます。

具体的には、これまでエラーにならなかった曖昧な実装がエラー扱いになります。

コード内に存在する潜在的な問題を早期に発見しやすくなる、といったメリットがあります。

appendChild(〜追加したい要素〜);

指定要素へ子要素を追加します

setInterval

一定時間後に、特定の処理を繰り返すタイマー処理

// カウンターの設定
var count = -2; //カウントの初期値
var timerID = setInterval('countup()',1000); //1秒毎にcountup()を呼び出し

上記の場合、1秒ごとにcountup関数を呼び出します。

また、数字の1,000は、一定時間の指定(ミリ秒)のことを示しており、この場合はcountup関数を「1,000ミリ秒ごとに処理を繰り返す」、ということになります。

getElementById

指定したidを持つ要素を1つ取得するメソッドです。存在しない場合はnullを返します。

今回は、

document.getElementById("showtime").innerHTML = time;

(“showtime”).innerHTMLで、経過した時間を数字として表示させ、

var table = document.getElementById("table");

ここでは、table要素への参照を取得

document.getElementById("gameComplete").style.display="none";
document.getElementById("gameComplete").style.display="block";

コンプリートボタンを普段は非表示にし、クリアしたら表示させるような記述にしています。

(”gameComplete”はJQueryのコードで使っている、UIに関連したボタンです)

今回のように、他のコードで使っている要素を引っ張りだしたい時に活用できます。

createElement

英語で書いてあるとおり、エレメントを生成するメソッドです。今回はパネルを作成させています。(画像のパネルと数字と、2つ作成している)

function swap

入れ替えを行う関数です。

ここでは、条件が成立した場合にswap(i,j)を呼び出してタイルの番号を入れ替えています。

時間が経つと忘れてしまうものだ…

これを作ったのが、8月ごろ(お盆休み返上で作った)ですが、その時学んだ内容をすっかりと忘れてしまいました.. ..

色々思い出しながらの執筆です。

やはり、常日頃からコードを書いたり学んでいないと忘れてしまいます。。

今回は自分の復習用に書いてみて、理解を深められました。

ブログの執筆+プログラミングの復習+成果物のアウトプットで、一石三鳥にもなるので、作ったものはどんどん公開していきたいと考えています。

ソースコードの解説も、だれがみても分かるように、どこかの機会で執筆したいなぁ〜。

次回は、JQueryのソースコードを取り扱う予定です。

※参考文献

こちらの本は、kindle unlimitedで読めますので、興味ある方は確認してみて下さい!