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();
    }
}

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

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

JavaFX打砖块游戏开发 第一课_第1张图片


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

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

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


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

你可能感兴趣的:(JavaFX)