JavaScript入門講座｜パズルゲームを作ろう | ページ 2

パズルゲームを作ろう２

パズルゲームを作ろう２

うさタブ

最後の山場ッピ！

クリックしたあとパズルを入れ替えるプログラムを書くッピ！

うさタブ

出し惜しみはなしッピ！

一気に公開するッピよ～

<!-- 見えない部分 -->
<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>

コードの解説

うさタブ

ここからは上のコードを解説するッピよ～！

パズルを入れ替えるためのベースプログラム（ jquery ）を組み込む

うさタブ

まずは入れ替えるためにベースのプログラムセットを入れるッピ！

このJqueryを使えば、id( # ) や class( . )の要素の変更が楽になるッピよ～

<script src="http://code.jquery.com/jquery.min.js"></script>

というコードを<head></head>に入力するッピ！

JavaScript入門講座｜jQueryの使い方を学ぼう

｜ jQueryとは？｜ jQueryを使うための準備｜基本の書き方｜ jQueryでできること見本｜よく使うメッソド一覧｜キャラの会話で楽しく学べる

パズルを入れ替えるためのカラのっぽの箱を用意する

うさタブ

今度はパズルを入れる箱を用意するッピ

<body><body>に<script></script>を入れてプログラムを組むッピよ～

let copy_txt;

これで 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");

という部分ッピね～

うさタブ

このプログラムを詳しく解説するッピ！

ドラッグ前（パズルピース選択時）のプログラム

うさタブ

最初はパズルのピースを選択するプログラムッピ！

functionプログラムセット before(event引数（代入変数）event) {
copy_txtカラの箱は = event.target引数で入力した場所になります;
event.ドラッグしたdataTransfer.要素のデータのsetData内容を変更します(“text/plain”対象は文章です, event.target.場所は引数で指定したinnerHTMLHTMLの部分です);
event.ドラッグした側がdataTransfer.“move” というeffectAllowedキーワードを持っていれば = “move”データを輸送できます;
}

という意味ッピ！

ドラッグ中（パズルピースを動かす）プログラム

うさタブ

次はパズルのピースを動かす（ドラッグする）プログラムッピ！

functionプログラムセット drag(event引数) {
event.preventDefaultデフォルトのプログラムを停止します();
evente.ドラッグされた側がdataTransfer.“move”というdropEffect=キーワードを持っていれば “move”データを格納できます;
}

という意味ッピね！

ユウキ

この

event.preventDefault();デフォルトのプログラムを停止するって？

うさタブ

もともと本来こうなる～

っていうプログラムを停止して、新しい情報を上書きするのに重要になる

ッピ！

うさタブ

このあとの書き換えプログラムに必要ッピよ～

ドラッグ後（パズルピース変更）プログラム

うさタブ

最後にパズルピースを動かしたあと変更するプログラムッピ！

functionプログラムセット after(event引数) {
event.preventDefaultデフォルトのプログラムを停止します();
event.stopPropagationその他のイベントプログラムも停止します();
copy_txt.innerHTMLカラの箱のHTML部分は = event.target.innerHTML選択した部分のHTMLになります;
event.target.innerHTML選択したHTML部分は = event.ドラッグ前にdataTransfer.選択したgetDataデータへ(“text/plain”);変更されます

うさタブ

そして忘れてはいけないのが、リストの変更ッピ！

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にプラス１を追加する
 }

最初にリストを作る部分の<li></li>タグを↑に書き換えて

ドラッグできるように変更したッピ！

うさタブ

これは

document書き出して.writeください(
‘<li　<li>タグです　 draggable=”true” マウスで移動を許可しますondragstart　ドラッグ前は=”before(event)before(引数)を動作して” ondragoverドラッグ中はdrag(引数)を=”drag(event)動作してください“ondrop=”after(event)”　ドラッグしたあとにはafter(引数)を動作してください id=”‘ +i+ ‘”　この<li>の住所は>’ + puzzle[N]iという変数+puzzle[N]（乱数パズル）番号です + ‘</li>’
);

という意味ッピよ～！

ユウキ

なるほどな～

難しいけどなんとなくわかったかも？

パズルが合っているか判定するプログラム

うさタブ

プログラムが合っているか判定するには if文 を使うッピ！

//パズルの場所が合っているか判定するためのプログラムです
	n = 0;
	for (i = 0 ;i < puzzle.length; i++){
	  if ($('#'+i).text()==puzzle[i]){
		$('#'+i).css('background','#ffc0cb');
		n++;}
	}
//パズルが完成したかを判定するためのプログラムです
	if (n >= puzzle.length){alert('クリア！');}

というコードっピね～！

うさタブ

これは

n= 0;変数 n を初期化します
for繰り返してください (i = 0 ;i < puzzle.length; i++パズルピースの番号分を){
ifもしも ($(‘#’+i).text()id =”<li>に振り分けた数字番号” 中の文章が ==　以下と一致していれば　puzzle[i]パズルピースの本来あるべき番号（最初のリスト）){
$(‘#’+i).css正解した部分の見た目　(‘background’,背景を‘#ffc0cb’赤にします);
n++変数 n に１を追加します;}
}

if (n >= puzzle.length)もしも変数 n がパズルピース以上なら{alert　お知らせします(‘クリア！’);}

とい意味ッピ！

JavaScript入門講座｜プログラムの分かれ道　～if文・条件分岐について学ぼう～

JavaScript入門｜if文・条件分岐について学ぼう｜会話形式で楽しく学べる｜if文（プログラムの分かれ道）｜else文（条件外の設定）

見た目をわかりやすいように変更する

うさタブ

最後は見た目をもう少しわかりやすく変更するッピね～

最初の<head></head>にあるコードに注目するッピ！

<style>
/* CSSのデザインです */
 ol {margin: auto;
    width: 50%;
    text-align: center;}

 li {list-style-type: none;
    padding: 5px;
    margin: 2px;
    background-color: #F0F0F0;
    border: 2px solid #666;}
</style>

というコードッピよ～

うさタブ

これはCSSといって、WEBページの見た目を変えるプログラムッピ！

<style> 見た目を変更します
ol番号リスト {
margin: auto;余白は自動で取ってください
width: 50%;横幅は画面の50%です
text-align: center;文章は真ん中に設置してください}

liリストの中身です {
padding: 5px;
内側の余白は5pxです
margin: 2px;外側の余白は2pxです
background-color: #F0F0F0;背景色をうす紅色にしてください
border枠線をつけます: 2px長さは2px solid種類は１本線 #666;色は灰色です}
</style>

という意味ッピよ～

ユウキ

見た目ってこうやって変えるんだな～

CSS入門講座｜CSSについて学ぼう

小学校からはじめる CSS入門講座｜CSSについて学ぼう｜これだけは覚えたい基本のキ！｜CSSってなに？｜IDとclass ｜HTMLファイルでのCSS設定｜キャラの会話で楽しく学べる

うさタブ

CSSは必ず<head></head>の中に書くッピよ！

間違ったらそのままホームページに文字として書かれてしまうッピネ

うさタブ

それじゃあユウキくん、さっそくプログラムを組むッピ！

ユウキ

オッケー！

ユウキ

できたぁ～！

うさタブ

ユウキくんすごいッピ！
プログラマーの素質があるッピよ～

全体のコードの確認

<!-- 見えない部分 -->
<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){//パズルピースの数よりnが小さければ以下のプログラムを繰り返します
	  if (puzzle[N] != barabara[n]){n++;}//乱数で決めたピースナンバー（puzzle[N]）が、もしまだ登録されていないピース番号（!= barabara[n]）ならnにプラス１をします
	  else {break;}//登録しているのならキャンセル
	}

	if (n >= puzzle.length){//変数nのナンバーがパズルのピース番号以上になったら
	  document.write('<li draggable="true" ondragstart="before(event)" ondragover="drag(event)" ondrop="after(event)" id="' +i+ '">' + puzzle[N] + '</li>');//ulを書き出します
	  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]){//もし#(ID)+i(今計算している数)の数値のある文字列とパズルピース番号の文字列と等しいとき
		$('#'+i).css('background','#ffc0cb');//背景を赤くします
		n++;//nに+1を加えます
	  }
	}
//パズルが完成したかを判定するためのプログラムです
	if (n >= puzzle.length){alert('クリア！');}//nがパズルピース番号より大きいとき、クリアと表示します
    }
</script>
<!-- ここまで！ -->
</body>
</html>

学習のまとめ

パズルピースはリスト配列で作る
パズルのシャッフルはMath.floor( Math.random() * パズルピース変数 )とで乱数を作って行う
パズルをバラバラに登録するリストを新たに作り、変数.push(乱数で選んだピース)で登録する
パズル移動のプログラムは DataTransfer.setData/dataTransfer.effectAllowed/dataTransfer.dropEffect/event.dataTransfer.getDataなどの関数を使って行う
パズルのピース位置の正解判定は if文 で判定できる