15パズルを作ってみよう！ - 1 　画面表示。

2023年2月7日 05:32

参考サイトのスライドパズルゲームに自分なりに説明を加えてみます。

基本のHTMLです。CSSとJavaScriptは別ファイルで書いてリンクさせる方法もあります。ひとつのファイルに書いてしまう方が簡単だと思うので全てのコードをひとつのファイルにまとめています。

まず基本のコード。HTMLの基本構造です。CSS(スタイルシート)を書く部分とHTML、JavaScriptを書く部分があります。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
 // CSS を書きます。
  </style>

  <title>8パズル</title>
</head>

<body>
 
// HTMLを書きます。

  <script>

// JavaScriptを書きます。
   
  </script>
</body>

</html>

ゲームのボードを表示する部分をHTMLで書きます。

<div id="panel"></div>

"<div></div>"にCSSで操作するために"id"で"panel"という名前をつけています。この"panel"に紐付けいろいろ指定していきます。

次にJavaScriptを書きます。

 　 window.onload = function () {

      var arr = ['', '1', '2', '3', '4', '5', '6', '7', '8'];

      var panel = document.getElementById('panel');

      for (i = 0; i < 9; i++) {
        var div = document.createElement('div');
        div.textContent = arr[i];
        panel.appendChild(div);
      }
    }

実行すると、

1
2
3
4
5
6
7
8

と表示されます。細かくみていきます。

変数宣言します。
ゲームに使う数字を配列にしてひとまとまりにします。空欄" "を入れて8個の数字を入れています。

 var arr = ['', '1', '2', '3', '4', '5', '6', '7', '8'];

CSSの"id"を使ってJavaScriptで操作できるようにします。これで変数"panel"を使って操作できるようになります。

var panel = document.getElementById('panel');

あとは繰り返し処理で配列の数字を画面表示させます。

  for (i = 0; i < 9; i++) {
        var div = document.createElement('div');
        div.textContent = arr[i];
        panel.appendChild(div);
      }

"i"には0から8まで数字が入っていきます(9回の繰り返し)。

HTMLのタグ<div></div>をつくります。

var div = document.createElement('div');

HTMLのタグ<div></div>に数字を入れていきます。以下のコードが9回繰り返されます。

div.textContent = arr[i];

"i"は0から8が指定されているので配列の値

'', '1', '2', '3', '4', '5', '6', '7', '8'

が順番に表示されることになります。HTMLは以下となります。

<div> </div>
<div>1</div>
<div>2</div>
・
・
・
<div>8</div>

HTMLで表示することができました。

この記事が気に入ったらサポートをしてみませんか？

15パズルを作ってみよう！ - 1 画面表示。

15パズルを作ってみよう！ - 1 　画面表示。