![見出し画像](https://assets.st-note.com/production/uploads/images/97244006/rectangle_large_type_2_fdbbdb45af6e04b6ac0c83f0abc1ea55.png?width=1200)
15パズルを作ってみよう! - 1 画面表示。
参考サイトのスライドパズルゲームに自分なりに説明を加えてみます。
基本の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で表示することができました。
この記事が気に入ったらサポートをしてみませんか?