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++;
	 }
	}

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

という意味になるッピ!

ユウキ
ユウキ

なるほど!

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

うさタブ
うさタブ

少し休憩するッピよ~!

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

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

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

ユウキ
ユウキ

うーん・・・

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

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

アイカ
アイカ

そうね・・・わたしも

先生やうさタブさんにすぐに聞ける環境じゃないから

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

ユウキ
ユウキ

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

うさタブ
うさタブ

フムフム!

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

アイカ
アイカ

そんなのあるのか?

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

うさタブ
うさタブ

それなら、やっぱり一番安心自宅近所の教室がよいッピ!

うさタブ
うさタブ
テレビや雑誌に紹介された超有名教室
QUREOプログラミング教室とかどうッピか?

うさタブ
うさタブ

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

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

うさタブ
うさタブ

全国2500教室もあるから、

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

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

ユウキ
ユウキ

なんだこれ! スゲーなっ

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

アイカ
アイカ

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

うさタブ
うさタブ
キュレオプログラミング教室は、
アメーバブログやアベマTV・バンドリをプロディースしている
サイバーエージェント」のグループ会社で、確かな実績があるッピ!

うさタブ
うさタブ

オンラインで授業を受けるなら

Tech Kids Online Coachingがオススメッピ!

こっちもサイバーエージェントのグループ会社が運営してるッピ!

教室名 対象 学習言語 教室場所 無料体験・カウンセリング
 

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

小学2年生〜中学3年生 Scratch
HTML/CSS
JavaScript
全国各地
教室
無料体験◯
 

Tech Kids Online Coaching

小学1年生〜中学3年生 Scratch
C++
Unity
渋谷
またはオンライン
無料体験◯
 

Udemy

社会人 HTML/CSS
JavaScript
Python
講座購入
ブラウザ
アプリ
サンプル等◯
うさタブ
うさタブ

パパやママ、お兄ちゃんお姉ちゃん
就活や転職で役立つプログラミング知識を身につけたいなら
Udemy】で講座のコースを買ってみるのもオススメッピ!

動画付きの魅力的な教材が格安で、好きな時間に学べるッピ~

うさタブ
うさタブ

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

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

ユウキ
ユウキ

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

アイカ
アイカ

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

スポンサーリンク

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

ユウキ
ユウキ

うーん・・・

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

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

アイカ
アイカ

そうね・・・わたしも

先生やうさタブさんにすぐに聞ける環境じゃないから

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

ユウキ
ユウキ

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

うさタブ
うさタブ

フムフム!

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

アイカ
アイカ

プログラミング教室??

アイカ
アイカ

そんなのあるのか?

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

うさタブ
うさタブ

プログラミング教室は、やっぱり安心の近所の教室ッピ!

うさタブ
うさタブ

テレビや雑誌に紹介された超有名教室

プログラミング教室数国内No.1!「QUREOプログラミング教室」
とかどうッピか?

うさタブ
うさタブ

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

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

うさタブ
うさタブ

全国2500教室もあるから、

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

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

ユウキ
ユウキ

なんだこれ! スゲーなっ

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

アイカ
アイカ

そんなものがあるのね

うさタブ
うさタブ
「QUREOプログラミング教室」は、
アメーバブログやアベマTV・バンドリをプロディースしている
サイバーエージェント」のグループ会社で、実績があるッピ!

うさタブ
うさタブ

オンラインで授業を受けるなら

Tech Kids Online Coachingがオススメッピ!

こっちもサイバーエージェントのグループ会社が運営してるッピ!

教室名 対象 学習言語 無料体験・カウンセリング
 

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

小学2年生〜中学3年生
教室で授業を受けたい方
Scratch
C++
JavaScript
無料体験◯
 

Tech Kids Online Coaching

小学生~中学生
オンライン授業を受けたい方
Unity
C++
Scratch
無料体験◯
Udemy
社会人
講座コースで勉強したい人向け
HTML/CSS
JavaScript
Python
サンプル等◯

うさタブ
うさタブ

パパやママ、お兄ちゃんお姉ちゃん
就活や転職で役立つプログラミング知識を身につけたいなら
Udemy】で講座のコースを買ってみるのもオススメッピ!

動画付きの魅力的な教材が格安で、好きな時間に学べるッピ~

うさタブ
うさタブ

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

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

ユウキ
ユウキ

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

アイカ
アイカ

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

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