ポンクソフト

ブロック崩し - Flash(ActionScript)で様々なゲームを作ろう

前ページ Flash(ActionScript)で様々なゲームを作ろう TOP 次ページ

目次

  1. Flash(ActionScript)で様々なゲームを作ろう
  2. イライラ棒もどき
  3. 忍者アクション
  4. ブロック崩し
  5. リアルタイム・オセロ
  6. パットゴルフ

実行画面

普通のブロック崩しです。マウスでパドルを動かしてブロックを全て消すとクリア。ボールの跳ね返りかたがおかしい部分はプログラムを簡潔にするためなのでご勘弁ください。

.fla ファイルダウンロード

今回のポイント

画面作成

まずステージ・ステージに乗せるシンボルなどを作ってゆきます。

ステージのプロパティ

最初にステージのプロパティを適当に設定します。この解説で使っているムービーでは、サイズを「320×240」、背景色を「#FFD3EF」、フレームレートを「30fps」としています。

ゲーム開始画面の作成

1フレーム目にゲーム開始画面を適当に作成して、スタート用のボタンシンボルを作って乗せてください。
block_title.gif

ゲーム画面の作成

2フレーム目のメインのゲーム画面を作成します。まず2フレーム目にキーフレームを作成し中身を全て削除します。次に画面下部中央にパドルのムービークリップシンボルを作成し、ステージ上のインスタンスに「pad_mc」と名前を付けます。次にボールのムービークリップシンボルを作成し、ステージ上のインスタンスに「ball_mc」と名前を付けます。最後に画面上部にブロックを配置するエリアを四角形で描き、ムービークリップシンボルに変換してステージ上のインスタンスに「area_mc」と名前を付けます。
block_main.gif
パドルとボールの中心点は画像の中心、ブロック配置エリアの中心点は、左上隅にしてください。
block_area.gif

ゲームクリア画面の作成

次に3フレーム目にゲームクリア画面を作成します。まず3フレーム目にキーフレームを作成し中身を全て削除し、ゲームクリア画面を適当に作成してください。
block_clear.gif

ActionScript の記述

続いて、フレームやムービークリップに ActionScript を記述して行きます。

1フレーム目のアクション

1フレーム目をクリックして、以下のフレームアクションを記述してください。
stop();
ゲーム画面に移行しないようにストップします。

スタートボタンのアクション

1フレーム目のスタートボタンをクリックして、以下のボタンアクションを記述してください。
on(release) {
  gotoAndStop(2);
}
ボタンが押されたらゲーム画面に移行します。

2フレーム目のアクション

2フレーム目をクリックして、以下のフレームアクションを記述してください。
score = 0;              // スコア
bnum_x = 6;              // 横ブロック数
bnum_y = 4;              // 縦ブロック数
bsize_w = area_mc._width / bnum_x;  // ブロック横サイズ
bsize_h = area_mc._height / bnum_y;  // ブロック縦サイズ
b_array = new Array();        // ブロックがあれば true

area_mc._visible = false;
// 全ブロック表示
for (var y = 0; y < bnum_y; y++) {
  b_array[y] = new Array();
  for (var x = 0; x < bnum_x; x++) {
    b_array[y][x] = true;
    drawBlock(x, y, 0xF5F7A4, 0xFFAADE);
  }
}

// ブロック当たり判定
function hitBlock() {
  var x = Math.floor((ball_mc._x - area_mc._x) / bsize_w);
  var y = Math.floor((ball_mc._y - area_mc._y) / bsize_h);
  if (x < 0 || x >= bnum_x || y < 0 || y >= bnum_y) return false;
  if (b_array[y][x] == false) return false;
  drawBlock(x, y, 0xFFD3EF, 0xFFD3EF);
  b_array[y][x] = false;
  score++;
  if (score >= bnum_y * bnum_x) gotoAndStop(3);
  var px = (ball_mc._x - area_mc._x) % bsize_w;
  var py = (ball_mc._y - area_mc._y) % bsize_h;
  if (px < 6 || px >= bsize_w - 6) ball_mc.vx = -ball_mc.vx;
  if (py < 4 || py >= bsize_h - 4) ball_mc.vy = -ball_mc.vy;
  return true;
}

// ブロック描画 c:描画色 lc:ライン色
function drawBlock(x, y, c, lc) {
  var sx = area_mc._x + x * bsize_w;
  var sy = area_mc._y + y * bsize_h;
  var ex = area_mc._x + (x + 1) * bsize_w - 3;
  var ey = area_mc._y + (y + 1) * bsize_h - 3; 
  beginFill(c);
  lineStyle(2, lc);
  moveTo(sx, sy);
  lineTo(ex, sy);
  lineTo(ex, ey);
  lineTo(sx, ey);
  endFill();
}
解説は後述します。

パドルのアクション

2フレーム目のパドルをクリックして、以下のムービークリップアクションを記述してください。
onClipEvent(enterFrame) {
  _x = _root._xmouse;
}
パドルをマウスに追従するようにしています。

ボールのアクション

2フレーム目のボールをクリックして、以下のムービークリップアクションを記述してください。
onClipEvent(load) {
  vx = 4;
  vy = 4;
}

onClipEvent(enterFrame) {
  // 移動
  _x += vx;
  _y += vy;
  if (_x < 0 || _x > Stage.width) vx = -vx;
  if (_y < 0) vy = -vy;
  // パドルとの当たり判定
  if (_root.pad_mc.hitTest(_x, _y, false)) {
    vy = -vy;
    vx = (_x - _root.pad_mc._x) * 12 / _root.pad_mc._width;
  }
  // ブロックとの当たり判定
  _root.hitBlock();
  // ゲームオーバー判定
  if (_y > Stage.height) {
    _root.clear();
    _root.gotoAndPlay(1);
  }
}
解説は後述します。

実行

以上が完成したら保存してゲームを実行してみてください。

ActionScript 解説

2フレーム目のフレームアクション解説

ここのフレームアクションには、ブロックに関する処理が記述してあります。
score = 0;
得点です。今回は表示されませんが、ゲームクリアのチェックに使っています。
bnum_x = 6;
bnum_y = 4;
画面に表示するブロック数です。bnum_x が横、bnum_y が縦のブロック数です。これを変更すればブロック数を変えることができます。
bsize_w = area_mc._width / bnum_x;
bsize_h = area_mc._height / bnum_y;
ひとつのブロックの幅と高さです。ブロックを描画するエリア (area_mc) の大きさからブロックの数を割って算出しています。
b_array = new Array();
ブロックが存在するかチェックするための2次元配列です。(x, y) にブロックが存在すれば b_array[y][x] が true になり、存在しなければ false となります。ActionScript における配列の作り方は後述します。
area_mc._visible = false;
ブロックを描画するエリアは見えていてはいけないので最初に消しておきます。
for (var y = 0; y < bnum_y; y++) {
  b_array[y] = new Array();
  for (var x = 0; x < bnum_x; x++) {
    b_array[y][x] = true;
    drawBlock(x, y, 0xF5F7A4, 0xFFAADE);
  }
}
ゲーム開始前に、まず全てのブロックを描画します。ブロックチェック配列 b_array の値をセットし、ブロック描画関数 drawBlock を呼び出します。drawBlock 関数については後述します。
function hitBlock() {
ブロックとボールとの当たり判定を行う関数です。
var x = Math.floor((ball_mc._x - area_mc._x) / bsize_w);
var y = Math.floor((ball_mc._y - area_mc._y) / bsize_h);
ここで、ボールがどこのブロックのエリアに入っているかを計算しています。このブロック座標 (x, y) がどのブロックを表すかは以下の図を参照してください。ちなみに、関数の中で var を使って変数宣言するとローカル変数となり、関数の中でのみ使える変数となります。
block_xy.gif
if (x < 0 || x >= bnum_x || y < 0 || y >= bnum_y) return false;
ボールが area_mc の範囲外ならば、何もせずに戻ります。
if (b_array[y][x] == false) return false;
ボールのあるエリアのブロックが既に消えていれば何もせずに戻ります。
drawBlock(x, y, 0xFFD3EF, 0xFFD3EF);
背景色でブロックを書き直すことによって、ブロックを消します。
b_array[y][x] = false;
チェック配列の値をクリアします。
score++;
得点を追加します。
if (score >= bnum_y * bnum_x) gotoAndStop(3);
得点がブロック数と同じになれば全て消えたということなので、ゲームクリア画面に移行します。
var px = (ball_mc._x - area_mc._x) % bsize_w;
var py = (ball_mc._y - area_mc._y) % bsize_h;
(px, py) は対象のブロックの左上を (0, 0) としたときのボールの相対座標になります。
block_sotai.gif
if (px < 6 || px >= bsize_w - 6) ball_mc.vx = -ball_mc.vx;
ブロックの右端または左端に当たったとき、ボールの x 方向の速度を反転します。
if (py < 4 || py >= bsize_h - 4) ball_mc.vy = -ball_mc.vy;
ブロックの上端または下端に当たったとき、ボールの y 方向の速度を反転します。
function drawBlock(x, y, c, lc) {
ブロック描画関数です。c がブロックの塗り色、lc がブロックの線の色です。
  var sx = area_mc._x + x * bsize_w;
  var sy = area_mc._y + y * bsize_h;
  var ex = area_mc._x + (x + 1) * bsize_w - 3;
  var ey = area_mc._y + (y + 1) * bsize_h - 3; 
描画するブロックの左上、右下座標を計算し、それぞれ (sx, sy)、(ex, ey) に代入します。
beginFill(c);
Drawing API によって線と塗りを開始します。c が塗り色となります。
lineStyle(2, lc);
線のスタイルを設定します。太さ2、色が lc の線になります。
moveTo(sx, sy);
現在の描画位置を (sx, sy) に移動します。線は引かれません。
  lineTo(ex, sy);
  lineTo(ex, ey);
  lineTo(sx, ey);
lineTo によって、現在の描画位置から、引数で指定した座標まで線が引かれます。
endFill();
引かれた線で囲まれた部分に、beginFill で指定した塗りを適用します。線が開いている場合は、自動的に始点と終点が閉じられます。

ボールのムービークリップアクション解説

onClipEvent(load) {
  vx = 4;
  vy = 4;
}
vx, vy はボールの速度です。ゲーム開始時は右下に向かうようにしています。
onClipEvent(enterFrame) {
毎フレームの処理です。
_x += vx;
_y += vy;
ボールの座標に速度を加えます。
if (_x < 0 || _x > Stage.width) vx = -vx;
if (_y < 0) vy = -vy;
画面の左・右・上端に当たったときは、速度を反転してボールが反射するようにします。
if (_root.pad_mc.hitTest(_x, _y, false)) {
パドルとの当たり判定を行っています。
vy = -vy;
vx = (_x - _root.pad_mc._x) * 12 / _root.pad_mc._width;
ボールとパドルが当たったら、y 方向の速度を反転し、x 方向はパドルの当たった位置によって速度を変えます。パドルの左に当たるほど左方向の速度が速く、パドルの右に当たるほど右方向の速度が速くなるようにします。
_root.hitBlock();
ボールとブロックとの当たり判定を行います。
  if (_y > Stage.height) {
    _root.clear();
    _root.gotoAndPlay(1);
  }
ボールの y 座標が画面下に来たときはすなわちゲームオーバーなので、Drawing API の clear メソッドによって残ったブロックを全て消去し、ゲーム開始画面に戻ります。

ActionScript での配列の作り方

ary = new Array();
によって1次元配列を生成することができます。生成した後は
ary[0] = 1;
ary[1] = "abcde";
ary[2] = true;
のように各要素を使うことができます。上記のように要素には違う型の値を入れることもできます。
ary = new Array(1, "abcde", true);
のように配列生成のときに初期かも同時に行うことができます。また省略した書き方で、
ary = [1, "abcde", true];
でもOKです。
2次元配列は、配列の各要素を配列にすることで行います。
ary = new Array();
ary[0] = new Array();
ary[1] = new Array();
ary[2] = new Array();
こんな感じです。
前ページ Flash(ActionScript)で様々なゲームを作ろう TOP 次ページ
このエントリーをはてなブックマークに追加 そっか0

このページに関するコメントをどうぞ

お名前:


ポンポン
いままで、書いたのは、忍者。flaについてです。
解決しました。結局のところ、私のソフトは、挿入から新規シンボルを作る、シンボルに変換があるが、シンボルの変換のほうが効果ありでした。これで、スムーズのライブラリに入りました。(これがうまくいかなかった)ここから、リンケージを押して、解説のようになります。
今のとき、インスタンスを消します。ライブラリを広げると、書き出しTamaとかかれています。はじめて、なんとなく理解できました。ほかのゲームんもチャレンジしますね。仮想メモリは何のことだったのか?
2017/08/11 16:20

ポンポン
ライブリをあたると、Tamaのシンボルの図がないなぜ?インスタンスがドラグできない。疑問です。よろしく。
2017/08/10 20:17

ポンポン
目次を見ると、次の章にゲーム5個の作り方があった。downloadしたが、イライラ、gplfが形式があいません。なぜ?
ニンジヤ.flaに取り組んだ。問題が発生。手裏剣がとばない。そこで、メモリが不足したいる。flashの仮想メモリを増やしなさい?
c:、d:、をあけたが、だめ。仮想メモリを増やすのはどうするの。
手裏剣=temi_mcのようにインスタンス名をつけないの?
押してください。難しいね。
2017/08/10 18:13

ポンポン
このページの記事でゲームができた。
僕のflashmxは[flashムービのアイデア箱」の付録に30日限定のものでいした。ところで、7で動かしたいねですが、インストはするのでが、画面にアイコンまできます。しかし、これこれからはダメ。なんとかできないでしようか。いまうごいているのは、昔のwin-meなんです。Xpだったら動く?と思います。(先日、こわれた)
何で7は動かない?
質問でした。
2017/08/09 16:08

古羽嘉禎
ActionScript3.0出来ないな…
2016/12/05 17:33

naga3
お使いのFlashのバージョンと、
OSを教えてもらえませんか?
2013/05/25 08:50

dhipo2
度々すみません・・・
このページとは、
ゴルフゲームのページの一番上の事です。
よろしくお願いします。
2013/05/19 10:39

chipo2
このページの一番上の方の”実行画面”が、動かないのですが・・・
正確に言うと、矢印は動くのですが、
クリックしても、ボールが飛ばないのです・・・。
(ボールが飛んだような絵が一瞬出て、戻ってしまいます)
私のPCのフラッシュのバージョンが古いとかいった理由でしょうか・・・;;
すみませんが、教えてください。
2013/05/19 10:37

naga3
はいFlashないと出来ないです。
2013/04/24 08:08


何を当たり前のこと言ってるんですか?
2013/03/19 15:51

残りを読む »