プログラミング言語「ドリトル」

大阪電気通信大学 兼宗研究室

ユーザ用ツール

サイト用ツール


ch_pingpongv331

差分

この文書の現在のバージョンと選択したバージョンの差分を表示します。

この比較画面にリンクする

両方とも前のリビジョン 前のリビジョン
次のリビジョン
前のリビジョン
ch_pingpongv331 [2020/01/31 17:07]
klab
ch_pingpongv331 [2020/07/11 09:24]
klab
ライン 1: ライン 1:
-#  ​ネットワークゲームを作ろう +#  ピンポンゲーム
-ネットワーク機能を使って、教室の中で友だちとゲームをするプログラムを作ってみよう。題材は、**ch_pingpong** で作ったピンポンゲームを対戦型に拡張したものである。+
  
-作成したゲーム画面を示す。画面は左側と右側のプログラム異なるが、内容ほとんど同じであるため左側のプログムを例に説明る。ピンポンゲームと変わらない部分については、**ch_pingpong** ​参照しほしい+Activityでは、ボールをケットで打ち返すピンポンゲームを作っみる
  
  
-{{:​pasted:​20180103-163017.png?​300}} {{:​pasted:​20180103-163027.png?​300}}+##  作成するゲーム 
 + 
 + 
 +画面には四角い枠が描かれており、その中にボールの役割をするタートルと、長方形のラケットがある。ボールはラケットや壁にぶつかると跳ね返る。ラケットは左側の2個のボタンで上下に操作する。 
 + 
 +ボールを制限時間の間、ラケットで打ち返し続けられたらクリアとなる。一回でもラケットの後ろの壁にボールがぶつかると、ゲームオーバーとなる。 
 + 
 +{{:​pasted:​20180103-152530.png}} 
  
  
 ##  壁を作る(ステップ1) ##  壁を作る(ステップ1)
-最初に、ゲームに登場するオブジェクトを画面に置く。上下にある長方形は、ボールを跳ね返す壁である。左の小さいほうの長方形はボールを打ち返すパドルである。大きいほうの長方形は、パドルでボールを打ち返せなかったことを知るための壁である。ボールがこの壁にぶつかると、ゲームオーバーになる。 
  
-{{:​pasted:​20180103-163057.png}}+最初に、ゲームに登場するオブジェクトを画面に置くことにする。このゲームでは、5個の長方形が登場する。上下と右にある長方形は、ボールを跳ね返す壁である。左には2つの長方形が存在する。小さいほうはパドルである。ゲームをする人は、このパドルを上下に動かしてボールを打ち返す。大きいほうは、パドルでボールを打ち返せなかったことを知るための壁である。ボールがこの壁にぶつかると、ゲームオーバーになる。 
 + 
 +{{:​pasted:​20180103-152549.png}} 
 + 
 +次のプログラムでは、5個の長方形を作成している。プログラムを簡単にするために、**線の太さ**で太さ20の線を描くことで長方形とした。続いて、コの字の形に線を描き、「壁」という名前の図形を作っている。続いて上を向いた後、左壁とパドルを作っている。 
 + 
 +このプログラムのように、座標を指定して図形やボタンを画面に置く場合には、終了ボタンの隣にある**方眼紙**をチェックして、位置を確認しながらプログラムを作ると便利である。
  
-次のプログラムでは、4個の長方形を作成している。プログラムを簡単にするために、**線の太さ**で太さ20の線を描くことで長方形とした。続いて、上壁を作ってから複製して下壁を作り、続いて左壁とパドルを作っている。 
  
 <​code>​ <​code>​
ライン 19: ライン 30:
  ​かめた=タートル! 作る。  ​かめた=タートル! 作る。
  ​かめた!(緑)線の色 20 線の太さ。  ​かめた!(緑)線の色 20 線の太さ。
- 壁=かめた!550 歩く ​図形を作る -200 200 位置。 + ​かめた!500 歩く 90 右回り 420 歩く 90 右回り 500 歩く。 
- ​壁!作る -200 -220 位置。 + 壁=かめた図形を作る -200 200 位置。 
- ​かめた!90 ​回り。+ ​かめた!90 ​回り。
  ​左壁=かめた!(黄)線の色 440 歩く 図形を作る -210 -230 位置。  ​左壁=かめた!(黄)線の色 440 歩く 図形を作る -210 -230 位置。
  ​パドル=かめた!(青)線の色 120 歩く 図形を作る -190 -210 位置。  ​パドル=かめた!(青)線の色 120 歩く 図形を作る -190 -210 位置。
ライン 29: ライン 40:
  
 ##  パドルを動かす(ステップ2) ##  パドルを動かす(ステップ2)
-画面にボタンを表示して、パドルを上下に動かせるようにする。次のプログラムでは、画面の左側に「上ボタン」と「下ボタン」という名前の2つのボタンを表示し、ボタンが押されるか上下の矢印キーが押されたときにパドルを上下に50ずつ移動させている。 
  
-{{:​pasted:​20180103-163117.png}}+画面にボタンを表示して、パドルを上下に動かしてみよう。次のプログラムでは、画面の左側に「上ボタン」と「下ボタン」という名前の2つのボタンを表示して、それぞれが押されたときにパドルを上下に50ずつ移動させている。今回はボタンの2個目のパラメータに**UP**と**DOWN**を指定することで、上下の矢印キーでも操作できるようにした。 
 + 
 + 
 +{{:​pasted:​20180103-152615.png}}
  
  
ライン 45: ライン 58:
  
  
-##  ボールきを定義(ステップ3) +##  ボールす(ステップ3)
-「かめた」はボールの役割をする。毎回少しずつ違った位置からゲームが始まるように、横の位置は左右の中央で、縦の位置は乱数を使い、-149〜150の範囲でランダムになるようにした。壁にぶつかると、自然な角度で跳ね返る。+
  
-<​code>​ +「かめた」 には、壁やパドルを描いた後で、ボールの役割してもらうことにする。次のログラムでは、かめたが移動したときに線を引かないように、**ペンなし**を実行している。ボールは、最初は右の壁にかって動くようにしたタートルの初期位置は、**乱数**を使い、少しずつ異なる位置ら動き始るようにし。横の位置x座標)は「乱数(200)」で1から200の値に、縦の位置(y座標)は「乱数(300)- 150」で-149ら150の値になる。タートルの初期角度は45度で固定とした
- // ​ボールの動き定義する(ステッ3) +
- かめたペンなし ​45  +
- かめた!0(乱数(300)-150)位置。 +
- めた:衝突=タートル:跳ね返る +
-</​code>​+
  
-{{:​pasted:​20180103-163139.png}}+タートルが壁やパドルに衝突したときは、跳ね返る動作をすることが望ましい。そこで、かめたの**衝突**には、タートルオブジェクトの**跳ね返る**を設定した。タートルのぶつかった向きに合わせて、自然な角度で跳ね返ることができる。
  
 +最後にタイマーを生成し、「かめた!20 歩く」を0.1秒間隔で60秒間繰り返し実行するようにした。実行すると、かめたが壁で囲まれた空間を跳ね返りながら動き回る。
  
-##  通信を準備する(ステップ4) 
-ゲームをする2つの画面の間では、ボールがどのような状態にあるかという情報を、お互いに交換して合わせておく必要がある。たとえば、ひとつの画面でパドルと衝突して跳ね返ったら、もうひとつの画面でも同様に向きを変える必要がある。 
  
-そこで、自分のボールの状態をサーバーに書き込む「書き込み」というメソッドと、相手のボールの状態をサーバーから読み出す「読み出し」というメソッドを定義することにした。 +{{:​pasted:​20180103-152635.png}}
- +
-次のプログラムで、「書き込み」の中では、現在のボール(「かめた」)から位置と向きの情報を取り出し、それぞれ「x」、「y」、「t」という名前でサーバーに保存している。「読み出し」の中では、サーバーから位置と向きの情報「x」、「y」、「t」を取り出し、ボール(「かめた」)にセットしている。 +
- +
-ステップ4からステップ6までを実行するには、サーバーと相手の画面が必要になる。詳しくはステップ7で説明する。+
  
 <​code>​ <​code>​
- // ​通信準備(ステップ4) + // ​ボール動かす(ステップ3) 
- ​かめた:書き込み=「 + ​かめた! ペンなし。 
-  サーバー!"​x"​ (かめた!横の位置?​) 書く。 + ​かめた!(乱数(200))(乱数(300)-150)位置。 
- ​ サーバー!"​y" ​かめた!縦の位置?) 書く。 + ​かめた!45 向き。 
-  サーバー!"​t"​ (かめた!向き?) 書く + ​かめた:衝突トル:跳ね返る。 
- 」。 + 時計タイマー! ​作る 60秒 時間「かめた!20 歩く実行
- ​かめた:読み出し「 +
- ​ x=サバー!"​x"​ 読む。 +
-  yサーバー!"​y"​ 読む。 +
- ​ t=サーバー!"​t"​ 読む。 +
-  かめた!(x)(y)位置 (t)向き +
- 」。+
 </​code>​ </​code>​
  
  
  
-##  通信しながらボールを動かす(ステップ5) 
-ステップ5は、このプログラムの中心的な部分である。行っている処理は画面上のボールを動かすことだが、ボールは両方の画面で同じように表示される必要があるため、サーバーを介した通信を行うことで、ボールの状態をお互いに合わせている。 
  
-次のプログラムでは、最初に、サーバーに接続する。続いて、ステップ4で定義した「書き込み」を実行して、ボールの位置をサーバーに書き込む。そしてタイマーを作成する。ここまでが、プログラムを開始するときの動作である。 +##  ​ゲームの勝敗判定する(ステップ4
- +
-続いて、ゲームの処理行う。本質的な動作は次の1行で記述でき。つまり、タイマーでボール役の「かめた」を前進させる動作である。 +
-<​code>​ +
- ​時計!「かめた!10 歩く」実行。 +
-</​code>​ +
-ここでは、他の画面とボールの状態を合わせるために、最初に「読み出し」でサーバーから相手のボールの状態を取得して、ボールを正しい位置に置く。続いてボールを移動し、移動後の新しい状態を「書き込み」でサーバーに書き込んでいる。 +
- +
- +
-<​code>​ +
- // 通信しながらボールを動かす(ステップ5 +
- ​サーバー!"​localhost"​ 接続。 +
- ​かめた!書き込み。 +
- ​時計=タイマー! 作る 60秒 時間 0.2秒 間隔。 +
- ​時計!「 +
- ​ かめた!読み出し。 +
- ​ かめた!10 歩く。 +
- ​ かめた!書き込み。 +
- ​」実行。 +
-</​code>​+
  
 +このゲームでは、パドルでボールを打ち返せずに1回でも左壁にボールが衝突したら負け(ゲームオーバー)とする。そして、タイマーでボールが動いている時間内にボールが左壁に衝突しなければ勝ち(ゲームクリア)である。
  
 +次のプログラムでは、勝敗を判定するために、「ゲームクリア」という変数を導入した。この変数には**はい**または**いいえ**という真偽値を代入して使う。初期値は「はい」であるが、ボールが左壁に衝突したときは「いいえ」 を代入する。このとき、「ゲームクリア」をルートのプロパティとして扱うために、前に「:」を付けている。そして、タイマーの実行を中断している。
  
-##  ゲ勝敗を判定する(ステップ6) +タイマが終了した後処理は「最後に実行」で行う。タイマーがどのように終了したのかは、「ゲームクリア」の値で判定している。値が真(はい)の場合は、無事に60秒間経って終了したので、青い字で「ゲームクリア」を表示している。値が偽(いいえ)場合、左壁に衝突して中断したので、赤い字で「ゲームオーバー」を表示すようにした。
-最後にタイマーが終了するまでゲームを続けられた場合は「ゲームクリア」というメッセージを表示る。部分ピンポンゲームと同じであため、詳くは**ch_pingpong** を参照され+
  
 <​code>​ <​code>​
- // ゲームの勝敗を判定する(ステップ6+ // ゲームの勝敗を判定する(ステップ4
  ​ゲームクリア=はい。  ​ゲームクリア=はい。
  ​左壁:衝突=「:ゲームクリア=いいえ。時計! 中断」。  ​左壁:衝突=「:ゲームクリア=いいえ。時計! 中断」。
ライン 126: ライン 102:
 </​code>​ </​code>​
  
 +{{:​pasted:​20180103-152657.png}}{{:​pasted:​20180103-152707.png}}
  
  
-ステップ1からステップ6までの全体のプログラムを掲載しておく。これは左側の画面で実行するプログラムである+以上でピンポンゲームは完成である。実行すると、左壁に衝突したときは「ゲームオーバー!」が表示される。時間内にすべてのボールをパドルで打ち返せたときは、「ゲームクリア!」が表示される。 
 + 
 +最後にステップ1からステップ4までの全体のプログラムを掲載しておく。
  
 <​code>​ <​code>​
ライン 134: ライン 113:
  ​かめた=タートル! 作る。  ​かめた=タートル! 作る。
  ​かめた!(緑)線の色 20 線の太さ。  ​かめた!(緑)線の色 20 線の太さ。
- 壁=かめた!550 歩く ​図形を作る -200 200 位置。 + ​かめた!500 歩く 90 右回り 420 歩く 90 右回り 500 歩く。 
- ​壁!作る -200 -220 位置。 + 壁=かめた図形を作る -200 200 位置。 
- ​かめた!90 ​回り。+ ​かめた!90 ​回り。
  ​左壁=かめた!(黄)線の色 440 歩く 図形を作る -210 -230 位置。  ​左壁=かめた!(黄)線の色 440 歩く 図形を作る -210 -230 位置。
  ​パドル=かめた!(青)線の色 120 歩く 図形を作る -190 -210 位置。  ​パドル=かめた!(青)線の色 120 歩く 図形を作る -190 -210 位置。
ライン 143: ライン 122:
  ​上ボタン=ボタン! "​上"​ "​UP"​ 作る -380 50 位置。  ​上ボタン=ボタン! "​上"​ "​UP"​ 作る -380 50 位置。
  ​下ボタン=ボタン! "​下"​ "​DOWN"​ 作る -380 0 位置。  ​下ボタン=ボタン! "​下"​ "​DOWN"​ 作る -380 0 位置。
- ​上ボタン:動作=「パドル! 0 50 移動する」。 
- ​下ボタン:動作=「パドル! 0 -50 移動する」。 
- // (続き) 
- // ボールの動きを定義する(ステップ3) 
- ​かめた!ペンなし 45 向き。 
- ​かめた!0(乱数(300)-150)位置。 
- ​かめた:衝突=タートル:跳ね返る。 
-  
- // 通信を準備する(ステップ4) 
- ​かめた:書き込み=「 
- ​ サーバー!"​x"​ (かめた!横の位置?​) 書く。 
- ​ サーバー!"​y"​ (かめた!縦の位置?​) 書く。 
- ​ サーバー!"​t"​ (かめた!向き?​) 書く 
- ​」。 
- ​かめた:読み出し=「 
- ​ x=サーバー!"​x"​ 読む。 
- ​ y=サーバー!"​y"​ 読む。 
- ​ t=サーバー!"​t"​ 読む。 
- ​ かめた!(x)(y) 位置(t)向き 
- ​」。 
-  
- // 通信しながらボールを動かす(ステップ5) 
- ​サーバー!"​localhost"​ 接続。 
- ​かめた!書き込み。 
- ​時計=タイマー! 作る 60秒 時間 0.2秒 間隔。 
- ​時計!「 
- ​ かめた!読み出し。 
- ​ かめた!10 歩く。 
- ​ かめた!書き込み。 
- ​」実行。 
-  
- // ゲームの勝敗を判定する(ステップ6) 
- ​ゲームクリア=はい。 
- ​左壁:衝突=「:ゲームクリア=いいえ。時計! 中断」。 
- ​時計!「 
- ​  「ゲームクリア==はい」! なら「 
- ​    ラベル! "​ゲームクリア! "​作る (青)文字色。 
- ​  」そうでなければ「 
- ​    ラベル! "​ゲームオーバー! "​作る (赤)文字色。 
- ​  」実行。 
- ​」最後に実行。 
-</​code>​ 
- 
- 
- 
- 
-##  プログラムを実行する(ステップ7) 
-この節で作成しているプログラムは、サーバーや相手の画面と協調して 
-動作するため、単体では動かない。実行するための手順を説明する。 
- 
-まず、サーバーを起動する。サーバーはどのコンピュータで起動しても 
-よいが、ここでは左側の役割をする画面を実行するコンピュータで動か 
-すことにする。サーバーを起動するには、ドリトルの編集画面(プログ 
-ラムを入力する画面)を開き、右側にある**server**をマウスでチェッ 
-クする。すると、現在使用中のPCのIPアドレス、および、サーバに送られたデータの情報が、画面右側に表示される。 
- 
-次に、右側の画面を実行するために、もうひとつドリトルの画面を起動 
-する。右側の画面で実行するプログラムを示す。左側の画面との違いは、 
-画面上のパドルなどが左右逆に配置されていることと、ボールの初期位 
-置をサーバーに設定しないこと、そしてボールが両方の画面で自然な位 
-置に表示されるように、ボールの位置を100だけ左にずらしてサーバー 
-に書き込んでいることである。 
- 
-このプログラムを左側の画面と同じコンピュータで実行する場合は変更 
-の必要はないが、別のコンピュータで実行する場合には、左側の画面の 
-コンピュータを実行しているコンピュータのホスト名またはIPアドレス 
-を調べて、プログラム中の「localhost」の部分を書き換える必要があ 
-る。 
- 
- 
-<​code>​ 
- // 壁を作る(ステップ1) 
- ​かめた=タートル! 作る。 
- ​かめた!(緑)線の色 20 線の太さ 180 右回り。 
- ​壁=かめた!550 歩く 図形を作る 200 200 位置。 
- ​壁!作る 200 -220 位置。 
- ​かめた!90 右回り。 
- ​左壁=かめた!(黄)線の色 440 歩く 図形を作る 210 -230 位置。 
- ​パドル=かめた!(青)線の色 120 歩く 図形を作る 190 -210 位置。 
- // (続き) 
- // パドルを動かす(ステップ2) 
- ​上ボタン=ボタン! "​上"​ "​UP"​ 作る 230 50 位置。 
- ​下ボタン=ボタン! "​下"​ "​DOWN"​ 作る 230 0 位置。 
  ​上ボタン:動作=「パドル! 0 50 移動する」。  ​上ボタン:動作=「パドル! 0 50 移動する」。
  ​下ボタン:動作=「パドル! 0 -50 移動する」。  ​下ボタン:動作=「パドル! 0 -50 移動する」。
    
- // ボールの動き定義(ステップ3)+ // ボールを動かす(ステップ3)
  ​かめた! ペンなし。  ​かめた! ペンなし。
- ​かめた!0(乱数(300)-150)位置。+ ​かめた!(乱数(200))(乱数(300)-150)位置。
  ​かめた!45 向き。  ​かめた!45 向き。
  ​かめた:衝突=タートル:跳ね返る。  ​かめた:衝突=タートル:跳ね返る。
 + ​時計=タイマー! 作る 60秒 時間「かめた!20 歩く」実行。
    
- // 通信を準備する(ステップ4) + // ゲームの勝敗を判定する(ステップ4
- ​かめた:書き込み=「 +
- ​ サーバー!"​x"​ (100+(かめた!横の位置?​)) 書く。 +
- ​ サーバー!"​y"​ (かめた!縦の位置?​) 書く。 +
- ​ サーバー!"​t"​ (かめた!向き?​) 書く +
- ​」。 +
- ​かめた:読み出し=「 +
- ​ x=サーバー!"​x"​ 読む。 +
- ​ y=サーバー!"​y"​ 読む。 +
- ​ t=サーバー!"​t"​ 読む。 +
- ​ かめた!(x-100)(y)位置(t)向き +
- ​」。 +
-  +
- // 通信しながらボールを動かす(ステップ5) +
- ​サーバー!"​localhost"​ 接続。 +
- //​かめた!書き込み。 +
- ​時計=タイマー! 作る 60秒 時間 0.2秒 間隔。 +
- ​時計!「 +
- ​ かめた!読み出し。 +
- ​ かめた!10 歩く。 +
- ​ かめた!書き込み。 +
- ​」実行。 +
-  +
- // ゲームの勝敗を判定する(ステップ6+
  ​ゲームクリア=はい。  ​ゲームクリア=はい。
  ​左壁:衝突=「:ゲームクリア=いいえ。時計! 中断」。  ​左壁:衝突=「:ゲームクリア=いいえ。時計! 中断」。
ライン 269: ライン 143:
  ​」最後に実行。  ​」最後に実行。
 </​code>​ </​code>​
 +
 +今後の改良としては、難易度を選べるようにして、実行時間、ボールの速さ、パドルの大きさなどを変えられるようにしてもよいかもしれない。また、パドルで打ち返した回数をカウントし、得点として表示することも考えられる。
  
ch_pingpongv331.txt · 最終更新: 2020/07/11 09:24 by klab