ブロック崩し Python(Brython)版

Monaca Educationで新規プロジェクトを作成するときに、「ブロック崩し」を選択することができます。プロジェクトの作成、プレビューの利用、ソースコードの編集・保存など、Monaca Educationの基本操作に慣れる機会として利用できます。このプロジェクトのテンプレート「ブロック崩し」は、JavaScriptでコーディングされているので、JavaScriptの学習用教材としても使えます。

今回、Python(Brython)版を作成したので、紹介します。

なお、本プログラムは、BrythonのWebサイトのギャラリーページ（ https://brython.info/gallery/gallery_en.html ）にある「2D bricks game」のソースコードを参考にして、作成しました。

ブロック崩し Python(Brython)版のインポート

下記のボタンから、ブロック崩し Python(Brython)版をMonaca Educationにインポートできます。

Monaca Educationにブロック崩し Python(Brython)版をインポートする(要ログイン)

注意：下記で紹介しているのは、一般的なPython環境で動作するブロック崩しゲームプログラムではありません。Brython環境（※Webブラウザ上で動作する、JavaScriptによって実装されたPython実行環境）で動作するブロック崩しです。HTML Canvasなど、Web技術を利用して実現しているので、一般的なPython環境に移植することは簡単ではありません。

Monaca Educationにインポートして、参照・利用してください。

プログラムの概要

プロジェクトの中のindex.htmlと、python.pyが、ブロック崩しプログラムの実体です。

index.html

index.htmlの中には、タグ<img>と、タグ<canvas>を記載しています。

タグ<img>で、画像ファイルを読み込んでいますが、同時に「display:none」というスタイルを指定することで、表示はしないようにしています。ここでは画像を読み込むことだけ行っています。画面の背景に表示する処理を、python.pyの中に記述しています。

タグ<canvas>は、HTML Canvasを用意するタグです。このキャンバスに絵を描くことで、ゲームとしてのビジュアルを実現します。キャンバスの幅と高さを指定するとともに、ID属性を使って”myCanvas”という名前を付けています。python.pyのプログラムの中から、この名前”myCanvas”を指定して、画面に画像を表示させています。

python.py

python.pyが、ブロック崩しプログラムの本体です。コメントを含めると300行ほどのプログラムです。

以下では、全行の解説はせず、概要を説明した上で、いくつか簡単なカスタマイズ例を紹介します。

python.pyの概要

以下のpython.pyの説明は、いったん読み飛ばしても大丈夫です。次の節で、簡単な例を示していますので、カスタマイズに興味のある方はそちらをご覧ください。

要素の大きさや動作の設定:プログラム冒頭（23行目）から54行目まで

ブロック崩しの動作を左右する変数を定義し、値を設定しています。ブロックの配置や、ブロックのサイズ、パドルやボールのサイズなどを決めています。また、ボールの動き（加速度や、ボールがパドルに当たったときの跳ね返りの振る舞い）を決めているのも、この部分です。

ブロックの情報:57行目から62行目まで

ボールを当てて崩す「ブロック」についてのプログラム部品です。

この部分で、ブロックは、ブロックを表示する座標（X、Yの値）と、状態（ブロックがある・表示されているのか、崩されてない・表示されていないのかを表す。値が1ならブロックがある・表示されている状態）の情報を持つように作られています。

ゲームの本体:65行目から263行目まで

ここが、ブロック崩しゲームの本体です。

67行目〜78行目：画面上の様々な要素を初期化（※ゲーム開始時点の状態にする）しています。

82行目〜95行目：ボールの位置を初期化します。ゲーム開始時と、ボールを落としてしまって再開する時に、呼び出されます。

98行目〜122行目：ボールがブロックに当たったか判定します。ボールのX座標・Y座標の値を、すべてのブロックのX座標・Y座標の値と比較しています。ブロックに当たっていたら状態を変え、また得点を付けます。すべてのブロックを崩し終わったらゲーム終了ですが、その終了処理もここに記述されています。

125行目〜130行目：背景色を設定できます。今回公開しているサンプルプログラムでは、背景画像を上から貼り付けているので見えませんが、色を指定することができます。

133行目〜135行目：背景画像を設定しています。index.htmlのタグ<img>で読み込んだ画像を、ここで利用しています。

138行目〜147行目：ボールを描きます。指定された座標（X、Y）に、設定された半径の円を描き、色を指定して塗りつぶしています。

150行目〜161行目：パドルを描きます（※パドルは画面下にあって、マウスや矢印キーで操作する棒です）。指定された座標（X、Y）に、幅と高さを指定して長方形を描き、色を指定して塗りつぶしています。

165行目〜183行目：ブロックを描きます。二次元配列で管理されている全てのブロックの情報に、二重ループでアクセスします。ブロックの状態が１のもの（＝まだ崩されていないもの）について、座標（X、Y）とブロックの幅・高さを指定して長方形を描きます。

別の二次元配列（※29行目から35行目）で管理されている、ブロックの色の情報を使って色を指定し、塗りつぶしています。

186行目〜191行目：得点（スコア）を描きます。フォントや色を指定した上で、指定された座標に文字列を表示します。ソースコードの中に{self.score}という書き方がありますが、これは「変数の値を出力する」という意味です。

194行目〜199行目：残機の数を表示します。ゲーム開始時は、2回まで失敗できるようになっています。3回失敗するとゲームオーバーです。得点の表示と同様に、フォントや色を指定した上で、指定された座標に文字列を表示します。

204行目〜263行目：この関数draw()こそ、ゲームの動作の要です。１秒間に数十回、この処理が呼び出されることで、ゲームが動作しているように見えるのです（ボールやパドルが移動する。ボールが当たったブロックが壊れる）。上の行で定義された処理（関数）が呼び出され、ブロックやボール、パドル、スコア、残機が表示されます。ボールが壁や天井に当たったことの判定、ボールが床に落ちたかどうかの判定も、この部分で定義しています。

関数の定義の最後に、window.requestAnimationFrame(self.draw)という記述があります。これは、「次に画面の表示を刷新するとき、draw関数を呼び出しなさい」という意味です。この記述のおかげで、パラパラ漫画のように、短い時間に画像が更新されて、動いているように見えるのです。パラパラ漫画と違うのは、パラパラ漫画は「あらかじめ紙に描いておいた絵を使う」のに対して、ゲームは「一瞬ごとに絵を描いて、表示している」というところです。

269行目〜最後：プログラムの以上の行は、関数やクラスを定義しています。最後の30行余りは、定義した関数やクラスを呼び出して、ゲームを動作させています。

なお、276行目から294行目は、キーボードのキーを押す・離すイベントに応答する処理を定義し、イベントと関連付けています。@bind(document,”keydown”)という記述は、「イベントkeydown（キーボードのキーが押された）が起きたら、この関数keyDownHandlerを呼び出すように、束縛する（bindする）」という意味です。

最後の306行で、画像の描画（draw）を開始しています。ここからは１秒間に数十回、drawが呼び出されるという動作になります。