11 ゲームを作ろう！

11.1 学習目標

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

11.2 キーボード入力の判定

11.2.1 キーコードの取得

「キー情報を取得する」命令を使うと、いま押されているキーボードの番号（キーコード）を 調べることができます。

次のプログラムは、車がキーにあわせて、上下左右に動くプログラムです。

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

  1: ※プログラム名：キーに対応して車が動くプログラム
  2: ※作成者：岡田健
  3: ※作成日：2009.12.7
  4: 
  5: ※授業に必要なライブラリを取り込む。
  6: TurtleLibraryを参照する。
  7: 
  8: ※環境を初期化する。
  9: ウィンドウを初期化する。
 10: 
 11: ※車を生成する
 12: 画像を新規作成して、車と名付ける。
 13: 車のファイル名を「car.gif」と設定する。
 14: ウィンドウに車を追加する。
 15: 
 16: 整数型を新規作成して、番号と名付ける。※キー番号を入れておく変数
 17: 整数型を新規作成して、Ｘと名付ける。　※ｘ座標を入れておく変数
 18: 整数型を新規作成して、Ｙと名付ける。　※ｙ座標を入れておく変数
 19: 
 20: ※アニメーションを行う
 21: 無条件で｛
 22: 
 23: 	※ --- 待つ ---
 24: 	ウィンドウは０．１秒待機する。
 25: 
 26: 	※ --- 処理 ---
 27: 
 28: 	※今押されているキーを取得する
 29: 	ウィンドウのキー情報を取得して、それを番号に入れる。
 30: 
 31: 	※車が今いる位置を取得する
 32: 	車のＸ座標を取得して、それをＸに入れる。
 33: 	車のＹ座標を取得して、それをＹに入れる。
 34: 
 35: 	※上下左右キーが押されていたら、車のＸＹ座標を変更する
 36: 	番号＝３７ならば｛
 37: 		※左に移動する
 38: 		ＸにＸ-５を入れる。
 39: 	｝をして、番号＝３８ならば｛
 40: 		※上に移動する
 41: 		ＹにＹ-５を入れる。
 42: 	｝をして、番号＝３９ならば｛
 43: 		※右に移動する
 44: 		ＸにＸ＋５を入れる。
 45: 	｝をして、番号＝４０ならば｛
 46: 		※下に移動する
 47: 		ＹにＹ＋５を入れる。
 48: 	｝をする。
 49: 
 50: 	※車のＸＹ座標を設定する
 51: 	車のＸ座標をＸに設定する。
 52: 	車のＹ座標をＹに設定する。
 53: 
 54: 	※ --- 再描画 ---
 55: 	ウィンドウを再描画する。
 56: 
 57: ｝を繰り返す。

11.2.2 キーコードを調べる

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

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

  1: ※プログラム名：キー番号を調べるプログラム
  2: ※作成者：岡田健
  3: ※作成日：2009.12.7
  4: 
  5: ※授業に必要なライブラリを取り込む。
  6: TurtleLibraryを参照する。
  7: 
  8: ※環境を初期化する。
  9: ウィンドウを初期化する。
 10: 
 11: ※キー番号を表示する「キー表示」を生成する
 12: テキストを新規作成して、キー表示と名付ける。
 13: キー表示の文字列を「キー番号」と設定する。
 14: ウィンドウにキー表示を追加する。
 15: 
 16: 整数型を新規作成して、キー番号と名付ける。
 17: 
 18: ※アニメーションを行う
 19: 無条件で｛
 20: 	※ --- 待つ ---
 21: 	ウィンドウは０．１秒待機する。
 22: 
 23: 	※ --- 処理 ---
 24: 	※今押されているキーを取得する
 25: 	ウィンドウのキー情報を取得して、それをキー番号に入れる。
 26: 
 27: 	※押されているキー番号を文字にして表示する
 28: 	キー表示の文字列をキー番号と設定する。
 29: 
 30: 	※ --- 再描画 ---
 31: 	ウィンドウを再描画する。
 32: 
 33: ｝を繰り返す。

11.3 マウス入力の判定

11.3.1 マウスの位置を調べる

「マウスＸＹ座標を取得する」命令を使うと， マウスが今どこにいるのかを調べることができます。

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

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

  1: ※プログラム名：マウスの位置に車が動くプログラム
  2: ※作成者：岡田健
  3: ※作成日：2009.12.7
  4: 
  5: ※授業に必要なライブラリを取り込む。
  6: TurtleLibraryを参照する。
  7: 
  8: ※環境を初期化する。
  9: ウィンドウを初期化する。
 10: 
 11: ※車を生成
 12: 画像を新規作成して、車と名付ける。
 13: 車のファイル名を「car.gif」と設定する。
 14: ウィンドウに車を追加する。
 15: 
 16: 整数型を新規作成して、Ｘと名付ける。※マウスのｘ座標を入れておく変数
 17: 整数型を新規作成して、Ｙと名付ける。※マウスのｙ座標を入れておく変数
 18: 
 19: ※アニメーションを行う
 20: 無条件で｛
 21: 	※ --- 待つ ---
 22: 	ウィンドウは０．１秒待機する。
 23: 
 24: 	※ --- 処理 ---
 25: 
 26: 	※マウスのＸＹ座標を取得する
 27: 	ウィンドウのマウスＸ座標を取得して、それをＸに入れる。
 28: 	ウィンドウのマウスＹ座標を取得して、それをＹに入れる。
 29: 
 30: 	※車をマウスの位置に移動
 31: 	車のＸ座標をＸに設定する。
 32: 	車のＹ座標をＹに設定する。
 33: 
 34: 	※ --- 再描画 ---
 35: 	ウィンドウを再描画する。
 36: 
 37: ｝を繰り返す。

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

「マウスがクリックされた」命令を使うと、マウスが押されているか調べることができます。 「マウスＸＹ座標を取得する」命令と組み合わせて使うと、どこで押されているかも調べられます。

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

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

  1: ※プログラム名：マウスをクリックした位置に車が移動するプログラム
  2: ※作成者：岡田健
  3: ※作成日：2009.12.7
  4: 
  5: ※授業に必要なライブラリを取り込む。
  6: TurtleLibraryを参照する。
  7: 
  8: ※環境を初期化する。
  9: ウィンドウを初期化する。
 10: 
 11: ※車を生成する
 12: 画像を新規作成して、車と名付ける。
 13: 車のファイル名を「car.gif」と設定する。
 14: ウィンドウに車を追加する。
 15: 
 16: 整数型を新規作成して、Ｘと名付ける。※マウスのｘ座標を入れておく変数
 17: 整数型を新規作成して、Ｙと名付ける。※マウスのｙ座標を入れておく変数
 18: 
 19: ※アニメーションを行う
 20: 無条件で｛
 21: 
 22: 	※ --- 待つ ---
 23: 	ウィンドウは０．１秒待機する。
 24: 
 25: 	※ --- 処理 ---
 26: 
 27: 	※マウスがクリックされていたら、車をマウスの位置に移動する
 28: 	ウィンドウでマウスクリックされたならば｛
 29: 		ウィンドウのマウスＸ座標を取得して、車のＸ座標をそれに設定する。
 30: 		ウィンドウのマウスＹ座標を取得して、車のＹ座標をそれに設定する。
 31: 	｝をする。
 32: 
 33: 	※ --- 再描画 ---
 34: 	ウィンドウを再描画する。
 35: 
 36: ｝を繰り返す。

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

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

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

  1: ※プログラム名：マウスのクリック位置に車が動くプログラム
  2: ※　　　　　　　（右クリック、左クリック判定版）
  3: ※作成者：岡田健
  4: ※作成日：2009.12.7
  5: 
  6: ※授業に必要なライブラリを取り込む。
  7: TurtleLibraryを参照する。
  8: 
  9: ※環境を初期化する。
 10: ウィンドウを初期化する。
 11: 
 12: ※車を生成
 13: 画像を新規作成して、車と名付ける。
 14: 車のファイル名を「car.gif」と設定する。
 15: ウィンドウに車を追加する。
 16: 
 17: ※アニメーションを行う
 18: 無条件で｛
 19: 
 20: 	※ --- 待つ ---
 21: 	ウィンドウは０．１秒待機する。
 22: 
 23: 	※ --- 処理 ---
 24: 
 25: 	※左クリックされたら、マウス位置に車を移動させる
 26: 	ウィンドウでマウス左クリックされたならば｛
 27: 		ウィンドウのマウスＸ座標を取得して、車のＸ座標をそれに設定する。
 28: 		ウィンドウのマウスＹ座標を取得して、車のＹ座標をそれに設定する。
 29: 	｝をする。
 30: 
 31: 	※右のダブルクリックが行われたら、車を出現させたり隠したりする
 32: 	真偽値型を新規作成して、Ａと名付ける。
 33: 	真偽値型を新規作成して、Ｂと名付ける。
 34: 	ウィンドウのマウス右クリック情報を取得して、それをＡに入れる。
 35: 	ウィンドウのマウスダブルクリック情報を取得して、それをＢに入れる。
 36: 	ＡかつＢならば｛
 37: 		※車を出現させる／隠す
 38: 		車が出現中であるならば｛
 39: 			車を隠す。
 40: 		｝をして、そうでないならば｛
 41: 			車を出現させる。
 42: 		｝をする。
 43: 	｝をする。
 44: 
 45: 	※ --- 再描画 ---
 46: 	ウィンドウを再描画する。
 47: 
 48: ｝を繰り返す。

11.4 あたり判定

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

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

下のプログラムは、車が信号に当たると、信号が大きくなるプログラムです（マウスクリックで車を動かせます）。

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

  1: ※プログラム名：あたり判定をするプログラム
  2: ※作成者：岡田健
  3: ※作成日：2009.12.7
  4: 
  5: ※授業に必要なライブラリを取り込む。
  6: TurtleLibraryを参照する。
  7: 
  8: ※環境を初期化する。
  9: ウィンドウを初期化する。
 10: 
 11: ※車を生成する
 12: 画像を新規作成して、車と名付ける。
 13: 車のファイル名を「car.gif」と設定する。
 14: ウィンドウに車を追加する。
 15: 
 16: ※信号を生成する
 17: 画像を新規作成して、信号と名付ける。
 18: 信号のファイル名を「sign.gif」と設定する。
 19: ウィンドウに信号を追加する。
 20: 
 21: ※車を移動
 22: 車のＸ座標を２００に設定する。
 23: 車のＹ座標を２００に設定する。
 24: 
 25: ※アニメーションを行う
 26: 無条件で｛
 27: 
 28: 	※ --- 待つ ---
 29: 	ウィンドウが０．１秒待機する。
 30: 
 31: 	※ --- 処理 ---
 32: 
 33: 	※クリックされていたら、車をクリック位置に移動させる
 34: 	ウィンドウでマウスクリックされたならば｛
 35: 		ウィンドウのマウスＸ座標を取得して、車のＸ座標をそれに設定する。
 36: 		ウィンドウのマウスＹ座標を取得して、車のＹ座標をそれに設定する。
 37: 	｝をする。
 38: 
 39: 	※車が信号に当たっていたら、車を大きくする
 40: 	信号が車と接触したならば｛
 41: 		信号を５ドット大きくする。
 42: 	｝をする。
 43: 
 44: 	※ --- 再描画 ---
 45: 	ウィンドウを再描画する。
 46: 
 47: ｝を繰り返す。

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

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

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

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

  1: ※プログラム名：マウスのあたり判定をするプログラム
  2: ※　　　　　　　（マウスが車にあたると、車がちいさくなる）
  3: ※作成者：岡田健
  4: ※作成日：2009.12.9
  5: 
  6: ※授業に必要なライブラリを取り込む。
  7: TurtleLibraryを参照する。
  8: 
  9: ※環境を初期化する。
 10: ウィンドウを初期化する。
 11: 
 12: ※車を生成する
 13: 画像を新規作成して、車と名付ける。
 14: 車のファイル名を「car.gif」と設定する。
 15: ウィンドウに車を追加する。
 16: 
 17: ※マウス座標を保存する変数
 18: 整数型を新規作成して、Ｘと名付ける。
 19: 整数型を新規作成して、Ｙと名付ける。
 20: 
 21: ※アニメーションを行う
 22: 無条件で｛
 23: 
 24: 	※ --- 待つ ---
 25: 	ウィンドウが０．１秒待機する。
 26: 
 27: 	※ --- 処理 ---
 28: 
 29: 	※マウスのＸＹ座標を取得する
 30: 	ウィンドウのマウスＸ座標を取得して、それをＸに入れる。
 31: 	ウィンドウのマウスＹ座標を取得して、それをＹに入れる。
 32: 
 33: 	※車の中にマウス座標が含まれていたら、車を小さくする
 34: 	車が、ＸとＹを含むならば｛
 35: 		車を５ドット小さくする。
 36: 	｝をする。
 37: 
 38: 	※ --- 再描画 ---
 39: 	ウィンドウを再描画する。
 40: 
 41: ｝を繰り返す。

11.5 課題

11.5.1 簡単なゲームを作ろう

これで，このテキストの内容はすべておしまいです。 ここまでの内容を駆使して、面白いソフトウエアを作ってくださることを期待します。