読者です 読者をやめる 読者になる 読者になる

転がる先の杖

サラリーマンの傍、自力で食っていけるよう奮闘し、己を磨く日々を綴ります。 スノボの大会出場を目指し、オフトレに精を出してます!

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

スポンサーリンク

数字合わせパネル

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

過去にJavaScriptの課題にて、Canvasの機能を使って何か作るというものがありました。その際、サンプルゲームを引用して、1~15までを順番に並べる数字合わせゲームを作ってました。

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

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

HTMLコードはこちら

<!DOCTYPE html>
<html>
 <head>
 <title>Arrange numbers</title>
 <meta charset-"UTF-8">
 <link href="game.css" rel="stylesheet" type="text/css">
 <script type = "text/javascript" src="game.js"></script>

 </head>
 <body onload="it()">
  <div id="gameUI">
   <div id="gameIntro">
    <h1>Arrange numbers</h1>
    <img src="??" width="400" height="350">
     <p>数字を左上から右へ、1~15まで順番に並べるゲームです<br>
     空きパネルの隣にある数字をクリックすると、位置が入れ替わります<br>
     <p id="gamePlay" class="button" href="">Play</p>
    </div>

    <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>

    <div id="clearmain">
     <img src="???" width="400" height="350">
    </div>
   </div>
   <canvas id="gameCanvas" width="800" height="600">
   </canvas>
  </div>

  〜ここからJSの記述になります。〜

  <script>
  "use strict";

  var tiles = [];

  var count = -2;
  var timerID = setInterval('countup()',1000);

  function countup() {
    if (count > -2){
    count++;
    var time = "TIME : " + count;
    document.getElementById("showtime").innerHTML = time;
    }
   }

  function it() {
    var table = document.getElementById("table");

    for (var i = 0; i < 4; i++) {
      var tr = document.createElement("tr");
    for (var j = 0; j < 4; j++) {
      var td = document.createElement("td");
      var index = i*4 + j;
      td.className = "tile";
      td.index = index;
      td.value = index;
      td.textContext = index == 0? "":index;
      td.onclick = click;
      tr.appendChild(td);
      tiles.push(td);
    }
    table.appendChild(tr);

   }

   for (var i = 0; i<1000; i++) {
     click({ srcElement: {index: Math.floor(Math.random()*16)}})
     }
   }

   function click(e) {
    var i = e.srcElement.index;
    var counter = 0;

    if(i - 4>=0 && tiles[i - 4].value == 0) {
      swap(i,i - 4);
    } else if (i + 4< 16 && tiles[i + 4].value == 0) {
      swap(i,i + 4);
    } else if (i % 4!= 0 && tiles[i - 1].value == 0) {
      swap(i,i - 1);
    } else if (i % 4!= 3 && tiles[i + 1].value == 0) {
      swap(i,i + 1);
    }

    if(tiles[0].index+1 == tiles[0].value) {
     counter++;
      }

    if(tiles[1].index+1 == tiles[1].value) {
     counter++;
      }

    if(tiles[2].index+1 == tiles[2].value) {
     counter++;
      }

    if(tiles[3].index+1 == tiles[3].value) {
     counter++;
      }

    if(tiles[4].index+1 == tiles[4].value) {
     counter++;
      }

    if(tiles[5].index+1 == tiles[5].value) {
     counter++;
      }

    if(tiles[6].index+1 == tiles[6].value) {
     counter++;
      }

    if(tiles[7].index+1 == tiles[7].value) {
     counter++;
      }

    if(tiles[8].index+1 == tiles[8].value) {
     counter++;
      }

    if(tiles[9].index+1 == tiles[9].value) {
     counter++;
      }

    if(tiles[10].index+1 == tiles[10].value) {
     counter++;
      }

    if(tiles[11].index+1 == tiles[11].value) {
     counter++;
      }

    if(tiles[12].index+1 == tiles[12].value) {
     counter++;
      }

    if(tiles[13].index+1 == tiles[13].value) {
     counter++;
      }

    if(tiles[14].index+1 == tiles[14].value) {
     counter++;
      }

    if(tiles[15].index+1 == tiles[15].value) {
     counter++;
      }

    if (counter < 12) {
     document.getElementById("gameComplete").style.display=""none";
     } else if (counter > 12) {
     clearInterval(timerID);
     document.getElementById("gameComplete").style.display="block";
     }
   }

   function swap(i,j) {
    var tmp = tiles[i].value;
    tiles[i].textContent = tiles[j].textContent;
    tiles[i].value = tiles[j].value;
    tiles[j].textContent = tmp;
    tiles[j].value = tmp;
   }

   </script>

  </body>
</html>

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の用語解説

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で読めますので、その方がお金をかけずに読めます!