JavaScript入門講座｜パズルゲームを作ろう | 学んで遊んでジャンケンポン！

うさタブ

今回ぱパズルゲームを作るッピ～！

ユウキ

パズルゲーム？？

あのバラバラの絵を戻すやつ？

うさタブ

その通りッピ！

でも今回は【文字の入れ替え】パズルを作るッピよ～！

うさタブ

作るのは《徳川将軍の入れ替えパズル》ッピ！

ユウキ

なんだかゲームというより勉強みたいだな～

サンプルゲーム

このプログラムのコード

<!-- 見えない部分 -->
<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にプラス１を追加する
	 }
	}

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

うさタブ

今回はこんなゲームを作るッピ！

このプログラムのコード

JavaScriptでパズルゲームを作ろう

JavaScriptでパズルゲームを作ろう

この記事で学べること

パズルピースの作り方
パズルのシャッフルのやり方
パズル移動のプログラム
パズルのピース位置の正解判定

うさタブ

必要なのはメモ帳とネットが見れるブラウザッピ！

学習のためのサンプルコード

うさタブ

まずはピースづくりッピね～！

今回は徳川将軍全員をピースに入れるッピよ～

//ピース情報
 let puzzle = ['家康','秀忠','家光','家綱','綱吉','家宣','家継','吉宗','家重','家治','家斉','家慶','家定','家茂','慶喜',];//パズルピースを作ります

//HTMLの書き出し
 document.write(puzzle);

<head></head>の中の<script></script>に、↑のデータを入力するッピ！

ユウキ

お、リストのデータができた！

これまでのコード

<!-- 見えない部分 -->
<html>
<head>
<!-- ↓この下にピースのデータを入力してね！↓ -->
<script>

//ピース情報
 let puzzle = ['家康','秀忠','家光','家綱','綱吉','家宣','家継','吉宗','家重','家治','家斉','家慶','家定','家茂','慶喜',];//パズルピースを作ります

//HTMLの書き出し
 document.write(puzzle);

</script>
</head>

<!-- ↓ここから見える部分↓ -->
<body>
<!-- ↓この下にピースを判別するプログラムを入力してね！↓ -->
<script>




</script>
<!-- ここまで！ -->
</body>
</html>

リスト配列でピースを作る

うさタブ

 let リスト名 = ['リスト配列名１','リスト配列名２',];

これでリストを作るッピ！

このリストが《パズルピース》になるッピよ！

JavaScript入門講座｜リストを作ろう　～変数の配列を使ってみよう～

JavaScript入門｜リストを作ってみよう｜会話形式で楽しく学べる｜リスト・配列の作り方｜リスト・配列からの内容の取り出し（引数）

document.write( 変数名 ); で作ったリストをHTMLに書き出す

うさタブ

 document.write(書き出したい変数);

　document.writeで文字を書き出すことができるッピ！

　変数じゃなく《文字をそのまま》書き出したい場合は、document.write(“文字列”);と入力するッピ！

うさタブ

(“　”)の　“ “　がポイントッピよ～！

パズルをシャッフルする下準備

うさタブ

次はパズルをシャッフルしてリストを書き出すッピよ～

うさタブ

まずはピース情報の<script></script>に

 let puzzle = ['家康','秀忠','家光','家綱','綱吉','家宣','家継','吉宗','家重','家治','家斉','家慶','家定','家茂','慶喜',];//パズルピースを作ります
 let barabara = [];//バラバラにしたピースの順番をここに記録します
 let N = Math.floor( Math.random() * puzzle.length );//乱数を作ります

//HTMLの書き出し
 document.write('<ol>');

//ピースのシャッフル
 let i = 0;//パズルピースを乱数でシャッフルするための変数です
 let n = 0;//パズルピースがすでに記録されてものか判定するための変数です

と追加するッピ！

ユウキ

このMath.floor( Math.random() * puzzle.length );

で乱数を作るんだよな～

うさタブ

その通りッピ！

let変数を作ります N　名前はNです = Math.floor小数点を切り捨て整数にします( Math.randomランダムで数字を作ります() * puzzle.length変数のpuzzleの容量分を );

という意味ッピよ～

うさタブ

次に

 document.write(puzzle);

を

 document.write('<ol>');

に変えるッピ！

うさタブ

最後に

 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>

パズルを実際にシャッフルして書き出す

うさタブ

次にパズルを実際にシャッフルして書き出すコードッピ！

ユウキ

なんだか難しそうだなぁ～

うさタブ

安心するッピ！

このうさタブ、ユウキくんがわかるまで付き合うッピよ～！

ユウキ

スパルタじゃんそれ！

うさタブ

それでは
一気にシャッフルのプログラムを公開するッピネ～！

ピースシャッフルのプログラム

//ピースのシャッフル
 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にプラス１をしてピースを登録します
	  else {break;}//登録しているのならキャンセル
	}

	if (n >= puzzle.length){//変数nのナンバーがパズルのピース番号以上になったら
	  document.write('<li id="' +i+ '">' + puzzle[N] + '</li>');//olを書き出します
	  barabara.push(puzzle[N]);//入れ替えた番号をリストに記憶   
	  i++;//iにプラス１を追加する
	 }
	}

//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にプラス１をしてピースを登録します
	  else {break;}//登録しているのならキャンセル
	}

	if (n >= puzzle.length){//変数nのナンバーがパズルのピース番号以上なら
	  document.write('<li id="' +i+ '">' + puzzle[N] + '</li>');//olを書き出します
	  barabara.push(puzzle[N]);//入れ替えた番号をリストに記憶   
	  i++;//iにプラス１を追加する
	 }
	}

//olリストを終わります
 document.write('</ol><br>');

</script>
</head>

<!-- ↓ここから見える部分↓ -->
<body>
<!-- ↓この下にピースを判別するプログラムを入力してね！↓ -->
<script>


</script>
<!-- ここまで！ -->
</body>
</html>

ユウキ

おおお！　なんか一気に増えた～！

しかもバラバラに表示されてるぞ～！

うさタブ

ではでは、

ここからコードの解説をするッピ！

バラバラのピースを作る下準備

うさタブ

まず

for (i=0 ;i < puzzle.length;){ 命令文 }

でパズルのピース分のプログラムの命令を繰り返すッピ！

うさタブ

これは

for繰り返してください　 (i=0iの初期値は０です　 ;i < puzzle.length;iがパズルピースの数を上回るまで){ 命令文この命令を }

という意味ッピね

うさタブ

次のコードはこんな感じッピ

n = 0;//変数をリセットします
N = Math.floor( Math.random() * puzzle.length );//乱数を作ります

これはそのままの意味ッピよ～！

うさタブ

次はこのコードッピね！

while(n &lt; puzzle.length){
	  if (puzzle[N] != barabara[n]){n++;}
	  else {break;}
	}

うさタブ

これは

while繰り返してください　(n < puzzle.lengthnがパズルピースの数を上回るまで){
ifもしも (puzzle[N]ランダムで決めた将軍の名前が　 !=ないのなら barabaraバラバラで登録した[n]　パズルの中に　){n++;nに１足してください}
else １つでも存在しているなら{break;　処理を止めてください}
}

という意味ッピよ～！

ユウキ

ん？

どうしてこれがバラバラのピースになるんだ？

ユウキ

繰り返すっていうのは理解できるんだけど、この

if (puzzle[N] != barabara[n]){n++;} 
else {break;}

の意味がわからない・・・

ユウキ

これでどうしてバラバラのパズルが出来上がるんだよ？

うさタブ

それはッピね～

この　else {break;処理を止めて}　の命令文と

次のコード

if (n >= puzzle.length){
  document.write('<li id="' +i+ '">' + puzzle[N] + '</li>');
  barabara.push(puzzle[N]);
  i++;
 }

で、バラバラのピース番号を登録して、すでに登録したピースを弾いてるからッピ！

うさタブ

このコードは

ifもしも (n >= puzzle.lengthnがパズルピース以上の数値なら){
document.write(‘<li id=”‘ +i+ ‘”>’ + puzzle[N]書き出してください　ランダムで選んだパズルピースを + ‘</li>リスト形式で‘);
barabara.pushバラバラのパズル番号に登録してください( puzzle[N]　　ランダムで選んだピースを );
i++;iに１を足してください
}

っていう意味ッピね～

ユウキ

どゆこと？

うさタブ

つまりこういうことッピ！

//バラバラのパズルピースを作るための【繰り返し】処理----
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++;
	 }
	}

//↑また最初に戻る-----------------------------------

という意味になるッピ！