![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
今回ぱパズルゲームを作るッピ~!
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_謎.png)
パズルゲーム??
あのバラバラの絵を戻すやつ?
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
その通りッピ!
でも今回は【文字の入れ替え】パズルを作るッピよ~!
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
作るのは《徳川将軍の入れ替えパズル》ッピ!
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_汗.png)
なんだかゲームというより勉強みたいだな~
このプログラムのコード
<!-- 見えない部分 -->
<html>
<head>
<script src="http://code.jquery.com/jquery.min.js"></script>
<style>
/* CSSのデザインです */
ol {
margin: auto;
width: 50%;
text-align: center;}
li {
padding: 5px;
margin: 2px;
background-color: #F0F0F0;
border: 2px solid #666;}
</style>
<!-- ↓この下にピースのデータを入力してね!↓ -->
<script>
//ピース情報
let puzzle = ['家康','秀忠','家光','家綱','綱吉','家宣','家継','吉宗','家重','家治','家斉','家慶','家定','家茂','慶喜',];
let barabara = [];
let N = Math.floor( Math.random() * puzzle.length );
//HTMLの書き出し
document.write('<ol>');
//ピースのシャッフル
let i = 0;
let n = 0;
for (i=0 ;i < puzzle.length;){
n = 0;//変数をリセットします
N = Math.floor( Math.random() * puzzle.length );//ランダムで整数を作ります
while(n < puzzle.length){
if (puzzle[N] != barabara[n]){n++;}
else {break;}
}
if (n >= puzzle.length){
document.write('<li draggable="true" ondragstart="before(event)" ondragover="drag(event)" ondrop="after(event)" id="' +i+ '">' + puzzle[N] + '</li>');
barabara.push(puzzle[N]);//入れ替えた番号をリストに記憶
i++;//iにプラス1を追加する
}
}
//olリストを終わります
document.write('</ol><br>');
</script>
</head>
<!-- ↓ここから見える部分↓ -->
<body>
<!-- ↓この下にピースを判別するプログラムを入力してね!↓ -->
<script>
//パズルに文字の代入するための変数です
let copy_txt;
//ドラッグ中の動作・変更前・変更後を決めるプログラムです
function before(event) {
copy_txt = event.target;
event.dataTransfer.setData("text/plain", event.target.innerHTML);
event.dataTransfer.effectAllowed = "move";
}
function drag(event) {
event.preventDefault();
event.dataTransfer.dropEffect = "move";
}
function after(event) {
event.preventDefault();
event.stopPropagation();
copy_txt.innerHTML = event.target.innerHTML;
event.target.innerHTML = event.dataTransfer.getData("text/plain");
//パズルの場所が合っているか判定するためのプログラムです
n = 0;
for (i = 0 ;i < puzzle.length; i++){
if ($('#'+i).text()==puzzle[i]){
$('#'+i).css('background','#ffc0cb');
n++;
}
}
//パズルが完成したかを判定するためのプログラムです
if (n >= puzzle.length){alert('クリア!');}
}
</script>
<!-- ここまで! -->
</body>
</html>
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
今回はこんなゲームを作るッピ!
JavaScriptでパズルゲームを作ろう
- パズルピースの作り方
- パズルのシャッフルのやり方
- パズル移動のプログラム
- パズルのピース位置の正解判定
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
![](https://janken.asotetu.work/wp-content/uploads/2021/05/2020-07-01_611-150x150.jpg)
必要なのはメモ帳とネットが見れるブラウザッピ!
学習のためのサンプルコード
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
まずはピースづくりッピね~!
今回は徳川将軍全員をピースに入れるッピよ~
//ピース情報
let puzzle = ['家康','秀忠','家光','家綱','綱吉','家宣','家継','吉宗','家重','家治','家斉','家慶','家定','家茂','慶喜',];//パズルピースを作ります
//HTMLの書き出し
document.write(puzzle);
<head></head>の中の<script></script>に、↑のデータを入力するッピ!
![メモ帳のデータ](https://janken.asotetu.work/wp-content/uploads/2021/07/2021-07-24_1_1.jpg)
![](https://janken.asotetu.work/wp-content/uploads/2021/07/2021-07-24_2.jpg)
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_笑.png)
お、リストのデータができた!
<!-- 見えない部分 -->
<html>
<head>
<!-- ↓この下にピースのデータを入力してね!↓ -->
<script>
//ピース情報
let puzzle = ['家康','秀忠','家光','家綱','綱吉','家宣','家継','吉宗','家重','家治','家斉','家慶','家定','家茂','慶喜',];//パズルピースを作ります
//HTMLの書き出し
document.write(puzzle);
</script>
</head>
<!-- ↓ここから見える部分↓ -->
<body>
<!-- ↓この下にピースを判別するプログラムを入力してね!↓ -->
<script>
</script>
<!-- ここまで! -->
</body>
</html>
リスト配列でピースを作る
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
let リスト名 = ['リスト配列名1','リスト配列名2',];
これでリストを作るッピ!
このリストが《パズルピース》になるッピよ!
document.write( 変数名 ); で作ったリストをHTMLに書き出す
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
document.write(書き出したい変数);
document.writeで文字を書き出すことができるッピ!
変数じゃなく《文字をそのまま》書き出したい場合は、document.write(“文字列”);と入力するッピ!
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
(“ ”)の “ “ がポイントッピよ~!
パズルをシャッフルする下準備
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
次はパズルをシャッフルしてリストを書き出すッピよ~
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
まずはピース情報の<script></script>に
let puzzle = ['家康','秀忠','家光','家綱','綱吉','家宣','家継','吉宗','家重','家治','家斉','家慶','家定','家茂','慶喜',];//パズルピースを作ります
let barabara = [];//バラバラにしたピースの順番をここに記録します
let N = Math.floor( Math.random() * puzzle.length );//乱数を作ります
//HTMLの書き出し
document.write('<ol>');
//ピースのシャッフル
let i = 0;//パズルピースを乱数でシャッフルするための変数です
let n = 0;//パズルピースがすでに記録されてものか判定するための変数です
と追加するッピ!
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_笑強.png)
このMath.floor( Math.random() * puzzle.length );
で乱数を作るんだよな~
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
その通りッピ!
let N = Math.floor( Math.random() * puzzle.length );
という意味ッピよ~
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
次に
document.write(puzzle);
を
document.write('<ol>');
に変えるッピ!
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
最後に
let i = 0;
let n = 0;
と入力するッピ!
これがピースをシャッフルするための準備になるッピよ~
<!-- 見えない部分 -->
<html>
<head>
<!-- ↓この下にピースのデータを入力してね!↓ -->
<script>
let puzzle = ['家康','秀忠','家光','家綱','綱吉','家宣','家継','吉宗','家重','家治','家斉','家慶','家定','家茂','慶喜',];//パズルピースを作ります
let barabara = [];//バラバラにしたピースの順番をここに記録します
let N = Math.floor( Math.random() * puzzle.length );//乱数を作ります
//HTMLの書き出し
document.write('<ol>');
//ピースのシャッフル準備
let i = 0;//パズルピースを乱数でシャッフルするための変数です
let n = 0;//パズルピースがすでに記録されてものか判定するための変数です
</script>
</head>
<!-- ↓ここから見える部分↓ -->
<body>
<!-- ↓この下にピースを判別するプログラムを入力してね!↓ -->
<script>
</script>
<!-- ここまで! -->
</body>
</html>
パズルを実際にシャッフルして書き出す
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
次にパズルを実際にシャッフルして書き出すコードッピ!
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_汗.png)
なんだか難しそうだなぁ~
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
安心するッピ!
このうさタブ、ユウキくんがわかるまで付き合うッピよ~!
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_困.png)
スパルタじゃんそれ!
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
それでは
一気にシャッフルのプログラムを公開するッピネ~!
ピースシャッフルのプログラム
//ピースのシャッフル
let i = 0;//パズルピースを乱数でシャッフルするための変数です
let n = 0;//パズルピースがすでに記録されてものか判定するための変数です
for (i=0 ;i < puzzle.length;){//パズルのピース番号全部までこのプログラムを続けます
n = 0;//変数をリセットします
N = Math.floor( Math.random() * puzzle.length );//乱数を作ります
while(n < puzzle.length){//パズルピースの数よりnが小さければ以下のプログラムを繰り返します
if (puzzle[N] != barabara[n]){n++;}//乱数で決めたピースナンバー(puzzle[N])が、もしまだ登録されていないピース番号(!= barabara[n])ならnにプラス1をしてピースを登録します
else {break;}//登録しているのならキャンセル
}
if (n >= puzzle.length){//変数nのナンバーがパズルのピース番号以上になったら
document.write('<li id="' +i+ '">' + puzzle[N] + '</li>');//olを書き出します
barabara.push(puzzle[N]);//入れ替えた番号をリストに記憶
i++;//iにプラス1を追加する
}
}
//olリストを終わります
document.write('</ol><br>');
<!-- 見えない部分 -->
<html>
<head>
<!-- ↓この下にピースのデータを入力してね!↓ -->
<script>
let puzzle = ['家康','秀忠','家光','家綱','綱吉','家宣','家継','吉宗','家重','家治','家斉','家慶','家定','家茂','慶喜',];//パズルピースを作ります
let barabara = [];//バラバラにしたピースの順番をここに記録します
let N = Math.floor( Math.random() * puzzle.length );//乱数を作ります
//HTMLの書き出し
document.write('<ol>');
//ピースのシャッフル
let i = 0;//パズルピースを乱数でシャッフルするための変数です
let n = 0;//パズルピースがすでに記録されてものか判定するための変数です
for (i=0 ;i < puzzle.length;){//パズルのピース番号全部までこのプログラムを続けます
n = 0;//変数をリセットします
N = Math.floor( Math.random() * puzzle.length );//乱数を作ります
while(n < puzzle.length){//パズルピースの数よりnが小さければ以下のプログラムを繰り返します
if (puzzle[N] != barabara[n]){n++;}//乱数で決めたピースナンバー(puzzle[N])が、もしまだ登録されていないピース番号(!= barabara[n])ならnにプラス1をしてピースを登録します
else {break;}//登録しているのならキャンセル
}
if (n >= puzzle.length){//変数nのナンバーがパズルのピース番号以上なら
document.write('<li id="' +i+ '">' + puzzle[N] + '</li>');//olを書き出します
barabara.push(puzzle[N]);//入れ替えた番号をリストに記憶
i++;//iにプラス1を追加する
}
}
//olリストを終わります
document.write('</ol><br>');
</script>
</head>
<!-- ↓ここから見える部分↓ -->
<body>
<!-- ↓この下にピースを判別するプログラムを入力してね!↓ -->
<script>
</script>
<!-- ここまで! -->
</body>
</html>
![](https://janken.asotetu.work/wp-content/uploads/2021/07/2021-07-24_3.jpg)
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_笑強.png)
おおお! なんか一気に増えた~!
しかもバラバラに表示されてるぞ~!
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
ではでは、
ここからコードの解説をするッピ!
バラバラのピースを作る下準備
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
まず
for (i=0 ;i < puzzle.length;){ 命令文 }
でパズルのピース分のプログラムの命令を繰り返すッピ!
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
これは
for (i=0 ;i < puzzle.length;){ 命令文 }
という意味ッピね
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
次のコードはこんな感じッピ
n = 0;//変数をリセットします
N = Math.floor( Math.random() * puzzle.length );//乱数を作ります
これはそのままの意味ッピよ~!
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
次はこのコードッピね!
while(n < puzzle.length){
if (puzzle[N] != barabara[n]){n++;}
else {break;}
}
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
これは
while(n < puzzle.length){
if (puzzle[N] != barabara[n]){n++;}
else {break;}
}
という意味ッピよ~!
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_謎.png)
ん?
どうしてこれがバラバラのピースになるんだ?
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_困.png)
繰り返すっていうのは理解できるんだけど、この
if (puzzle[N] != barabara[n]){n++;}
else {break;}
の意味がわからない・・・
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_ため息.png)
これでどうしてバラバラのパズルが出来上がるんだよ?
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
それはッピね~
この else {break;} の命令文と
次のコード
if (n >= puzzle.length){
document.write('<li id="' +i+ '">' + puzzle[N] + '</li>');
barabara.push(puzzle[N]);
i++;
}
で、バラバラのピース番号を登録して、すでに登録したピースを弾いてるからッピ!
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
このコードは
if (n >= puzzle.length){
document.write(‘<li id=”‘ +i+ ‘”>’ + puzzle[N] + ‘</li>‘);
barabara.push( puzzle[N] );
i++;
}
っていう意味ッピね~
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_謎.png)
どゆこと?
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
つまりこういうことッピ!
//バラバラのパズルピースを作るための【繰り返し】処理----
for (i=0 ;i < puzzle.length;){
n = 0;
N = Math.floor( Math.random() * puzzle.length );
//選んだピースがすでに登録しているかを判定する処理-----
while(n < puzzle.length){
if (puzzle[N] != barabara[n]){n++;}
else {break;}//★すでに登録している名前なら最初に戻る
}
//登録していなければ登録して書き出す処理--------------
if (n >= puzzle.length){
document.write('<li id="' +i+ '">' + puzzle[N] + '</li>');
barabara.push(puzzle[N]);
i++;
}
}
//↑また最初に戻る-----------------------------------
という意味になるッピ!
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_笑強.png)
なるほど!
なんとなく理解できたかも
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
少し休憩するッピよ~!
今回のプログラムも長くなりそうだッピ!