HOME/[ＪＡＶＡ言語]ブロック崩しの作り方　目次/三日目　ボールを反射

[ＪＡＶＡ言語　ブロック崩しの作り方]
三日目　ボールを反射

↓発売日：2017年04月04日↓

Java 第2版入門編ゼロからはじめるプログラミング (プログラミング学習シリーズ)

新品価格
￥2,030から
(2018/10/8 23:34時点)

目次へ戻る

ボールを反射

今回はボールを移動させて端についたら反射させるというトコロまでをやっていきたいと思います。

ボールの移動

まずはボールを移動させてみましょう。

import javafx.application.Application;
import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.layout.Pane;
import javafx.scene.canvas.Canvas;
import javafx.scene.canvas.GraphicsContext;
import javafx.animation.AnimationTimer;
import javafx.scene.paint.Color;

public class BreakoutMain extends Application{
	private BreakoutThread breakoutthread;

	public static void main(String args[]){
		launch(args);
	}

	@Override
	public void start(Stage stage){
		stage.setTitle("BREAKOUT");
		Pane pane = new Pane();
		Scene scene = new Scene(pane);
		stage.setScene(scene);

		Canvas canvas = new Canvas(640,480);
		GraphicsContext gc = canvas.getGraphicsContext2D();
		pane.getChildren().add(canvas);

		breakoutthread = new BreakoutThread(gc);
		breakoutthread.start();

		stage.show();
	}
}

class BreakoutThread extends AnimationTimer{
	private GraphicsContext gc;

	/*変数の宣言などを書いていく*/
	private int ball_x;
	private int ball_y;
	private int x_speed;
	private int y_speed;

	BreakoutThread(GraphicsContext gc){
		this.gc = gc;

		/*コンストラクタ*/
		/*最初の１回だけ実行されるので初期化などを書く*/

		ball_x = 0;
		ball_y = 0;
		x_speed = 1;
		y_speed = 1;
	}

	@Override
	public void handle(long time){
		gc.clearRect(0,0,640,480);

		/*ゲームループ*/
		/*この部分がすごい速さで繰り返される*/
		/*メインプログラムを書く*/

		gc.setFill(Color.BLACK);
		gc.fillOval(ball_x - 5,ball_y - 5,10,10);
		
		ball_x += x_speed;
		ball_y += y_speed;
	}

	/*この後に追加の自作メソッドなどを書いていく*/
}

■実行結果■

ボールの「x,y」座標の変数「ball_x,ball_y」とx方向、y方向の一回の移動分の変数「x_speed,y_speed」を用意してそれぞれ足し合わせる事によってボールを移動させております。

ボールの描画には

gc.setFill(Color.BLACK);
gc.fillOval(ball_x - 5,ball_y - 5,10,10);

こちらのメソッドを用いております。

「gc.setFill(Color.BLACK);」こちらで色を指定して

gc.fillOval(円の左上のx座標,円の左上のy座標,円の右下のx座標,円の右下のy座標);

こんな感じで座標を指定して中身が塗りつぶされた円を描きます。

円の中央の座標を指定するワケではないのでご注意ください。

例えば半径「100」の円を中心座標「x0,y0」のトコロに描きたい場合は

gc.fillOval(-100,-100,200,200);

こんな感じで指定する事になります。

あとは移動分を足し合わせているだけですね。

ball_x += x_speed;
ball_y += y_speed;

無事に移動させる事ができました！

反射の条件

それでは反射させましょう！といきたいトコロですがその前に反射の条件を決めます。

反射の条件ですが、今回はこのウィンドウのフチで反射させたいのでそれぞれのフチの座標

「x=0,x=640,y=0,y=480」

こちらを反射の条件にしたいと思います。

そして条件式はこの座標を超えた場合なので単純に

if(ball_x >= 640){
}

if(ball_x <= 0){			
}

if(ball_y >= 480){	
}

if(ball_y <= 0){	
}

以上(以下)になった場合という条件式でいきたいと思います。

ではここにボールの向きを変える処理を書いていきます。

ボールの向きを変える

ボールの向きを変えるというのはどういう事なのでしょうか？

さきほどのプログラムを使って考えてみたいと思います。

まずさきほどのプログラムの変数を宣言している部分を次のように書き換えてみましょう。

/*コンストラクタ*/
/*最初の１回だけ実行されるので初期化などを書く*/

ball_x = 320;
ball_y = 240;
x_speed = -1;
y_speed = -1;

■実行結果■

ボールがいなくならないように初期座標を中心からにしております。

先ほどと逆の方向に移動していったと思います。

同じように「x_speed,y_speed」のプラスマイナスを今度は「x_speed」だけプラスにしたりしてみてください。

方向が変わるのを確認できるかと思います。

つまりはこの一回の移動分「x_speed,y_speed」のプラス、マイナスでそれぞれの方向を変える事ができるんですね！

ではこのプラス、マイナスを変えるにはどうしたらいいか？

これは簡単な計算で実現できます。

x_speed = x_speed * -1;

「-1」をかけてあげるだけでプラス、マイナスが反転してくれます。

あとはこれを先ほどの条件式に書くだけですね！

if(ball_x >= 640){
	x_speed = x_speed * -1;
}

if(ball_x <= 0){
	x_speed = x_speed * -1;		
}

if(ball_y >= 480){
	y_speed = y_speed * -1;	
}

if(ball_y <= 0){
	y_speed = y_speed * -1;	
}

座標を超えた時にプラスマイナス反転して方向を変える事ができました！

めり込みをもとに戻す

最後にボールが反射した瞬間、めり込み防止としてボールの半径サイズ分座標を内側に修正してあげます。

if(ball_x >= 640){
	ball_x = 640 - 5;
	x_speed = x_speed * -1;
}

if(ball_x <= 0){
	ball_x = 5;
	x_speed = x_speed * -1;		
}

if(ball_y >= 480){
	ball_y = 480 - 5;
	y_speed = y_speed * -1;	
}

if(ball_y <= 0){
	ball_y = 5;
	y_speed = y_speed * -1;	
}

これでもしボールがなんらかの事情で壁にめり込みすぎて(反射条件である座標をオーバーしすぎて)、一回の移動分の反射で戻ってこれない時も、はまり込んでしまう事なくもとに戻ってくる事ができます。(一回の移動分で戻ってこれないと再びそこで反射してしまうのではまり込んでしまいます！)