We pretty much have an MVP already by now — Players can bounce the ball back against each other, and the round restarts when the ball goes behind either of the paddles.
Now let’s keep track of the score to see who’s winning. First we need a variable that doesn’t get reset whenever we reload the MenuState screen.
Note that whenever you create a HaxeFlixel template project, there is a Reg.hx file in your source folder. You can use this file to store any game data during the game’s lifetime. This is where we’ll store our Pong score data too. We don’t need to modify anything in Reg.hx because there’s already a scores variable there.
Remember, we have two players, so we need to keep track of two scores. Where do we handle the scoring? Let’s do it in MenuState.hx , because that’s where most of our code logic is anyway:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
override public function create():Void { super.create(); paddle = new Paddle(10, 50); add(paddle); paddle2 = new Paddle(600, 50); add(paddle2); ball = new Ball(FlxG.stage.stageWidth/2, FlxG.stage.stageHeight/2); add(ball); // If the value was not initialised, default to zero if (!(Reg.scores[0] > 0)) Reg.scores[0] = 0; if (!(Reg.scores[1] > 0)) Reg.scores[1] = 0; // Get the score value var player1Score:Float = Reg.scores[0]; var player2Score:Float = Reg.scores[1]; // Create and add the text to the screen var middleX:Float = FlxG.stage.stageWidth / 2; var player1ScoreText:FlxText = new FlxText(middleX - 50, 20, 100, ""+player1Score, 24); var player2ScoreText:FlxText = new FlxText(middleX + 50, 20, 100, ""+player2Score, 24); add(player1ScoreText); add(player2ScoreText); } |
There are three parts to note in the code above.
In the first part, by default, uninitialised values are null . In Haxe, there are various different default null values, depending on which target platform you want to build on, as noted in this page. As such, to play safe, I did a quick check on the initial values of the Reg.scores array. In case the value is not larger than zero, we initialise it to zero.
In the second part, we just load the score values accordingly.
In the third part, I set the position of the scores at an arbitrary position — The top-middle part of the screen. We then create two FlxText objects (based on the parameters for new() ) and add them to the stage.
If you test the game now, you will notice that the score is always zero, no matter who wins. That’s because we haven’t added any code to manipulate the score. Let’s do that now. In Ball.hx , modify the code for update() :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
override public function update():Void { super.update(); if (this.y < 0 || this.y + this.height > FlxG.stage.stageHeight) { this.velocity.y *= -1; } if (this.x + this.width < 0) { Reg.scores[1] += 1; FlxG.switchState(new MenuState()); } if (this.x > FlxG.stage.stageWidth) { Reg.scores[0] += 1; FlxG.switchState(new MenuState()); } } |
Note that we have split the switchState code into two parts — If the ball exits the screen on the left, it means Player 2 (on the right) gets a point. If the ball exits on the right, Player 1 (on the left) gets the point.
Now if you test the game, the score will update correctly:
Before we can pass this off as a somewhat completed game, we will add one finishing touch to it — sound effects. We’ll cover that in the next post.