コンテンツにスキップ
プログラミング教材

旧・課題集３（ブロック崩し、パックマン、横スクロールアクションゲーム、三目並べ、オセロ、テトリス）

１．ブロック崩しを作ろう　【レベル８】

  1. 画面内にボールが動き回るようにしよう
  2. ラケットを配置して、左右のキーで動かそう
  3. ラケットにボールが当たったら跳ね返らせよう
  4. ブロックを配置しよう（配列とfor文を使うと簡単です）
  5. ボールがブロックに当たったらブロックが消えるようにしよう
  6. 画面内に得点を表示させよう
  7. ブロックが全部消えたら終了画面を表示させよう

応用問題

  1. ブロックは3回当たってから消えるようにしよう
  2. ブロックに1回当たるごとにブロックの色が変わるようにしよう
  3. ブロックが10個(個数はいくつでもよい)消えたらボールを１つ増やそう
  4. 効果音を追加しよう

サンプル例（オリジナル作品）

（旧さいたま校 Nさん）

（旧さいたま校 K君）

２．パックマン風ゲームを作ろう　【レベル８】

  1. はじめにマップ(ステージ)を描こう（ヒント1）
  2. パックマン(自分)を配置して、上下左右のキーで動かそう
  3. パックマンが壁に衝突すると進めないようにしよう
  4. マップ上にパックマンが食べるドット(えさ)を追加しよう
  5. パックマンがドットを食べると、ドットが消えるようにしよう
  6. ドットを食べた数を得点として表示させよう
  7. 敵を追加して動かそう
    1. 敵が壁に当たるとランダムに向きを変えてから動くようにしよう
    2. なるべくパックマンに向かってくるようにしよう
  8. ある位置をパックマンが通過したら、別の位置へワープさせよう
  9. ある時間が経過したら敵の動きを速くしよう
  10. パックマンが敵に当たると終了画面を表示させよう
  11. パックマンがドットを全部食べたら、次のステージへ移動させよう

応用問題

  1. 画面をスクロールさせよう（ヒント2)

サンプル例

（黄：パックマン、白：敵、赤：ドット）

ヒント1

例えば、こんなマップを描きたいとします。青色が川、緑色が陸です。

img01.png

このマップを正方形で分割して考えます。今回は、行数を5列数を6として分割しました。

img02.png

分割したそれぞれの正方形を、緑色は値「0」、青色の正方形は値「2」とします。 これを2次元配列で表すと次のようになります。

int map1 [][] = {
  {0, 0, 0, 2, 2, 0},
  {2, 2, 2, 2, 2, 0},
  {2, 2, 2, 2, 2, 0},
  {2, 2, 0, 0, 0, 0},
  {2, 2, 0, 0, 0, 0}
};

for文とif文を使えば、マップを簡単に描くことが出来ます。

for (int i = 0; i < 5; i++) {
  for (int j = 0; j < 6; j++) {
    if (map1[i][j] == 0) {
      fill(0, 255, 0);  // 緑
    } else if (map1[i][j] == 2) {
      fill(0, 0, 255);  // 青
    }
    noStroke();
    rect(j*50, i*50, 50, 50); // 正方形の幅は50
  }
}

上の例では、行数が5列数が6の2次元配列ですが、行列の数を増やすことで、広大なステージを作成することが出来ます。

ヒント2

画面のスクロールを行うには幾つかの方法がありますが、関数 translate を使うと簡単に実現出来ます。 https://processing.org/reference/translate_.html

３．横スクロールアクションゲームを作ろう　【レベル８】

  1. マップ(ステージ)を描こう
  2. 画面をスクロールさせよう（ヒント1)
  3. キャラクターをジャンプさせよう
  4. キャラクターの下が壁だったら止まるようにしよう
  5. キャラクターの上が壁だったら跳ね返るようにしよう
  6. キャラクターの右(左)が壁だったら進めないようにしよう
  7. 敵キャラを追加しよう
  8. アイテムを追加して、キャラクターがアイテムを取ったら10秒間(何秒でもよい)無敵にさせよう
  9. 別のマップ(2面)を作り、キャラクターがゴールしたら2面へ移るようにしよう

ヒント1

図の青い枠内が画面(見えている部分)だとすると、スクロール中はキャラクターが画面中央に常にいるようにします。但し画面の両端付近では、キャラクターは画面の左右に移動できるようにします。

img03.png

※動画内の横スクロールアクションゲームのコードです。

sketch_2DScrollActionGame.zip

zipファイル内の「sketch_to_TXTFile」はステージを作るためのプログラムです。 左クリック、右クリックでブロックを置いたり削除したりします。 また、sキーを押すとsketch_to_TXTFileフォルダ内に「field(数字).txt」という名前でtxtファイルが作られるので、中身をコピペするとステージ用の2次元配列の宣言が楽になると思います。 (コピペした時は末尾の「,」に注意してください) ステージの大きさを変えたい場合には、中のコードを書き換えてみてください。

４．三目並べを作ろう　【レベル８】

〇×ゲームと同じですね。

  1. 盤面を描こう(横3縦3で区切ります)
  2. マウスでクリックした位置に石を表示しよう
  3. 縦・横・斜めのどれかに同じ色の石が３つ揃ったら、終了するようにしよう
  4. コンピュータ対戦にしよう

応用問題

  1. 五目並べを作ろう(盤面は横19縦19で区切ります)

サンプル例

動画内の三目並べのコードです。

SANMOKU_NARABE.zip

５．オセロを作ろう　【レベル８】

  1. 盤面を描こう(横8縦8に区切ります)
  2. 中央に白と黒の石を斜めに２つ並べよう
  3. 相手の石を挟む位置をクリックした時、自分の石を表示して挟んだ石を自分の石の色に変えよう
  4. コンピュータ対戦にしよう

サンプル例（オリジナル作品）

（旧さいたま校 S君） （ランダムな位置に石を配置してから、白の手番のみで行っています）

６．テトリスを作ろう　【レベル８】

  1. 画面を作ろう (ヒント1)
  2. 落ちてくるブロックを一つ作ろう (ヒント2)
  3. ブロックを画面内に表示させよう (ヒント3)
  4. ブロックを上から落下させよう
  5. 左右のキーでブロックを動かそう
  6. ブロックが左右及び下の壁を突き抜けないようにしよう
  7. ブロックを積もう
    1. 下の壁に触れたらブロックを固定させよう
    2. ブロックを固定させたら上からまた落ちてくるようにしよう
    3. ブロックを固定させたら別のブロックが落ちてくるようにしよう
  8. ブロックが横に揃ったらその行を消そう
  9. 得点を表示しよう
  10. ある時間が経過したらブロックの落下速度を変えよう
  11. シフトキーでブロックを回転させよう

サンプル例

(ブロックの種類は３つのみ、回転なし)

ヒント1

画面は2次元配列を使って描きます。 サンプル例では、25行12列の2次元配列にしました。 画面の左右及び下端を壁にすると、当たり判定が簡単になります。

int ROW = 25;
int COL = 12;
int map[][] = new int [ROW][COL];


// 画面を描く
// 壁は値『1』その他は『0』として2次元配列mapの各データを設定する
  for (int i = 0; i < ROW; i++) {
    for (int j = 0; j < COL; j++) {
    /*
      ここに処理を書く
    */
    }
  }

ヒント2

落ちてくるブロックも2次元配列で作ります。 サンプル例では、横4縦4の2次元配列で作りました。

int BLOCK_ROW = 4;
int BLOCK_COL = 4;
int block[][] = new int [BLOCK_ROW][BLOCK_COL];


  // 正方形ブロックの場合
  // 値『1』はブロック、値『0』は表示しないとすると
  for (int i = 0; i < BLOCK_ROW; i++) {
    for (int j = 0; j < BLOCK_COL; j++) {
      block[i][j] = 0;
    }
  }
  block[1][1] = 1;
  block[1][2] = 1;
  block[2][1] = 1;
  block[2][2] = 1;

img04.jpg

ヒント3

例えばブロックを表す2次元配列全体を、map上の[0][4]の位置から表示させたい場合は、

int block_x = 4; // map上の位置x
int block_y = 0; // map上の位置y


for (int i = 0; i < BLOCK_ROW; i++) {
  for (int j = 0; j < BLOCK_COL; j++) {
    if (block[i][j] == 1) {
      fill(255, 0, 0); // ブロックの色を赤に設定
      /*
        変数 block_x、block_yを使ってrect()を書く
      */
    }
  }
}

img05.jpg

動画内のテトリスのコードです。

Tetris.zip