JavaFX打砖块游戏开发 第一课

突然发现，之前还有个JavaFX游戏开发 第一课。不过，这两个教程并不冲突。目前这个系列是做一个完整的打砖块游戏。

第一课主要用到的知识有，JavaFX的动态绑定，Rectangle的使用，简单的MouseMove事件，BoxBlur特效。

那么，我们首先创建一个名叫BrickBlock的JavaFX Project。本人是使用的e(fx)clipse进行开发的。

e(fx)clipse的官方网站为:http://www.efxclipse.org/，下载整合插件的eclipse即可。

首先创建一个游戏对象的基类BaseObject，继承于Parent。

import javafx.beans.property.DoubleProperty;
import javafx.beans.property.SimpleDoubleProperty;
import javafx.scene.Parent;

/**
 * @author wing
 * @date 2012/7/26
 */
public abstract class BaseObject extends Parent{
    protected DoubleProperty widthProperty = new SimpleDoubleProperty(0);
    protected DoubleProperty heightProperty = new SimpleDoubleProperty(0);
    protected DoubleProperty xProperty = new SimpleDoubleProperty(0);
    protected DoubleProperty yProperty = new SimpleDoubleProperty(0);
    
    public  DoubleProperty widthProperty() {
        return  widthProperty;
    }
    public double getWidth(){
        return widthProperty.get();
    }
    public void setWidth(double width){
        this.widthProperty.set(width);
    }
    
     public  DoubleProperty heightProperty() {
        return  heightProperty;
    }
    public double getHeight(){
        return heightProperty.get();
    }
    public void setHeight(double height){
        this.heightProperty.set(height);
    }   
    
    public  DoubleProperty xProperty() {
        return  xProperty;
    }
    public double getX(){
        return xProperty.get();
    }
    public void setX(double x){
        this.xProperty.set(x);
    }      
          
   public  DoubleProperty yProperty() {
        return  yProperty;
    }
    public double getY(){
        return yProperty.get();
    }
    public void setY(double y){
        this.yProperty.set(y);
    }   
    
    public void moveX(double x){
    	this.xProperty.set(getX() + x);
    }
    
    public void moveY(double y){
    	this.yProperty.set(getY() + y);
    }
    
    public boolean isCollisionWith(BaseObject baseObject){
    	if(getX() + getWidth() > baseObject.getX() && getX() < baseObject.getX() + baseObject.getWidth() && getY() + getHeight() > baseObject.getY() && getY() < baseObject.getY() + baseObject.getHeight()){
    		return true;
    	}
    	return false;
    }
    
}

可以看到，基类BaseObject中，包含有坐标和宽高的属性，并且还有一个检测碰撞的isCollisionWith方法。

大家可以看到，基类BaseObject中没有使用常规的数据类型，而是使用的DoubleProperty。而DoubleProperty这样

的类型，也正是JavaFX中的动态绑定的机制，set get方法只是改变DoubleProperty的值。

为了方便，isCollisionWith只是简单的矩形碰撞。

下面我们创建一个打砖块中底部拦截的游戏对象类MainBrick。

import javafx.scene.effect.BoxBlur;
import javafx.scene.input.MouseEvent;
import javafx.scene.paint.Color;
import javafx.scene.shape.Rectangle;
import org.wing.game.BrickBlock;

/**
 * @author wing
 * @date 2012/7/25
 */
public class MainBrick extends BaseObject{
    private Rectangle mRectangle;
    private BoxBlur mBlur;
    public MainBrick(){   
        mRectangle = new Rectangle();
        mRectangle.widthProperty().bindBidirectional(widthProperty());
        mRectangle.heightProperty().bindBidirectional(heightProperty());
        mRectangle.xProperty().bindBidirectional(xProperty());
        mRectangle.yProperty().bindBidirectional(yProperty());
        mRectangle.setArcWidth(20);
        mRectangle.setArcHeight(20);
        mRectangle.setFill(Color.YELLOW);
        mBlur = new BoxBlur();
        mBlur.setWidth(5);
        mBlur.setHeight(5);
        mRectangle.setEffect(mBlur);
        setWidth(150);
        setHeight(25);
        getChildren().add(mRectangle);
    }
    
    public void onMouseMove(MouseEvent event){
        if (event.getX() >= getWidth()/2 && event.getX() <= BrickBlock.WIDTH - getWidth()/2) {
            setX(event.getX() - getWidth()/2);
        }
    }
 
}

MainBrick中的代码也很简单。

1.创建了一个Rectangle，这里使用了bindBidirectional方法，这个方法在JavaFX中的意义是双向绑定，只能对Property使用。

我们将Rectangle的宽度，高度，坐标与基类的属性进行了双向绑定，也就是说整个MainBrick已经是一个Rectangle了。

2.设置Rectangle的圆角，让它成为一个圆角矩形。

3.创建了一个BoxBlur效果，通过setEffect给Rectangle设置BoxBlur效果。

4.设置MainBrick的宽度和高度，由于进行了双向绑定，在这里setWidth,setHeight属性将会同步更新到Rectangle的width和height属性。

5.这里还有一个onMouseMove的事件，主要是让Rectangle跟着鼠标动，通过判断使矩形不会超出左右边界，并且将Rectangle中心与鼠标对齐。当然，这个事件现在是不能执行的。

接下来，我们创建一个游戏场景类GameScene，继承Parent。

import org.wing.game.object.MainBrick;

import javafx.animation.KeyFrame;
import javafx.animation.Timeline;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.scene.Parent;
import javafx.scene.input.MouseEvent;
import javafx.scene.paint.Color;
import javafx.scene.shape.Rectangle;
import javafx.util.Duration;

public class GameScene extends Parent {
    private int width, height;
    private Rectangle background;
    private MainBrick mainBrick = new MainBrick();
 
    public GameScene(int width, int height){
    	this.width = width;
    	this.height = height;
        
    	initGameObjects();
    }
	
    private void initGameObjects(){
        background = new Rectangle(0, 0, this.width, this.height);
        background.setOnMouseMoved(new EventHandler<MouseEvent>() {
            @Override
            public void handle(MouseEvent event) {
                mainBrick.onMouseMove(event);
            }
        });
        background.setFill(Color.BLACK);
		
        mainBrick.setX(0);
        mainBrick.setY(height - mainBrick.getHeight());
        
        getChildren().add(background);
        getChildren().add(mainBrick);    
	}
}

在游戏场景类GameScene中，我们通过构造函数，传入场景的宽度和高度。

然后创建了一个背景Rectangle。

设置Rectangle的onMouseMove事件，在其中执行MainBrick中我们刚才写的onMouseMove函数。通过setFill将Rectangle的填充色设为黑色。

接下来，将MainBrick的作为设置为屏幕最下方。

最后，通过getChildern().add()将背景Rectangle和MainBrick添加进GameScene中。

最后就是我们的JavaFX Main Class了。

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.stage.Stage;
/**
 * @author wing
 * @date 2012/7/26
 */
public class BrickBlock extends Application {
    public static final int WIDTH = 800;
    public static final int HEIGHT = 600;
    public static void main(String[] args) {
        launch(args);
    }
    
    @Override
    public void start(Stage primaryStage) {
        GameScene  root = new GameScene(WIDTH, HEIGHT);
        primaryStage.setTitle("BrickBlock");
        primaryStage.setScene(new Scene(root, WIDTH, HEIGHT));
        primaryStage.show();
    }
}

大家可以看到，由于将游戏对象和游戏场景都分离出来，主类已经变得很简洁了。

那么我们运行运行看看效果。

图中的黄色的砖块会跟着鼠标移动，并且不会超过左右的边界。（截图看不到鼠标...）

看似效果很简单，不过我们整体的结构已经差不多了，这将有利于我们后续的开发。

在第二课中，我们将会增加一个小球在这个空间中弹来弹去，并且可以与图中的黄色砖块进行碰撞。

转载请注明出处:http://blog.csdn.net/ml3947/