Jump to content

Breakout Game - need help


Recommended Posts

So I need your help to finish, and polish the Breakout game with Phaser.



In short i make it for this: http://city41.github.io/breakouts/

I've made like 50% i think, what's left is:

- Start, Game Over Screen
- Display Lives, Level, Score
- Display the Countdown
- Make powerups and powerdown fall from predefined random bricks (if you press "Z" you trigger the powerdown and paddle become smaller)
- All sound related (here i wait for final version of Phaser)

But there are some problems i met during the development:

- I think that justPressed and justReleased doesn't work as expected i tried fixed it but failed...
The problem is that even with one quick press, the update calls justPressed and execute code several times:

Just press "V" to spawn a ball.

Sam thing with "X" and "C" for switching levels, here i tried a bit hackish for me thing to set the duration as 22 ms... 11ms fails, and 44ms trigger multiple

- I don't quite understand the

paddle.immovable = true;

but as i tested and read from flixel without it collision goes nuts :P and don't do what "expected imho"
I'll be glad if Rich point me to some reading, or example

- Still think how to implement the different play states Start scree, Playing, and Game over

Here is the TS source:


Also I'll be happy if someone takes a time the restructure the game to not be in one big .js

And of course when this is finished it will be added to the Breakout projects, and i think it's going to be useful for all
new comers to Phaser :)

Link to comment
Share on other sites

Look at the "sprite align" test case code for a good example of how to react to a single mouse click. Basically you register a function to the input signal.


You'll need 'immovable' set to true, because if you don't when the ball and paddle collide they will exchange velocities and the paddle will fly off!


And oh man! That's hilarious when you press V and get like hundreds of balls all flying around :)

Link to comment
Share on other sites

Ok, tnx for the info,

and anything about the game states ... ? i saw in the "Caveman Calamity" Hsaka use them... but its a bit more complex

and will be very nice to have an example for state (thre states, start screen, playing and game over )


First thing tomorrow morning is to try it cause I really want to finish this. :)

Link to comment
Share on other sites

  • 4 months later...

ОК it's weekend time so I can fiddle with this game and hopefully finish it.


In the moment there is something quite strange:


When the ball leaves the world area i have this check:


        if(ball.y > game.world.height) {
            ball.x = 120;
            ball.y = 240;
            ball.body.velocity.x = ballSpeed;
            ball.body.velocity.y = ballSpeed;
And this way i restart the ball... but strangely if the paddle is situated at the same "x" coordinate the collision system fire a collision ...
I assume that maybe it's bug or I must somewhat "kill"/"make the sprite "dead" move it to the ,x,y coordinate and alive it again so this way no collision will be checked and performed
Check the console.log when the paddle is under the start point of the ball and when the ball goes to the bottom.
But still i didn't get the right way to do it I tried sprite.exists = false ...
End to be cool you can check the game and the source here:
Also I'm using a custom Process function cause i want to implement a bit more complicated collision resolution.
Like if it hit the left part the balls goes to left, and vise versa also if it hit the paddle on the left/right vertical border if is the top half it counts as "save" but if it hits the bottom half the ball reflects and goes down and it's missed.
I already made some progress with the described collision logic in the older TS version here:
and now I'm going to improve it but still bump in some problems. :)
Link to comment
Share on other sites

Yep, i already check the sample game,but my implementation has some differences like after the ball drops out I want to restart it and also i want to make my own collideCallback and processCallback (mostly to practice and understand deeper the collision logic).


Also I made a version with ball as single sprite just to check if it was sprite to group problem or sprite to sprite...



also a screenshot if i didn't explain well before when problem arise:



And in sprite vs sprite the problem still persist, at the moment a localized it in the "separateY" function from this check:


this._result = (this.separateX(body1, body2) || this.separateY(body1, body2));


removing the second condition part and then there is no strane collision :P but of course there is no Y check then...



One more thing found, if I restart the ball before it reaches the bottom, for example 10px over the paddle, there is no collision problem.

My thoughts are that there is something wrong with the DeltaY, because after when the problem exist (when the ball pass the "y" cordinate of the paddle (when they are on absolutely different "x" cordinate) and ball.y is called then the ball.body deltaY is:


body2 delta = -206.9999999999709


and the paddle is


body1 delta = 0


... well I may be completely wrong also... :P but still that's what I know in the moment.

Link to comment
Share on other sites

Ok here is the bug in his glory :)




I used the sprite vs sprite example to reproduced it... and I'm still digging it...




And one more example with the modified quadtree example





Аll of this is fixed in Phaser 1.0.7

Link to comment
Share on other sites


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...