Tetrisの次に来るブロックの表示について

Question

テトリスの本家には次に出てくるブロックが右上の部分に表示されているのでその機能を追加させたいのですがどのようにすれば良いのか分かりません。実際にテトリスが動くコードは作成してあり、背景枠の大きさを拡大させてこのような機能を追加させたいです。

import java.awt.Color;

import java.awt.Graphics;

import java.awt.Point;

import java.awt.event.KeyEvent;

import java.awt.event.KeyListener;

import java.util.ArrayList;

import java.util.Collections;



import javax.swing.JFrame;

import javax.swing.JPanel;



public class Tetris extends JPanel {



	private static final long serialVersionUID = -8715353373678321308L;



	private final Point[][][] Tetraminos = {

			// I-Piece

			{

				{ new Point(0, 1), new Point(1, 1), new Point(2, 1), new Point(3, 1) },

				{ new Point(1, 0), new Point(1, 1), new Point(1, 2), new Point(1, 3) },

				{ new Point(0, 1), new Point(1, 1), new Point(2, 1), new Point(3, 1) },

				{ new Point(1, 0), new Point(1, 1), new Point(1, 2), new Point(1, 3) }

			},

			

			// J-Piece

			{

				{ new Point(0, 1), new Point(1, 1), new Point(2, 1), new Point(2, 0) },

				{ new Point(1, 0), new Point(1, 1), new Point(1, 2), new Point(2, 2) },

				{ new Point(0, 1), new Point(1, 1), new Point(2, 1), new Point(0, 2) },

				{ new Point(1, 0), new Point(1, 1), new Point(1, 2), new Point(0, 0) }

			},

			

			// L-Piece

			{

				{ new Point(0, 1), new Point(1, 1), new Point(2, 1), new Point(2, 2) },

				{ new Point(1, 0), new Point(1, 1), new Point(1, 2), new Point(0, 2) },

				{ new Point(0, 1), new Point(1, 1), new Point(2, 1), new Point(0, 0) },

				{ new Point(1, 0), new Point(1, 1), new Point(1, 2), new Point(2, 0) }

			},

			

			// O-Piece

			{

				{ new Point(0, 0), new Point(0, 1), new Point(1, 0), new Point(1, 1) },

				{ new Point(0, 0), new Point(0, 1), new Point(1, 0), new Point(1, 1) },

				{ new Point(0, 0), new Point(0, 1), new Point(1, 0), new Point(1, 1) },

				{ new Point(0, 0), new Point(0, 1), new Point(1, 0), new Point(1, 1) }

			},

			

			// S-Piece

			{

				{ new Point(1, 0), new Point(2, 0), new Point(0, 1), new Point(1, 1) },

				{ new Point(0, 0), new Point(0, 1), new Point(1, 1), new Point(1, 2) },

				{ new Point(1, 0), new Point(2, 0), new Point(0, 1), new Point(1, 1) },

				{ new Point(0, 0), new Point(0, 1), new Point(1, 1), new Point(1, 2) }

			},

			

			// T-Piece

			{

				{ new Point(1, 0), new Point(0, 1), new Point(1, 1), new Point(2, 1) },

				{ new Point(1, 0), new Point(0, 1), new Point(1, 1), new Point(1, 2) },

				{ new Point(0, 1), new Point(1, 1), new Point(2, 1), new Point(1, 2) },

				{ new Point(1, 0), new Point(1, 1), new Point(2, 1), new Point(1, 2) }

			},

			

			// Z-Piece

			{

				{ new Point(0, 0), new Point(1, 0), new Point(1, 1), new Point(2, 1) },

				{ new Point(1, 0), new Point(0, 1), new Point(1, 1), new Point(0, 2) },

				{ new Point(0, 0), new Point(1, 0), new Point(1, 1), new Point(2, 1) },

				{ new Point(1, 0), new Point(0, 1), new Point(1, 1), new Point(0, 2) }

			}

	};

	

	private final Color[] tetraminoColors = {

		Color.cyan, Color.blue, Color.orange, Color.yellow, Color.green, Color.pink, Color.red

	};

	

	private Point pieceOrigin;

	private int currentPiece;

	private int rotation;

	private ArrayList<Integer> nextPieces = new ArrayList<Integer>();



	private long score;

	private Color[][] well;

	

	// Creates a border around the well and initializes the dropping piece

	private void init() {

		well = new Color[12][24];

		for (int i = 0; i < 12; i++) {

			for (int j = 0; j < 23; j++) {

				if (i == 0 || i == 11 || j == 22) {

					well[i][j] = Color.GRAY;

				} else {

					well[i][j] = Color.BLACK;

				}

			}

		}

		newPiece();

	}

	

	// Put a new, random piece into the dropping position

	public void newPiece() {

		pieceOrigin = new Point(5, 2);

		rotation = 0;

		if (nextPieces.isEmpty()) {

			Collections.addAll(nextPieces, 0, 1, 2, 3, 4, 5, 6);

			Collections.shuffle(nextPieces);

		}

		currentPiece = nextPieces.get(0);

		nextPieces.remove(0);

	}

	

	// Collision test for the dropping piece

	private boolean collidesAt(int x, int y, int rotation) {

		for (Point p : Tetraminos[currentPiece][rotation]) {

			if (well[p.x + x][p.y + y] != Color.BLACK) {

				return true;

			}

		}

		return false;

	}

	

	// Rotate the piece clockwise or counterclockwise

	public void rotate(int i) {

		int newRotation = (rotation + i) % 4;

		if (newRotation < 0) {

			newRotation = 3;

		}

		if (!collidesAt(pieceOrigin.x, pieceOrigin.y, newRotation)) {

			rotation = newRotation;

		}

		repaint();

	}

	

	// Move the piece left or right

	public void move(int i) {

		if (!collidesAt(pieceOrigin.x + i, pieceOrigin.y, rotation)) {

			pieceOrigin.x += i;	

		}

		repaint();

	}

	

	// Drops the piece one line or fixes it to the well if it can't drop

	public void dropDown() {

		if (!collidesAt(pieceOrigin.x, pieceOrigin.y + 1, rotation)) {

			pieceOrigin.y += 1;

		} else {

			fixToWell();

		}	

		repaint();

	}

	

	// Make the dropping piece part of the well, so it is available for

	// collision detection.

	public void fixToWell() {

		for (Point p : Tetraminos[currentPiece][rotation]) {

			well[pieceOrigin.x + p.x][pieceOrigin.y + p.y] = tetraminoColors[currentPiece];

		}

		clearRows();

		newPiece();

	}

	

	public void deleteRow(int row) {

		for (int j = row-1; j > 0; j--) {

			for (int i = 1; i < 11; i++) {

				well[i][j+1] = well[i][j];

			}

		}

	}

	

	// Clear completed rows from the field and award score according to

	// the number of simultaneously cleared rows.

	public void clearRows() {

		boolean gap;

		int numClears = 0;

		

		for (int j = 21; j > 0; j--) {

			gap = false;

			for (int i = 1; i < 11; i++) {

				if (well[i][j] == Color.BLACK) {

					gap = true;

					break;

				}

			}

			if (!gap) {

				deleteRow(j);

				j += 1;

				numClears += 1;

			}

		}

		

		switch (numClears) {

		case 1:

			score += 100;

			break;

		case 2:

			score += 300;

			break;

		case 3:

			score += 500;

			break;

		case 4:

			score += 800;

			break;

		}

	}

	

	// Draw the falling piece

	private void drawPiece(Graphics g) {		

		g.setColor(tetraminoColors[currentPiece]);

		for (Point p : Tetraminos[currentPiece][rotation]) {

			g.fillRect((p.x + pieceOrigin.x) * 26, 

					   (p.y + pieceOrigin.y) * 26, 

					   25, 25);

		}

	}

	

	@Override 

	public void paintComponent(Graphics g)

	{

		// Paint the well

		g.fillRect(0, 0, 26*12, 26*23);

		for (int i = 0; i < 12; i++) {

			for (int j = 0; j < 23; j++) {

				g.setColor(well[i][j]);

				g.fillRect(26*i, 26*j, 25, 25);

			}

		}

		

		// Display the score

		g.setColor(Color.WHITE);

		g.drawString("" + score, 19*12, 25);

		

		// Draw the currently falling piece

		drawPiece(g);

	}



	public static void main(String[] args) {

		JFrame f = new JFrame("Tetris");

		f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

		f.setSize(12*26+10, 26*23+25);

		f.setVisible(true);

		

		final Tetris game = new Tetris();

		game.init();

		f.add(game);

		

		// Keyboard controls

		f.addKeyListener(new KeyListener() {

			public void keyTyped(KeyEvent e) {

			}

			

			public void keyPressed(KeyEvent e) {

				switch (e.getKeyCode()) {

				case KeyEvent.VK_UP:

					game.rotate(-1);

					break;

				case KeyEvent.VK_DOWN:

					game.rotate(+1);

					break;

				case KeyEvent.VK_LEFT:

					game.move(-1);

					break;

				case KeyEvent.VK_RIGHT:

					game.move(+1);

					break;

				case KeyEvent.VK_SPACE:

					game.dropDown();

					game.score += 1;

					break;

				} 

			}

			

			public void keyReleased(KeyEvent e) {

			}

		});

		

		// Make the falling piece drop every second

		new Thread() {

			@Override public void run() {

				while (true) {

					try {

						Thread.sleep(1000);

						game.dropDown();

					} catch ( InterruptedException e ) {}

				}

			}

		}.start();

	}

｝

Answer 1

数十行のコードを提示して「どう変えたらよいか」という質問は閲覧者に

(A) あなたのコードを中身の説明なしに理解させることを強いる
(B) あなたが「どういう点について躓いているか」の材料がないため、それをコードの内容から推測することを強いる

ということで、閲覧者からみると「なぞ解き」のように見えます。そういうことを避け「何がわからないのか」をもっと直接的に述べる方がよいと思います。

さて、申し訳ないですが(A)を詳細に見ず(B)は方針のみ提示するつもりで

(A)は「自分ならこんなイメージで作るはず」という想定を置き
(B)は「新たなピースを生成する部分をどう処理しているかnewPieceのみ見る」

だけを行ってコメントしてみますと

newPieceでやっていることは
(P1)「ピースのパターンをどれにするかを決定」
(P2)「そのパターンを初期位置へ配置」
という２点を同時に行っていると思います。

方針としてはこの２つの処理を分割すればよいと思います。つまり、

(P1)新たなピースを画面上に配置したら即座に次のパターンを決定する
(P2)あらかじめ決定しておいたパターンを初期位置へ配置すればよい

これに加えて(P1)で次のパターンを決定したタイミングで「次のピースを表示すべき場所」へピースを描画すればよいと思います。

Comments

[KSwordOfHaste]

一点追記します。質問者さんのオリジナルのコードはきちんと字下げされていますがteratailの質問を作る際にコードをそのまま張り付けてもごらんのとおり字下げは消えてしまいます。閲覧者に見やすくコードを提示するためにマークダウン（文章の修飾をするための簡易的な構文の一つ）がありますので最小限学んでおくとよいです。
https://teratail.com/help#about-markdown
を参照してみてください。質問文は編集できますので、マークダウンを付けて見え方がどう変わるかやってみることをお奨めします。こういう点にも配慮した質問ができるとよいと思います。

[Kokkoo]

大変細かくご指摘ありがとうございます。その点を踏まえて質問の編集と方針通りのプログラム作成を行ってみようと思います。

Answer 2

テトリス久々に楽しくやりました^^;ありがとうございます。
この後の拡張のご相談だと思いますが、Tetrisクラスはこのまま残して、NextBlockView（仮称）といったJPanelサブクラスを別途用意するのが良いと思います。そのためには、現在のコードを少しいじっていろんな部品を配置できるようにします。

コードのmainのところを少し手を入れてみたので、そこだけ抜粋しますね。

	public static void main(String[] args) {
		JFrame f = new JFrame("Tetris");
		f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
		f.setSize(600, 650);
		f.setLayout(null);
		f.getContentPane().setBackground(Color.darkGray);
		f.setVisible(true);
		final Tetris game = new Tetris();
		game.setBounds(30, 20, 12 * 26 + 10, 26 * 23 + 25);

• JFrameのサイズをとりあえず600 x 650に変更した。
• JFrameのレイアウト機能を無効にした。
• 背景色はとりあえずdarkGrayにした。
• Tetris画面はsetBounds(x, y, w, h)を使い、表示位置を決めた。

これで拡張のための土台はできたので、NextBlockView（仮称）を作って、同じようにsetBounds(x, y, w, h)で画面の適切な位置に配置してください。

Comments

[Kokkoo]

回答ありがとうございます。実際に流れはつかめました。あとは次に出るブロックを右上に配置した新たに作成したpanelを作るだけですが、次のブロックを実際にどうやったら表示させることを実現できるのかがいまいち分かりません。

[退会済みユーザー]

それはまだ全体のゲームシステムを考えていないためですから、これから考えていけばよいと思います。現在のコードは起動したらいきなりゲームが始まっていますね。また、終了判定もこれからですね。ゲームが何らかのトリガーで開始され、何ららかの状態で停止するようにすれば、開始前状態で、次のブロックを小窓に表示しておくことができます。現在のコードでは、currentPieceというインデクス値を直接使ってますが、まず、そのインデクスを使って小窓にブロックを描画し、次のサイクルでそのインデクスを使い本画面に描画すればよいです。その時に、新しいインデクス値を生成し、小窓のほうも更新します。本画面のほうは長くインデクスを必要とするので、小窓用と本画面用の2つの変数を用意したほうが良いでしょう。