Stacker Game in JavaFX

In this post I am going to share with you this simple game I created using JavaFX.

The Stacker game

The goal of the game is to reach the top by stacking rectangles. This is a well known game where when you reach the top you earn some gifts. Here is a video I took from youtube of someone playing this game:


Our game is a little different. We will will only stack 1 rectangle, but the rectangle can be adjacent of the below rect, not exactly on top of it. The number of rectangles to fill will be increasing according to the level and also the speed.

The game in Processing

The game was previously created in Processing, but most of the code I could reuse in the JavaFX version! You can find the source for the processing version in my github.

Creating games with JavaFX

JavaFX was always a platform for games since its 1.0 version. I remember we even had a blog specific for JavaFX script games. Since the end of JavaFX Script and with JavaFX 2, we have some samples that might be downloaded in Oracle's site.
To get start with games on JavaFX I recommend this series of posts by Carl Dea.
JavaFX have all resources we need to create games: animations, resources to detect collision, special effects, play sounds, etc...

Our stacker game implementation

The game is basically based on update a boolean matrix and read it to create a visual representation. When the user click on the game, we make a loop in the matrix to see if the block in the previous line  is true or if the block in the current line is adjacent to the block in the previous line.
The two important classes in our program is the Game Engine and the game itself. The game engine is responsible to make the game alive, because it will make the game update the screen on a given frequency and make it draw itself.
The game is responsible to draw and update the scenario according to time and user's input. Here is the code of these two classes:

	package org.jugvale.javafx;
	import javafx.scene.canvas.GraphicsContext;
	/**
	*
	* @author william
	*/
	public abstract class Game {
	/*
	The GraphicsContext so the game can draw stuff
	*/
	GraphicsContext gc;
	GameEngine engine;
	/*
	The size of the game playing area
	*/
	float MAX_W;
	float MAX_H;
	public Game(float w, float h, GraphicsContext _gc) {
	MAX_W = w;
	MAX_H = h;
	gc = _gc;
	gc.getCanvas().setWidth(w);
	gc.getCanvas().setHeight(h);
	}
	final public void setEngine(GameEngine _engine) {
	engine = _engine;
	}
	public abstract void update();
	public abstract void display();
	}

view raw Game.java hosted with ❤ by GitHub

	/*
	* To change this license header, choose License Headers in Project Properties.
	* To change this template file, choose Tools | Templates
	* and open the template in the editor.
	*/
	package org.jugvale.javafx;
	import javafx.animation.Animation;
	import javafx.animation.KeyFrame;
	import javafx.animation.Timeline;
	import javafx.event.Event;
	import javafx.util.Duration;
	/**
	*
	* @author william
	*/
	public class GameEngine {
	private int frameCount = 0;
	private int frameRate;
	private final Game game;
	private final Timeline gameLoop;
	public GameEngine(int frameRate, Game game) {
	this.frameRate = frameRate;
	this.game = game;
	game.setEngine(this);
	gameLoop = createLoop();
	}
	public int getFrameCount() {
	return frameCount;
	}
	public int getFrameRate() {
	return frameRate;
	}
	public void setFrameRate(int frameRate) {
	this.frameRate = frameRate;
	}
	private void run(Event e) {
	frameCount++;
	game.update();
	game.display();
	}
	public void start() {
	gameLoop.playFromStart();
	}
	public void stop() {
	gameLoop.stop();
	}
	private Timeline createLoop() {
	// inspired on https://carlfx.wordpress.com/2012/04/09/javafx-2-gametutorial-part-2/
	final Duration d = Duration.millis(1000 / frameRate);
	final KeyFrame oneFrame = new KeyFrame(d, this::run);
	Timeline t = new Timeline(frameRate, oneFrame);
	t.setCycleCount(Animation.INDEFINITE);
	return t;
	}
	}

view raw GameEngine.java hosted with ❤ by GitHub

There are classes that does nothing. We need to create a concrete class, so we did, we created the StackerGame  class. It contains the matrix that represents the game and will draw the grid and the rectangles according to the time, level and user's input.
The logic of the game is basically move a boolean in the matrix and fix it when the user clicks. If the user click was done when the rectangle had a block below it or adjacent, the game will continue, if not, we will call game over and when the user click again, the game will start from beginning. Note that the score is higher when the user makes a perfect stack and lower when the user stack using an adjacent block.  The game is drawn in a canvas, which is easier to control in our case(we are coming from Processing!).
Notice that we expose some variable using javaFX properties. These properties are used in our main application to display the score, level and eventually the game over label. See the all the code of these two classes:

	package org.jugvale.javafx;
	import javafx.animation.FadeTransition;
	import javafx.application.Application;
	import javafx.beans.property.SimpleStringProperty;
	import javafx.geometry.Pos;
	import javafx.scene.Scene;
	import javafx.scene.canvas.Canvas;
	import javafx.scene.control.Label;
	import javafx.scene.effect.DropShadow;
	import javafx.scene.effect.InnerShadow;
	import javafx.scene.layout.StackPane;
	import javafx.scene.layout.VBox;
	import javafx.scene.paint.Color;
	import javafx.scene.text.Font;
	import javafx.scene.text.FontPosture;
	import javafx.scene.text.FontWeight;
	import javafx.scene.text.TextAlignment;
	import javafx.stage.Stage;
	import javafx.util.Duration;
	/**
	*
	* @author william
	*/
	public class App extends Application {
	final int WIDTH = 600;
	final int HEIGHT = 500;
	@Override
	public void start(Stage stage) {
	Canvas c = new Canvas();
	VBox root = new VBox(10);
	Scene s = new Scene(new StackPane(root), WIDTH, HEIGHT);
	StackerGame game = new StackerGame(400, 300, c.getGraphicsContext2D());
	GameEngine stackerGameEngine = new GameEngine(1000, game);
	Label lblTitle = new Label("The Stacker Game");
	Label lblGameOver = new Label("Game Over! \nClick to play again...");
	Label lblScore = new Label();
	Label lblLevel = new Label();
	lblGameOver.visibleProperty().bind(game.gameOver);
	lblScore.textProperty().bind(new SimpleStringProperty("Score is ").concat(game.score));
	lblLevel.textProperty().bind(new SimpleStringProperty("Level ").concat(game.level));
	// could be done using CSS
	lblGameOver.setTextAlignment(TextAlignment.CENTER);
	lblScore.setFont(Font.font(STYLESHEET_MODENA, FontWeight.EXTRA_LIGHT, FontPosture.ITALIC, 25));
	lblScore.setTextFill(Color.BLUE);
	lblLevel.setTextFill(Color.GREEN);
	lblGameOver.setFont(Font.font("Arial", FontWeight.EXTRA_BOLD, FontPosture.ITALIC, 35));
	lblGameOver.setEffect(new InnerShadow(10, Color.DARKRED));
	lblTitle.setEffect(new DropShadow(20, Color.RED));
	FadeTransition gameOverAnimation = new FadeTransition(Duration.millis(500), lblGameOver);
	gameOverAnimation.setFromValue(0.1);
	gameOverAnimation.setToValue(1);
	gameOverAnimation.setCycleCount(-1);
	gameOverAnimation.setAutoReverse(true);
	gameOverAnimation.play();
	lblGameOver.setOnMouseClicked(e -> game.restart());
	game.gameOver.addListener((vl, o, n) -> {
	if (n) {
	c.setOpacity(0.3);
	} else {
	c.setOpacity(1);
	}
	});
	root.getChildren().addAll(lblTitle, new StackPane(c, lblGameOver), lblLevel, lblScore);
	root.setAlignment(Pos.CENTER);
	lblTitle.setFont(Font.font(30));
	s.setFill(Color.LIGHTGRAY);
	stage.setScene(s);
	stage.show();
	stackerGameEngine.start();
	}
	}

view raw App.java hosted with ❤ by GitHub

	package org.jugvale.javafx;
	import java.util.Random;
	import javafx.beans.property.BooleanProperty;
	import javafx.beans.property.IntegerProperty;
	import javafx.beans.property.SimpleBooleanProperty;
	import javafx.beans.property.SimpleIntegerProperty;
	import javafx.scene.canvas.GraphicsContext;
	import javafx.scene.paint.Color;
	class StackerGame extends Game {
	/*
	The number of points that can be awarded
	*/
	int MAX_POINTS = 15;
	int MIN_POINTS = 5;
	/*
	Indicates when the player lose the game
	*/
	public BooleanProperty gameOver;
	/*
	The total of points
	*/
	public IntegerProperty score;
	int INITIAL_COL = 3;
	int INITIAL_LINES = 2;
	/*
	Initial number of lines and columns which will change according to the game level
	*/
	int _LINES = INITIAL_LINES;
	int _COLUMNS = INITIAL_COL;
	/*
	The size of each rectangle, which will change according to the number of lines and columns
	*/
	float _W;
	float _H;
	/*
	The higest level which someone could reach
	*/
	int MAX_LEVEL = 20;
	/*
	Level which will be increased as soon as the user reaches the top
	*/
	public IntegerProperty level;
	/*
	The current line which the rectangle will be moving
	*/
	int MOVING_LINE;
	/*
	The direction of the rectangle movement
	*/
	int direction = 1;
	/*
	The matrix of our "squares"(actually rectangles) which size is dinamic
	*/
	boolean[][] squares;
	boolean mousePressed = false;
	Random random;
	StackerGame(float w, float h, GraphicsContext _gc) {
	super(w, h, _gc);
	_gc.getCanvas().setOnMousePressed(e -> {
	mousePressed = true;
	});
	gameOver = new SimpleBooleanProperty(false);
	score = new SimpleIntegerProperty(0);
	level = new SimpleIntegerProperty(1);
	random = new Random();
	updateMatrix();
	}
	@Override
	public void update() {
	if (gameOver.get()) {
	if (mousePressed) {
	mousePressed = false;
	restart();
	}
	return;
	}
	int curPos;
	// update the square's position
	// we will not always move the square, the pos update will be faster according to how close user gets to the top
	int levelIncrease = level.get();
	levelIncrease += 1 + _LINES - MOVING_LINE;
	levelIncrease = constrain(levelIncrease, 0, MAX_LEVEL);
	int rate = (int) map(levelIncrease, 1, MAX_LEVEL, engine.getFrameRate(), engine.getFrameRate() / 20);
	boolean updatePos = engine.getFrameCount() % rate == 0;
	for (curPos = 0; curPos < _COLUMNS && updatePos; curPos++) {
	if (squares[curPos][MOVING_LINE]) {
	if (curPos == 0) {
	direction = 1;
	} else if (curPos == _COLUMNS - 1) {
	direction = -1;
	}
	// update the square matrix
	squares[curPos][MOVING_LINE] = false;
	if (_COLUMNS != 1) {
	squares[curPos + direction][MOVING_LINE] = true;
	}
	break;
	}
	}
	// if user press a key, move to the line above
	if (mousePressed) {
	checkStack();
	if (MOVING_LINE == 0) {
	level.set(level.get() + 1);
	updateMatrix();
	} else {
	MOVING_LINE--;
	squares[(int) random.nextInt(_COLUMNS - 1)][MOVING_LINE] = true;
	}
	mousePressed = false;
	}
	}
	void drawSquares() {
	for (int x = 0; x < _COLUMNS; x++) {
	for (int y = 0; y < _LINES; y++) {
	if (squares[x][y]) {
	gc.setFill(Color.RED);
	gc.fillRect(x * _W, y * _H, _W, _H);
	if (y != _LINES - 1 && y != MOVING_LINE) {
	int leftColumn = x == 0 ? -1 : x - 1;
	int rightColumn = (x == _COLUMNS - 1) ? -1 : x + 1;
	int line = y + 1;
	if (leftColumn != -1 || rightColumn != -1) {
	gc.setFill(Color.color(1, 0, 0, 0.5));
	gc.fillRect(x * _W, line * _H, _W, _H);
	}
	}
	}
	}
	}
	}
	@Override
	public void display() {
	gc.setFill(Color.WHITE);
	gc.fillRect(0, 0, MAX_W, MAX_H);
	drawGrid();
	drawSquares();
	}
	void drawGrid() {
	gc.setStroke(Color.gray(0, 0.2));
	for (int x = 0; x < _COLUMNS; x++) {
	for (int y = 0; y < _LINES; y++) {
	gc.strokeRect(x * _W, y * _H, _W, _H);
	}
	}
	}
	private void updateMatrix() {
	_LINES = level.get() * 2;
	_COLUMNS += level.get() % 3 == 0 ? 1 : 0;
	squares = new boolean[_COLUMNS][_LINES];
	squares[0][_LINES - 1] = true;
	MOVING_LINE = _LINES - 1;
	_W = MAX_W / _COLUMNS;
	_H = MAX_H / _LINES;
	}
	void checkStack() {
	// no need to check at the first line
	if (MOVING_LINE == _LINES - 1) {
	return;
	}
	for (int i = 0; i < _COLUMNS; i++) {
	if (squares[i][MOVING_LINE]) {
	int lineToCheck = MOVING_LINE + 1;
	int leftColumn = i == 0 ? -1 : i - 1;
	int rightColumn = (i == _COLUMNS - 1) ? -1 : i + 1;
	// perfect stack, highest score
	if (squares[i][lineToCheck]) {
	score.set(score.get() + MAX_POINTS);
	} else if ((leftColumn != -1 && squares[leftColumn][lineToCheck])
	|| (rightColumn != -1 && squares[rightColumn][lineToCheck])) {
	score.set(score.get() + MIN_POINTS);
	} else {
	gameOver.setValue(true);
	}
	}
	}
	}
	public void restart() {
	level.set(1);
	score.set(0);
	gameOver.setValue(false);
	_COLUMNS = INITIAL_COL;
	_LINES = INITIAL_LINES;
	updateMatrix();
	}
	/*
	Utility methods from Processing
	*/
	int constrain(int v, int min, int max) {
	if (v < min) {
	return min;
	}
	if (v > max) {
	return max;
	} else {
	return v;
	}
	}
	private float map(float value,
	float start1, float stop1,
	float start2, float stop2) {
	return start2 + (stop2 - start2) * ((value - start1) / (stop1 - start1));
	}
	}

view raw StackerGame.java hosted with ❤ by GitHub

Here is the game in action:

Possible Improvements

Unfortunately the game has no sounds and the effects are poor. Also, if the user reach the level 20, the game will bug! So, the possible improvements are:

* Improve the look of the game;
* Add sounds;
* Handle the end of the game event.

Conclusion

It was a simple demonstration of a game using JavaFX. As usual, it was done for fun, in a few hours... Don't judge possible bad code... The source is in my github.

JavaFX is fun, is enterprise, is good for game programming, for data visualizations, for learning Java...