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

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にプラス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>
この記事で学べること
  • パズルピースの作り方
  • パズルのシャッフルのやり方
  • パズル移動のプログラム
  • パズルのピース位置の正解判定
うさタブ
うさタブ

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

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

うさタブ
うさタブ

まずはピースづくりッピね~!

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

//ピース情報
 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 リスト名 = ['リスト配列名1','リスト配列名2',];

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

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

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にプラス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>
ユウキ
ユウキ

おおお! なんか一気に増えた~!

しかもバラバラに表示されてるぞ~!

うさタブ
うさタブ

ではでは、

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

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

うさタブ
うさタブ

まず

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

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

うさタブ
うさタブ

これは

for繰り返してください  (i=0iの初期値は0です  ;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に1足してください}
else 1つでも存在しているなら{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に1を足してください
}

っていう意味ッピね~

ユウキ
ユウキ

どゆこと?

うさタブ
うさタブ

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

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

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

という意味になるッピ!

ユウキ
ユウキ

なるほど!

なんとなく理解できたかも

うさタブ
うさタブ

少し休憩するッピよ~!

今回のプログラムも長くなりそうだッピ!

スポンサーリンク
スポンサーリンク
スポンサーリンク

どうしてもわからない、そんなときは?

ユウキ
ユウキ

うーん・・・

やっぱり、どうしてこーなるか良くワカンナイな~

説明を聞いたすぐはわかったつもりなんだけどさ

アイカ
アイカ

そうね・・・わたしも

すぐに復習できる環境じゃないから

宿題とか困っちゃうわ・・・

ユウキ
ユウキ

他に気軽に教えてくれる先生とかいるといいんだけどな~

うさタブ
うさタブ

フムフム!

そんなときは、プログラミング講座がオススメッピね~

アイカ
アイカ

そんなのあるのか?

ていうかドコいけばいいんだよ

うさタブ
うさタブ

それなら、やっぱり一番安心自宅でできる動画教材がよいッピ!

うさタブ
うさタブ
テレビCMでも話題の有名教材
Udemyとかどうッピか?

 

うさタブ
うさタブ
Udemyは、HTMLからJavaScript
人気の機械学習からUnityゲーム講座まで選び放題ッピ!

うさタブ
うさタブ

買い切り講座だから
いつでも勉強し放題、動画制作や難しいマーケティングなんかも勉強できるッピ~!

ユウキ
ユウキ

へえ~、こんなのがあるのか

うさタブ
うさタブ

ちびっこのみんなは、キュレオプログラミング教室がオススメッピ!

実際の教室で自分以外の同い年と一緒に勉強することで、自分も負けないゾ!と思えておサボりを防ぐことができるッピ!
さらに、クラスのみんなと差をつけてすごいプログラムが作れちゃうッピ

教室名 対象 学習言語 教室場所 無料体験・カウンセリング
Udemy 学生~社会人 Unity
HTML/CSS
JavaScript
MySQL
Python等
オンライン講座
コース買い切り
講座によってサンプル○
Unityゲーム講座アリ
 

「QUREOプログラミング教室」

小学2年生〜中学3年生 Scratch 全国各地
2500教室
無料体験◯
【LITALICOワンダー】 小学1年生〜高校生 Scratch
Unity C#
HTML / CSS
JavaScript
東京都,神奈川,埼玉県,千葉
オンライン
無料体験◯
3Dプリントなどの講座によっては別途料金

ユウキ
ユウキ

よーし、ちょっと体験だけでもやってみるか!

アイカ
アイカ

わたしもさっそくチェックしてみようかな♪

スポンサーリンク

どうしてもわからない、そんなときは?

ユウキ
ユウキ

うーん・・・

やっぱり、どうしてこーなるか良くワカンナイな~

説明を聞いたすぐはわかったつもりなんだけどさ

アイカ
アイカ

そうね・・・わたしも

すぐに復習できる環境じゃないから

宿題とか困っちゃうわ・・・

ユウキ
ユウキ

他に気軽に教えてくれる先生とかいるといいんだけどな~

うさタブ
うさタブ

フムフム!

そんなときは、プログラミング講座がオススメッピね~

アイカ
アイカ

そんなのあるのか?

ていうかドコいけばいいんだよ

うさタブ
うさタブ

それなら、やっぱり一番安心自宅でできる動画教材がよいッピ!

うさタブ
うさタブ
テレビCMでも話題の有名教材
Udemyとかどうッピか?

うさタブ
うさタブ
Udemyは、HTMLからJavaScript
人気の機械学習からUnityゲーム講座まで選び放題ッピ!

うさタブ
うさタブ

買い切り講座だから
いつでも勉強し放題、動画制作や難しいマーケティングなんかも勉強できるッピ~!

ユウキ
ユウキ

へえ~、こんなのがあるのか

うさタブ
うさタブ

ちびっこのみんな、キュレオプログラミング教室を受けて
自分以外の同い年と一緒に勉強することで、自分も負けないゾ!と思えて
おサボりを防ぐことができるッピ!
さらに、クラスのみんなと差をつけてすごいプログラムが作れちゃうッピ

先生やパパママにほめられて、学習効率が最高にグングン↑↑ッピよ~~♪

うさタブ
うさタブ

未来都市キュレオを舞台に、魅力的なキャラクターがたくさん登場する・ゲーム感覚で楽しく学べるプログラミング教室ッピ!

困ったことも先生に直接聞けるのが最高ッピ~!

うさタブ
うさタブ

全国2500教室もあるから、

きっとみんなの近くにも教室があるッピ。

公式サイト近くに教室があるかチェックしてみるとよいッピ!

ユウキ
ユウキ

なんだこれ! スゲーなっ

ゲームみたいにやってるうちに、自然と勉強できてるみたいな感じ?

アイカ
アイカ

そんなものがあるのねっ!

うさタブ
うさタブ

ロボットをプログラミングしてみるなら

LITALICOワンダーがオススメッピ!

JavaScriptも勉強できるッピよ~!

教室名 対象 学習言語 無料体験/教室場所
Udemy 学生~社会人 Unity
HTML/CSS
JavaScript
MySQL
Python等
オンライン講座
講座によってサンプル○
「QUREOプログラミング教室」
小学2年生〜中学3年生 Scratch 教室によって無料体験◯
全国各地の教室
【LITALICOワンダー】 小学1年生〜高校生 Scratch
Unity C#
HTML / CSS
JavaScript
無料体験◯
3Dプリントなどの講座によっては別途料金
東京周辺
オンライン

ユウキ
ユウキ

よーし、ちょっと体験だけでもやってみるか!

アイカ
アイカ

わたしもさっそくチェックしてみようかな♪

JavaScriptJSゲームプログラミング
学んで遊んでジャンケンポン!
タイトルとURLをコピーしました