スマホで動かす15パズルについて

学校の授業で取り組んでいます。

元はなかったのですが、完成した時にalertで「完成おめでとうございます！」のようなメッセージを出したいと考えています。

そこで、初心者な私はifで条件を指定してalertを出そうと考えました。
ですが、「シャッフルした後に画像が元に戻ったらalert」「画像1～15が場所1～15の数字と一致したらalert」など考えましたが、タグと書き方が分かりませんでした。

そして初心者なりに調べた結果、《document.getElementsByTagname》というのを見つけて使ってみましたが、案の定だめでした。きちんとした使い方が分かりませんでした。
このソースコードの場合、どのようにパズルが完成したと定義してあげればいいのでしょうか…

ルールに抵触する、丸投げとも思える質問かもしれず申し訳ありませんが、よろしくお願い致します。

JavaScript
1<meta charset="utf-8">
2<meta name="viewport" content="width=device-width">
3
4<script language="JavaScript" type="text/javascript">
5var empty = 15;	//空のピース
6var Imgs = new Array(16);
7
8
9//ピースの入れ替え
10function swap(img1, img2) {
11	var tmp = img1.src;
12	img1.src = img2.src;
13	img2.src = tmp;
14}
15
16//クリックされた位置のピースを動かす
17function check(img) {
18	var udlr = new Array(4); //現在のピースの上下左右
19	var num = parseInt(img.name);
20	udlr[0] = num - 4; //上
21	udlr[1] = num + 4; //下
22	if ((num % 4) != 0) udlr[2] = num - 1; //左
23	if ((num % 4) != 3) udlr[3] = num + 1; //右
24	//隣接する位置が「空」かを調べる
25	for (var i = 0; i < 4; i++) {
26		if (udlr[i] == empty) {
27			//「空」であれば入れ替える
28			swap(img, document.images[udlr[i]]);
29			empty = num;
30		}
31	}
32}
33
34// ピースをランダムに並べ替える
35function shuffleImg(){
36	for (var i = 0; i < 300; i++ ) {
37		imgNum = Math.floor(Math.random() * 16);
38		check(document.images[imgNum]);		
39	}
40}
41
42</script>
43
44</head>
45<body bgcolor="#FFFFFF">
46
47<h3>15パズル</h3>
48<hr>
49<script language="JavaScript" type="text/javascript">
50document.write("<img src='0.jpg' widht=60 ", "height=60 name='0' onclick=check(this)>");
51document.write("<img src='1.jpg' widht=60 ", "height=60 name='1' onclick=check(this)>");
52document.write("<img src='2.jpg' widht=60 ", "height=60 name='2' onclick=check(this)>");
53document.write("<img src='3.jpg' widht=60 ", "height=60 name='3' onclick=check(this)><br>");
54document.write("<img src='4.jpg'  widht=60 ","height=60 name='4' onclick=check(this)>");
55document.write("<img src='5.jpg'  widht=60 ","height=60 name='5' onclick=check(this)>");
56document.write("<img src='6.jpg'  widht=60 ","height=60 name='6' onclick=check(this)>");
57document.write("<img src='7.jpg'  widht=60 ","height=60 name='7' onclick=check(this)><br>");
58document.write("<img src='8.jpg'  widht=60 ","height=60 name='8' onclick=check(this)>");
59document.write("<img src='9.jpg'  widht=60 ","height=60 name='9' onclick=check(this)>");
60document.write("<img src='10.jpg'  widht=60 ", "height=60 name='10' onclick=check(this)>");
61document.write("<img src='11.jpg'  widht=60 ",	"height=60 name='11' onclick=check(this)><br>");
62document.write("<img src='12.jpg'  widht=60 ",	"height=60 name='12' onclick=check(this)>");
63document.write("<img src='13.jpg'  widht=60 ",	"height=60 name='13' onclick=check(this)>");
64document.write("<img src='14.jpg'  widht=60 ",	"height=60 name='14' onclick=check(this)>");
65document.write("<img src='15.jpg'  widht=60 ",	"height=60 name='15' onclick=check(this)>");
66</script>
67
68<form name="myForm"><p>
69<input name="shuffle" type="button" value="シャッフル" onclick="shuffleImg()" style="width:120px;height:40px;font-size:15px">
70<input name="shuffle" type="button" value="リセット" onclick="location.href='15pazuru - 見本.txt.html'" style="width:120px;height:40px;font-size:15px">
71
72</p></form>

kei344

2019/12/22 17:12

ご自身で試されたコードを質問文に追記し、「何」が「どのように」わからないのか、コードのどの部分で詰まっているのかなどを具体的に追記されたほうが回答が望めると思います。

user_nyanko

2019/12/23 07:03

反応が遅くなり申し訳ありません。お返事ありがとうございます。追記しようとしたところ、自分でも分からないところが曖昧だということに気づきました。ですので、もっとこのソースコードについて考えてから再度質問しようと思います。アドバイスありがとうございます。次回質問する際に活かしたいと思います。

行動規範の内容に同意します

回答1件

ベストアンサー

まず、学校の授業なら先生に聞いて下さい。
先生に聞いても、いまいち理解出来ないの所があれば、質問してきて下さい。

投稿2019/12/23 01:09

stdio

総合スコア3307

user_nyanko

2019/12/23 07:08

反応が遅くなり申し訳ありません。お返事ありがとうございます。聞けない状況という前提を書かず誤解を招いてしまい、申し訳ありませんでした。学校の先生は「コードを一から考えるのも醍醐味だ」との事で教えてもらえず、最終的にここに至りました。ですが、自分でも分からないところが曖昧だということに気づきました。ですのでもっと具体的な疑問が生まれたときに、改めて質問させていただこうと思います。ご回答ありがとうございました。