"クレーンゲーム"の差分

28と53のリビジョン間の差分 (その間の編集: 25回)

クレーンゲーム

ゲーム作りを通してプログラム作成の考え方を学びます。

ゲーム内容

Aボタンを押すとクレーンが動き始め、Bボタンを押すとクレーンが下がり、うまくぬいぐるみをつかんだら運ぶことができます。

画面例

オブジェクト指向

それぞれのもの(オブジェクト)の状態や動作を考えることでプログラムの構成を決定します。

このプロジェクトでは

クレーンの動き
Aボタンを押したときの動作
Bボタンを押したときの動作
ぬいぐるみの動き

に分け、この順にスクリプトを作成していきます。

クレーンの動きを考える

クレーンの動きは上下左右の４つです。

開始時には左上にあり、動き始めてから止まるまでなにも操作をしなかったらつぎのような動きになります。

箇条書きにするとこのようになります。(シナリオ)

クレーンが右に動く
右端についた
クレーンが下に動く
下端についた
クレーンが上に動く
上端についた
クレーンが左に動く
左端についた
停止

図に書くとこのようになります。(状態図)

個々の状態に対応するスクリプトに分け、一度に１つのスクリプトがチクタクで動作するように考えると分かりやすい。

青の点線で囲んだ範囲を１つのスクリプトとして作成します。

スクリプト１～４はどれか１つがチクタクで動作すると考えます。

スクリプト１

クレーンの絵の向きを変えずに動かす方法はいくつかありますが、座標を増減する方法で書くことにします。

チクタクごとに右に５動かすにはつぎのように書きます。動きの速さは調整してください。

書き方１

書き方２

右端についたときの処理をテストタイルを使って書き加えます。

判定に用いるの数値(座標)はクレーンの形や画面全体のデザインによって調整が必要です。

スクリプト２、３、４

同様に書けます。

クレーンが下がるときに開くようにするとおもしろいでしょう。

Aボタンが押されたとき

Aボタンが押されたときはクレーンが右に動き始め、 Bボタンが押されたときはクレーンが下に動くようにしたい。

状態図を見ながら考えます。

Aボタンが押されたとき、

スクリプト１をスタート

すれば右に動き始めますが、これではうまく動作しない場合があります。

クレーンが左上で停止しているときはこれだけでよいのですが、次のような可能性もあるからです。

クレーンが動作中である
クレーンが別の位置にある

こんな場合にAボタンが押されたときも、同様に動作させるには

クレーンを動かしているスクリプトを停止する
クレーンを左上に配置する

を行ってから

スクリプト１をスタート

すればよい。

クレーンが左上で止まっているときしかAボタンが押せないようにすることも可能ですが、その場合は初期化のためのボタンがもう１つ必要です。

Bボタンが押されたとき

Bボタンが押されたときは、スクリプト１を停止し、スクリプト２をスタートすればよい。

応用問題

クレーンが右に移動中でないときにBボタンが押されたときには、反応しないようにしてください。

ヒント

クレーンの位置を使って判定する

クレーンの動作

クレーンの状態図はこのように書ける。

他に動作がおかしな点があるかもしれません。

発見するにはシナリオを
動作を検討するには状態図を

使うとよい。

ぬいぐるみの動作

ぬいぐるみの状態は次の３つが考えられます。

止まっている。
クレーンでつかまれている。
クレーンから開放されて落ちている。

状態図にするとこのようになります。

状態の数が少なく、状態の変わり方も単純なので、１つのスクリプトで書けそうです。

このように場合分けできます。

テストタイル２つを組み合わせて記述できます。

１つめのテストタイルの「いいえ」のところに２つめのテストタイルを入れる

クレーンと一緒に動く

ぬいぐるみの座標をクレーンの座標と同じにすれば、クレーンの動きと一緒にぬいぐるみを動かすことができます。

クレーンでつかまれているかどうかの判定はタートルへの距離を用いて行えます。

タートルへの距離は２つのオブジェクトの中心位置の距離を求めるものです。
このように記述すると、距離が３０より小さいときぬいぐるみがクレーンと一緒に動きます。
クレーンの中心位置と距離の数値をうまく調整して、赤丸の範囲にぬいぐるみの中心位置が入っているかどうか判定できるようにします。

クレーンから落ちるとき

下方向に動かすにはｙ座標を使うのが簡単です。
ある色に触れるまで落ちるようにするにはこのように書きます。
下の方に何かを描いておき、その色を判定に使えばよい。

３つの状態をまとめると

クレーンにつかまれている時は
- クレーンと一緒に動く
そうではなくて
- 指定の色に触れている時は
  - 止まっている
- そうでない時は
  - 下に動く

となり、次のように記述できます。

完成まで

ぬいぐるみを適当な場所に配置し、ぬいぐるみのスクリプトをチクタクにする処理を Aボタンが押されたときのスクリプトに追加します。

本物のように動作させるには細かな調整が必要かもしれません。

いろいろ考えて試みてください。

クレーンゲーム (最終更新日時 2012-06-14 12:49:54 更新者 masahiko)

-  ⇤ ← 2011-06-02 06:23:03時点のリビジョン28 → 
  サイズ: 6461
  編集者: masahiko
  コメント:
+   ← 2012-06-14 12:40:27時点のリビジョン53 → ⇥
  サイズ: 7278
  編集者: masahiko
  コメント:
-削除された箇所はこのように表示されます。
+追加された箇所はこのように表示されます。
 行 3:
-ゲーム作りを通してプログラム作成の考え方を学びます。(オブジェクト指向)
+ゲーム作りを通してプログラム作成の考え方を学びます。
 行 9:
+画面例
 . {{attachment:crane30.png}}
----
=== オブジェクト指向 ===
それぞれのもの(オブジェクト)の状態や動作を考えることで
プログラムの構成を決定します。

このプロジェクトでは
 1. クレーンの動き
 1. Aボタンを押したときの動作
 1. Bボタンを押したときの動作
 1. ぬいぐるみの動き
に分け、この順にスクリプトを作成していきます。
-行 11:
+行 25:
-うまく操作したときのクレーンの動きを考えます。
 . {{attachment:crane21.png}}
順に箇条書きにするとこのようになります。(シナリオ)
 1. Aボタンを押す
+クレーンの動きは上下左右の４つです。
 . {{attachment:idou1.png}}

開始時には左上にあり、
動き始めてから止まるまでなにも操作をしなかったら
つぎのような動きになります。

箇条書きにするとこのようになります。(シナリオ)
-行 16:
+行 34:
-. Bボタンを押す
+. 右端についた
-行 25:
+行 43:
-行 26:
+行 45:
- . {{attachment:crane01.png}}
+ . {{attachment:crane31.png}}
-行 30:
+行 49:
- . {{attachment:crane02.png}}
+ . {{attachment:crane32.png}}
-行 33:
+行 52:
- . ボタンが押されたときは、対応するスクリプトを'''１回'''実行します。
-行 35:
+行 53:
-スクリプト１はこのように書けます。
クレーンの絵の向きを変えずに動かす方法は２つあります。
 . 座標を設定する方法で書いた場合
 . {{attachment:crane07.png}}
 . 進行方向を設定する方法を用いる場合
 . {{attachment:crane08.png}}
スクリプト２は下方向の移動で、下端についたときの処理を
テストタイルを使って書きます。
 . {{attachment:crane09.png}}
スクリプト３、スクリプト４も同様に書けます。
+==== スクリプト１ ====
クレーンの絵の向きを変えずに動かす方法はいくつかありますが、
座標を増減する方法で書くことにします。
-行 46:
+行 57:
-Aボタンが押されたときは、スクリプト１をスタートすればよい。
+チクタクごとに右に５動かすにはつぎのように書きます。
動きの速さは調整してください。

書き方１
 . {{attachment:crane33.png}}
書き方２
 . {{attachment:crane34.png}}

右端についたときの処理を
テストタイルを使って書き加えます。
 . {{attachment:crane35.png}}
判定に用いるの数値(座標)はクレーンの形や画面全体のデザインによって調整が必要です。

==== スクリプト２、３、４ ====

同様に書けます。

クレーンが下がるときに開くようにすると
おもしろいでしょう。

----
=== Aボタンが押されたとき ===

Aボタンが押されたときはクレーンが右に動き始め、
Bボタンが押されたときはクレーンが下に動くようにしたい。

状態図を見ながら考えます。
 . {{attachment:crane36.png}}

Aボタンが押されたとき、
 . スクリプト１をスタート
すれば右に動き始めますが、
これではうまく動作しない場合があります。

クレーンが左上で停止しているときはこれだけでよいのですが、
次のような可能性もあるからです。
 * クレーンが動作中である
 * クレーンが別の位置にある

こんな場合にAボタンが押されたときも、同様に動作させるには
 * クレーンを動かしているスクリプトを停止する
 * クレーンを左上に配置する
を行ってから
 . スクリプト１をスタート
すればよい。

 . {{attachment:crane37.png}}

クレーンが左上で止まっているときしかAボタンが押せない
ようにすることも可能ですが、
その場合は初期化のためのボタンがもう１つ必要です。
----
=== Bボタンが押されたとき ===
-行 49:
+行 112:
- . {{attachment:crane10.png}}
+ . {{attachment:crane38.png}}

==== 応用問題 ====
クレーンが右に移動中でないときにBボタンが押されたときには、
反応しないようにしてください。

ヒント
 . クレーンの位置を使って判定する
-行 52:
+行 122:
-=== 全体の動作 ===
通常、Aボタンが押されるのは停止状態のときである。
+=== クレーンの動作 ===
-行 55:
+行 124:
-クレーンが動き始める前に、
初期位置に移動するなどの処理が必要なら
スクリプト１をスタートするまえに行う。
+クレーンの状態図はこのように書ける。
-行 59:
+行 126:
-したがって状態図はこのようになる。
 . {{attachment:crane03.png}}
----
=== 動作詳細 ===
上の状態図で考えられていない場面を考える。(別のシナリオ)
+ . {{attachment:crane39.png}}
-行 65:
+行 128:
-例えば、次の場合の処理が記述されていません。
 * スクリプト１が動作しているときにBボタンが押されなかった。
 * 停止状態でないときにAボタンが押された。

スクリプト１が動作しているときにBボタンが押されないままだと、
クレーンが右端を通り過ぎて画面から消えてしまいます。

 . 右端に着いたら左に進む、とすれば状態図はこのようになります。
 . {{attachment:crane22.png}}
 . スクリプト１に処理を追加することで修正できます。

停止状態でないときにAボタンが押された場合、
次の処理を行えば最初から行われるようにできる。
 . スクリプト１～４を停止する。
 . クレーンを初期位置に戻す。
 . スクリプト１をスタートする。

他にも動作がおかしな点があるかもしれません。
+他に動作がおかしな点があるかもしれません。
-行 86:
+行 132:
-行 93:
+行 140:
- . {{attachment:crane05.png}}
+ . {{attachment:crane40.png}}
-行 97:
+行 144:
-クレーンでつかまれているときを考えます。
+このように場合分けできます。
 . {{attachment:crane41.png}}
テストタイル２つを組み合わせて記述できます。
 . １つめのテストタイルの「いいえ」のところに２つめのテストタイルを入れる

==== クレーンと一緒に動く ====
-行 100:
+行 152:
- . クレーンでつかまれているかどうかの判定は'''タートルへの距離'''を用いて行えます。
+クレーンでつかまれているかどうかの判定は'''タートルへの距離'''を用いて行えます。
-行 107:
+行 159:
-クレーンから落ちるときを考えます。
 . 下方向に動かすにはｘ座標を使うのが簡単です。
+==== クレーンから落ちるとき ====
 . 下方向に動かすにはｙ座標を使うのが簡単です。
-行 115:
+行 168:
-３つの状態をまとめると
+==== ３つの状態をまとめると ====
-行 118:
+行 171:
-  . そうではなくて
+ . そうではなくて
-行 121:
+行 174:
-   . そうでない時は
+  . そうでない時は
-行 134:
+行 187:
-----

=== 補足 ===

次のようなことを行いたいと思っていることでしょう。

 . クレーンが開いたり閉じたりする。
 . Bボタンは１回しか押せないようにする。

ある機能を使うと簡単にできます。
近々解説します。

Quick Links

Search Wiki

Page Tools