Turtle Cafe 2/Javaプログラミング入門/ゲームを作ろう！

10 ゲームを作ろう！

10.1 学習目標
10.2 キーボード入力の判定
10.3 マウス入力の判定
10.4 あたり判定
- 10.4.1 ２つのオブジェクトのあたり判定
- 10.4.2 座標とオブジェクトのあたり判定
10.5 練習問題

10.1 学習目標

キーボード、マウスを使ってユーザと対話するプログラムを作れるようになる
オブジェクト同士の当たり判定を取得し、オブジェクトが連携して動作するプログラムを作れるようになる

10.2 キーボード入力の判定

10.2.1 キーコードの取得

key()命令を使うと、いま押されているキーボードの番号（キーコード）を調べることができます。

次のプログラムは、左キーを押すと，車が左に動くプログラムです。

リスト 10.2.1.1 HandleKey.java

  1: /*
  2:  * キーに対応して車が動くプログラム
  3:  * 
  4:  * 2003/06/23 Yoshiaki Matsuzawa
  5:  * 2012/11/07 改訂 Yoshiaki Matsuzawa 
  6:  */
  7: public class HandleKey extends Turtle {
  8: 
  9: 	// 起動処理
 10: 	public static void main(String[] args) {
 11: 		Turtle.startTurtle(new HandleKey());
 12: 	}
 13: 
 14: 	// タートルを動かす処理
 15: 	public void start() {
 16: 
 17: 		hide();// タートルを消す
 18: 		ImageTurtle car = new ImageTurtle("car.gif");// 車を生成
 19: 
 20: 		{// アニメーションループ
 21: 			while (true) {
 22: 				// --- 待つ ---
 23: 				sleep(0.025);
 24: 
 25: 				{// 一コマの処理をする
 26: 					// 左キーが押されていたら，車を動かす
 27: 					int x = car.getX();
 28: 					int y = car.getY();
 29: 					if (key() == 37) { // 左
 30: 						car.warp(x - 5, y);
 31: 					}
 32: 				}
 33: 
 34: 				// --- 再描画 ---
 35: 				update();
 36: 			}
 37: 		}
 38: 	}
 39: 
 40: }

ここをクリックすると、プログラムをダウンロードできます。

下のボタンを押すと、HandleKeyプログラムが実行できます。

キー入力を受け取る新しい命令

key()

いま押されているキーボードの番号（キーコード）を調べることができます。

何も押されていない時は、キーコードが -1 になります。

10.2.2 キーコードを調べる

キーボードのキーに対応するキーコードを調べるには、次のプログラムを使うと良いでしょう。

リスト 10.2.2.1 CheckKeycode.java

  1: /*
  2:  * キー番号を調べるプログラム
  3:  * 
  4:  * 2003/06/23 Yoshiaki Matsuzawa
  5:  * 2012/11/07 改訂 Yoshiaki Matsuzawa
  6:  */
  7: public class CheckKeycode extends Turtle {
  8: 
  9: 	// 起動処理
 10: 	public static void main(String[] args) {
 11: 		Turtle.startTurtle(new CheckKeycode());
 12: 	}
 13: 
 14: 	// タートルを動かす処理
 15: 	public void start() {
 16: 
 17: 		hide();// タートルを消す
 18: 		TextTurtle taro = new TextTurtle("");// 文字(太郎)を生成
 19: 
 20: 		{// アニメーションループ
 21: 			while (true) {
 22: 				// --- 待つ ---
 23: 				sleep(0.1);
 24: 
 25: 				{ // 一コマの処理をする
 26: 					int keycode = key(); // 今押されているキーを取得する
 27: 					taro.text(keycode); // 押されているキー番号を文字にして表示する
 28: 				}
 29: 
 30: 				// --- 再描画 ---
 31: 				update();
 32: 			}
 33: 		}
 34: 	}
 35: 
 36: }

ここをクリックすると、プログラムをダウンロードできます。

下のボタンを押すと、CheckKeycodeプログラムが実行できます。

10.2.3 個別にキーが押されているかどうかを調べて，同時押しに対応する

key()命令は、最後に押されたキーを調べるだけで、同時押しに対応できません。同時押しに対応するに、今何が押されているかを個別に調べる必要があります。そのようなときは，keyDown命令を使います。

リスト 10.2.3.1 HandleKeyDown.java

  1: /*
  2:  * キーに対応して車が動くプログラム2 
  3:  * (押してるかどうか調べて，同時押しに対応できるバージョン)
  4:  * 
  5:  * 2011/11/22 Yoshiaki Matsuzawa 
  6:  * 2012/11/07 改訂 Yoshiaki Matsuzawa
  7:  */
  8: public class HandleKeyDown extends Turtle {
  9: 
 10: 	// 起動処理
 11: 	public static void main(String[] args) {
 12: 		Turtle.startTurtle(new HandleKeyDown());
 13: 	}
 14: 
 15: 	// タートルを動かす処理
 16: 	public void start() {
 17: 
 18: 		hide();// タートルを消す
 19: 		ImageTurtle car = new ImageTurtle("car.gif"); // 車を生成
 20: 
 21: 		{// アニメーションループ
 22: 			while (true) {
 23: 				// --- 待つ ---
 24: 				sleep(0.025);
 25: 
 26: 				{ // 一コマの処理をする
 27: 					{// 左キーの処理
 28: 						if (keyDown(37)) { // 左
 29: 							int x = car.getX();
 30: 							int y = car.getY();
 31: 							car.warp(x - 5, y);
 32: 						}
 33: 					}
 34: 					{// 上キーの処理
 35: 						if (keyDown(38)) { // 上
 36: 							int x = car.getX();
 37: 							int y = car.getY();
 38: 							car.warp(x, y - 5);
 39: 						}
 40: 					}
 41: 				}
 42: 				// --- 再描画 ---
 43: 				update();
 44: 			}
 45: 		}
 46: 	}
 47: 
 48: }

ここをクリックすると、プログラムをダウンロードできます。

下のボタンを押すと、HandleKeyDownプログラムが実行できます。

キー入力を受け取る新しい命令

keyDown([キーコード]): キーコードで指定されてキーボードが押されているかどうかを調べます。必ず、if文の条件文の中に書いて下さい。

10.3 マウス入力の判定

10.3.1 マウスの位置を調べる

mouseX()、mouseY() 命令を使うと，マウスが今どこにいるのかを調べることができます。

下のプログラムは、マウスの位置に車が移動するプログラムです。

リスト 10.3.1.1 HandleMouse.java

  1: /*
  2:  * マウスの位置に車が動くプログラム
  3:  * 
  4:  * 2003/06/23 Yoshiaki Matsuzawa
  5:  * 2012/11/07 改訂 Yoshiaki Matsuzawa 
  6:  */
  7: public class HandleMouse extends Turtle {
  8: 
  9: 	// 起動処理
 10: 	public static void main(String[] args) {
 11: 		Turtle.startTurtle(new HandleMouse());
 12: 	}
 13: 
 14: 	// タートルを動かす処理
 15: 	public void start() {
 16: 
 17: 		hide();// タートルを消す
 18: 		ImageTurtle car = new ImageTurtle("car.gif");// 車を生成
 19: 
 20: 		{// アニメーションループ
 21: 			while (true) {
 22: 				// --- 待つ ---
 23: 				sleep(0.1);
 24: 
 25: 				{// 一コマの処理をする
 26: 					// 車をマウスの位置に移動する
 27: 					int mx = mouseX();// マウスのx座標を取得する
 28: 					int my = mouseY();// マウスのy座標を取得する
 29: 					car.warp(mx, my);
 30: 				}
 31: 
 32: 				// --- 再描画 ---
 33: 				update();
 34: 			}
 35: 		}
 36: 
 37: 	}
 38: 
 39: }

ここをクリックすると、プログラムをダウンロードできます。

下のボタンを押すと、HandleMouseプログラムが実行できます。

マウスの位置を調べる新しい命令

mouseX(): マウスのx座標を取得します。
mouseY(): マウスのy座標を取得します。

x()、y()、mouseX()、mouseY()命令で取得した座標は，わざわざ変数に入れなくても、そのまま他の命令で使う値として使うこともできます。

リスト 10.3.1.2 HandleMouse2.java

  1: /*
  2:  * マウスの位置に車が動くプログラム (変数省略版)
  3:  * 
  4:  * 2003/06/23 Yoshiaki Matsuzawa 
  5:  * 2012/11/07 改訂 Yoshiaki Matsuzawa
  6:  */
  7: public class HandleMouse2 extends Turtle {
  8: 
  9: 	// 起動処理
 10: 	public static void main(String[] args) {
 11: 		Turtle.startTurtle(new HandleMouse2());
 12: 	}
 13: 
 14: 	// タートルを動かす処理
 15: 	public void start() {
 16: 
 17: 		hide();// タートルを消す
 18: 		ImageTurtle car = new ImageTurtle("car.gif");// 車を生成
 19: 
 20: 		{// アニメーションループ
 21: 			while (true) {
 22: 				// --- 待つ ---
 23: 				sleep(0.1);
 24: 
 25: 				{// 一コマの処理をする
 26: 					// 車をマウスの位置に移動する
 27: 					car.warp(mouseX(), mouseY());
 28: 				}
 29: 
 30: 				// --- 再描画 ---
 31: 				update();
 32: 			}
 33: 		}
 34: 
 35: 	}
 36: 
 37: }

ここをクリックすると、プログラムをダウンロードできます。

下のボタンを押すと、HandleMouse2プログラムが実行できます。

10.3.2 マウスが押されているかどうか調べる

mouseDown()命令を使うと、マウスが押されているか調べることができます。 mouseX()、mouseY() 命令と組み合わせて使うと、どこで押されているかも調べられます。

下のプログラムは、マウスをクリックした所に車が移動するプログラムです。

リスト 10.3.2.1 HandleMouse3.java

  1: /*
  2:  * マウスの押した位置に車が動くプログラム
  3:  * 
  4:  * 2003/06/23 Yoshiaki Matsuzawa 
  5:  * 2012/11/07 改訂 Yoshiaki Matsuzawa
  6:  */
  7: public class HandleMouse3 extends Turtle {
  8: 
  9: 	// 起動処理
 10: 	public static void main(String[] args) {
 11: 		Turtle.startTurtle(new HandleMouse3());
 12: 	}
 13: 
 14: 	// タートルを動かす処理
 15: 	public void start() {
 16: 		hide();// タートルを消す
 17: 		ImageTurtle car = new ImageTurtle("car.gif");// 車を生成
 18: 
 19: 		{// アニメーションループ
 20: 			while (true) {
 21: 				// -- 待つ　---
 22: 				sleep(0.1);
 23: 
 24: 				{ // 一コマの処理をする
 25: 					// マウスがクリックされた時の処理
 26: 					if (mouseClicked()) {
 27: 						car.warp(mouseX(), mouseY());// 車をマウスの位置に移動
 28: 					}
 29: 				}
 30: 
 31: 				// --- 再描画 ---
 32: 				update();
 33: 			}
 34: 		}
 35: 
 36: 	}
 37: 
 38: }

ここをクリックすると、プログラムをダウンロードできます。

下のボタンを押すと、HandleMouse3プログラムが実行できます。

マウスクリックを調べる新しい命令

mouseClicked(): いまマウスがクリックされたかどうか調べます。必ず、if文の条件文の中に書いて下さい。

10.3.3 マウス入力を詳しく調べる

マウスボタンの左右クリックや、ダブルクリックを調べる場合は，次のようなプログラムを書きます。

リスト 10.3.3.1 HandleMouse4.java

  1: /*
  2:  * マウスの押した位置に車が動くプログラム (右クリック，左クリック判定版)
  3:  * 
  4:  * 2003/06/23 Yoshiaki Matsuzawa 
  5:  * 2012/11/07 改訂 Yoshiaki Matsuzawa
  6:  */
  7: public class HandleMouse4 extends Turtle {
  8: 
  9: 	// 起動処理
 10: 	public static void main(String[] args) {
 11: 		Turtle.startTurtle(new HandleMouse4());
 12: 	}
 13: 
 14: 	// タートルを動かす処理
 15: 	public void start() {
 16: 
 17: 		hide();// タートルを消す
 18: 		ImageTurtle car = new ImageTurtle("car.gif");// 車を生成
 19: 
 20: 		{// アニメーションループ
 21: 			while (true) {
 22: 
 23: 				// --- 待つ ---
 24: 				sleep(0.1);
 25: 
 26: 				{// 一コマの処理をする
 27: 					{// 左マウスボタンがクリックされた時の処理
 28: 						if (leftMouseClicked()) {
 29: 							car.warp(mouseX(), mouseY());// 車をマウスの位置に移動
 30: 						}
 31: 					}
 32: 					{ // 右マウスボタンがダブルクリックされた時の処理
 33: 						if (rightMouseClicked() && doubleClick()) {
 34: 							car.show(!car.isShow());// 車を(現す/隠す)
 35: 						}
 36: 					}
 37: 				}
 38: 
 39: 				// --- 再描画 ---
 40: 				update();
 41: 			}
 42: 		}
 43: 
 44: 	}
 45: 
 46: }

ここをクリックすると、プログラムをダウンロードできます。

下のボタンを押すと、HandleMouse4プログラムが実行できます。

マウス入力を詳しく調べる新しい命令

leftMouseClicked(): マウスの左ボタンがクリックされたかどうかを調べます。必ず、if文の条件文の中に書いて下さい。
rightMouseClicked(): マウスの右ボタンがクリックされたかどうかを調べます。必ず、if文の条件文の中に書いて下さい。
doubleClick(): マウスがダブルクリックされたかどうかを調べます。必ず、if文の条件文の中に書いて下さい。

10.3.4 ドラッグを調べる

マウスボタンが今押されているかどうかを調べる場合は、次のようなプログラムを書きます。

リスト 10.3.4.1 HandleMouseDown.java

  1: /*
  2:  * マウスのドラッグした位置に車が動くプログラム
  3:  * 
  4:  * 2011/11/22 Yoshiaki Matsuzawa 
  5:  * 2012/11/07 改訂 Yoshiaki Matsuzawa
  6:  */
  7: public class HandleMouseDown extends Turtle {
  8: 
  9: 	// 起動処理
 10: 	public static void main(String[] args) {
 11: 		Turtle.startTurtle(new HandleMouseDown());
 12: 	}
 13: 
 14: 	// タートルを動かす処理
 15: 	public void start() {
 16: 
 17: 		hide();// タートルを消す
 18: 		ImageTurtle car = new ImageTurtle("car.gif");// 車を生成
 19: 
 20: 		{// アニメーションループ
 21: 			while (true) {
 22: 				// --- 待つ ---
 23: 				sleep(0.1);
 24: 
 25: 				{ // 一コマの処理をする
 26: 					// 左マウスボタンが押されている時の処理
 27: 					if (leftMouseDown()) {
 28: 						car.warp(mouseX(), mouseY());// 車をマウスの位置に移動
 29: 					}
 30: 				}
 31: 
 32: 				// --- 再描画 ---
 33: 				update();
 34: 			}
 35: 		}
 36: 
 37: 	}
 38: 
 39: }

ここをクリックすると、プログラムをダウンロードできます。

下のボタンを押すと、HandleMouseDownプログラムが実行できます。

マウス入力を調べる新しい命令

mouseDown(): いまマウスが押されているかどうかを調べます。必ず、if文の条件文の中に書いて下さい。
leftMouseDown(): いまマウスの左ボタンが押されているかどうかを調べます。必ず、if文の条件文の中に書いて下さい。
rightMouseDown(): いまマウスの右ボタンが押されているかどうかを調べます。必ず、if文の条件文の中に書いて下さい。

10.4 あたり判定

10.4.1 ２つのオブジェクトのあたり判定

intersects()命令を使うと、2つのオブジェクトが当たっているかどうか、調べることができます。

下のプログラムは、車がドラえもんに当たると、ドラえもんが小さくなるプログラムです（マウスで車を動かせます）。

リスト 10.4.1.1 IntersectsJudge.java

  1: /*
  2:  * あたり判定をするプログラム
  3:  * (車がドラえもんにあたると，ドラえもんが小さくなる)
  4:  * 
  5:  * 2003/06/23 Yoshiaki Matsuzawa
  6:  * 2012/11/07 改訂 Yoshiaki Matsuzawa
  7:  */
  8: public class IntersectsJudge extends Turtle {
  9: 
 10: 	// 起動処理
 11: 	public static void main(String[] args) {
 12: 		Turtle.startTurtle(new IntersectsJudge());
 13: 	}
 14: 
 15: 	// タートルを動かす処理
 16: 	public void start() {
 17: 
 18: 		hide();// タートルを消す
 19: 		ImageTurtle car = new ImageTurtle("car.gif");// 車を生成
 20: 		Doraemon dora = new Doraemon();// doraという名前のドラえもんを生成
 21: 		car.warp(200, 200);// 車を移動
 22: 
 23: 		{// アニメーションループ
 24: 			while (true) {
 25: 
 26: 				// --- 待つ ---
 27: 				sleep(0.1);
 28: 
 29: 				{ // 一コマの処理をする
 30: 					{// マウスが押されていた時の処理
 31: 						if (mouseDown()) {
 32: 							car.warp(mouseX(), mouseY());// 車をマウスの位置に移動
 33: 						}
 34: 					}
 35: 					{ // どらえもんが車に当たっていた時の処理
 36: 						if (dora.intersects(car)) {
 37: 							dora.small(5);// ドラえもんを小さくする
 38: 						}
 39: 					}
 40: 				}
 41: 
 42: 				// --- 再描画 ---
 43: 				update();
 44: 			}
 45: 		}
 46: 
 47: 	}
 48: 
 49: }

ここをクリックすると、プログラムをダウンロードできます。

下のボタンを押すと、IntersectsJudgeプログラムが実行できます。

あたり判定に関する新しい命令

intersects([判定相手のオブジェクト]): オブジェクトが、指定された判定相手のオブジェクトと当たっているかどうか調べます。必ず、if文の条件文の中に書いて下さい。

10.4.2 座標とオブジェクトのあたり判定

2つのオブジェクトのあたり判定でなく、マウスの位置が、オブジェクトと当たっているか判定したい時があります。

下のプログラムは、マウスが車の上に来る（マウスの座標が車の領域に含まれる）と、車が小さくなるプログラムです。

リスト 10.4.2.1 ContainsJudge.java

  1: /*
  2:  * マウスのあたり判定をするプログラム
  3:  * (マウスが車にあたると，車が小さくなる)
  4:  * 
  5:  * 2003/06/23 Yoshiaki Matsuzawa
  6:  * 2012/11/07 改訂 Yoshiaki Matsuzawa
  7:  */
  8: public class ContainsJudge extends Turtle {
  9: 
 10: 	// 起動処理
 11: 	public static void main(String[] args) {
 12: 		Turtle.startTurtle(new ContainsJudge());
 13: 	}
 14: 
 15: 	// タートルを動かす処理
 16: 	public void start() {
 17: 
 18: 		hide();// タートルを消す
 19: 		ImageTurtle car = new ImageTurtle("car.gif");// 車を生成
 20: 
 21: 		{// アニメーションループ
 22: 			while (true) {
 23: 				// --- 待つ ---
 24: 				sleep(0.1);
 25: 
 26: 				{// 一コマの処理をする
 27: 					// 車がマウスの位置に含まれている場合の処理
 28: 					if (car.contains(mouseX(), mouseY())) {
 29: 						car.small(5);// 車を小さくする
 30: 					}
 31: 				}
 32: 
 33: 				// --- 再描画 ---
 34: 				update();
 35: 			}
 36: 		}
 37: 
 38: 	}
 39: 
 40: }

ここをクリックすると、プログラムをダウンロードできます。

下のボタンを押すと、ContainsJudgeプログラムが実行できます。

座標とオブジェクトのあたり判定に関する新しい命令

contains([x座標], [y座標]): オブジェクトが指定された座標内に含まれているかどうか調べます。必ず、if文の条件文の中に書いて下さい。

10.5 練習問題

10.5.1 プレイヤーを操作出来るようにしよう

プレイヤーの画像を用意し、キーボードの矢印（↑→←↓）キーを使って、プレイヤーを上下左右に操作するプログラムを作りましょう。

下のボタンを押すと、Kadai01プログラムが実行できます。

プレイヤーの画像は、ネットのフリー素材集などから好みのものを探し、ダウンロードして使ってみよう。

ファイル名は「KeyHandler.java」とすること．

10.5.2 画像をドラッグ出来るようにしよう

画像を用意し、マウスを使って、ドラッグできるプログラムを作ってみましょう。

下のボタンを押すと、Kadai02プログラムが実行できます。

ファイル名は「DrugHandler.java」とすること．

10.5.3 得点板を作ろう

アイテム（画像タートル）と得点板（テキストタートル）をつくり、プレイヤーを操作してアイテムを取る（アイテムに触れる）と得点が増えるプログラムを作りましょう。

ファイル名は「ScoreBoard.java」とすること．

10.5.4 ゲームを作ろう

自由な発想で、簡単なオリジナルゲームを作りましょう。

下記はシューティングゲームのサンプルがあります。使い方は、ソースを読んで理解しよう。

リスト 10.5.4.1 ShootingGame.java

  1: /*
  2:  * シューティングゲーム
  3:  * 
  4:  * 2003/06/23 Yoshiaki Matsuzawa
  5:  * 2012/11/07 改訂 Yoshiaki Matsuzawa
  6:  */
  7: public class ShootingGame extends Turtle {
  8: 
  9: 	// 起動処理
 10: 	public static void main(String[] args) {
 11: 		Turtle.startTurtle(new ShootingGame());
 12: 	}
 13: 
 14: 	// タートルを動かす処理
 15: 	public void start() {
 16: 
 17: 		hide();// タートルを消す
 18: 
 19: 		// 画面の調整
 20: 		window.size(640, 480);
 21: 		window.warp(100, 100);
 22: 
 23: 		// キャラクターの生成
 24: 		Star enemy = new Star(); // enemyという名前の星を生成
 25: 		Doraemon player = new Doraemon(); // playerという名前のドラえもんを生成
 26: 		Circle bullet = new Circle(); // bullet(弾)という名前の円を作成
 27: 
 28: 		// 得点板の生成
 29: 		TextTurtle scoreBoard = new TextTurtle(""); // scoreBoardという名前のTextTurtleを生成
 30: 
 31: 		{// 初期化
 32: 			// 弾を適切な大きさに調整
 33: 			bullet.size(20, 20);
 34: 
 35: 			// キャラクターの位置を調整
 36: 			enemy.warp(200, 100);
 37: 			player.warp(320, 350);
 38: 			bullet.warp(-100, -100);// 弾は最初見えない位置に置いておく
 39: 
 40: 			// 得点板の位置を調整
 41: 			scoreBoard.warp(600, 50);
 42: 		}
 43: 
 44: 		{// アニメーションループ
 45: 			// 得点を初期化
 46: 			int score = 0;
 47: 
 48: 			while (true) {
 49: 
 50: 				// --- 待つ ---
 51: 				sleep(0.025);
 52: 
 53: 				{ // 一コマの処理をする
 54: 
 55: 					{// 敵を動かす
 56: 						enemy.warp(enemy.getX() + 5, enemy.getY());
 57: 						enemy.rt(10);
 58: 
 59: 						{ // 敵が右端だった場合の処理
 60: 							if (enemy.getX() > 640) {
 61: 								enemy.warp(0, enemy.getY());// 左端にワープ
 62: 							}
 63: 						}
 64: 					}
 65: 
 66: 					{ // ドラえもんを左右に動かす
 67: 						if (key() == 37) { // 左
 68: 							player.warp(player.getX() - 5, player.getY());
 69: 						} else if (key() == 39) { // 右
 70: 							player.warp(player.getX() + 5, player.getY());
 71: 						}
 72: 					}
 73: 
 74: 					{// 上が押されたら，弾を出す(弾をドラえもんと同じ位置にする)
 75: 						if (key() == 38) {
 76: 							//
 77: 							bullet.warp(player.getX(), player.getY());
 78: 						}
 79: 					}
 80: 
 81: 					{ // 弾の処理
 82: 						// 上に動かす(見えなくても，上に動かしつづける)
 83: 						bullet.warp(bullet.getX(), bullet.getY() - 5);
 84: 
 85: 						{ // 弾が敵に当たっていた場合の処理
 86: 							if (bullet.intersects(enemy)) {
 87: 								score++;// 得点を増やす
 88: 							}
 89: 						}
 90: 					}
 91: 					// 得点板の数字を更新
 92: 					scoreBoard.text(score);
 93: 
 94: 				}
 95: 
 96: 				// --- 再描画 ---
 97: 				update();
 98: 			}
 99: 		}
100: 
101: 	}
102: 
103: }

ここをクリックすると、プログラムをダウンロードできます。

下のボタンを押すと、ShootingGameプログラムが実行できます。

付録にも作品例があります。

ファイル名は「MyGame.java」とすること．

Turtle Cafe 2/Javaプログラミング入門/ゲームを作ろう！