Breakout!
Posted by rhelmer on 19 Mar 2008 at 02:45 pm | Tagged as: games, mozilla
I was working through some Pygame tutorials last week and thought it’d be fun to see if Canvas/JS was fast enough in Fx3 to do some simple games.
So, I spent a couple evenings last weekend and made a really dumb Sprite class, and stole some reasonable “breakout physics” from this tutorial to make this Breakout clone in JS.
The collision detection for the bricks is a little sloppy (there’s a little damage on bricks from time to time) and I haven’t done any perf work yet, but it seems to work ok in Fx3 nightlies on my MBP. Safari works ok too, just not quite as fast.
Any activity in other tabs seems to have a huge impact on performance, there’s probably a better way to do the sprite maneuvers etc. but I only had a few hours to spend on this so far. Pointers welcome 
That’s pretty cool! I look forward to the end of flash games!
I noticed you’re using of time step dependent physics. This is perfectly acceptable if you’re running at a constant frame rate, but for me at least this isn’t the case – the frame rate fluctuates wildly, and so the ball travels at different speeds too. I guess you could use a bigger interval in setInterval (arinoid caps it to 60 per second, about 16 ms). But I’m not sure how faithful setInterval is to the numbers you give it
You could also switch to timestep-independent physics – using the time since the last update and distance = velocity * time, you can keep the ball moving at a constant rate. Note that this change will invalidate some assumptions in the bouncing-off-wall code (forexample, since the ball isn’t moving at a fixed distance per frame, the statement “
directionX = -directionX” could happen multiple times before the ball actually gets back into the game area.)Hey Rob,
Great idea! I used your experiment as an excuse to play with firebug’s profiler a little, and I think made the gameplay experience a little smoother?
Files in: http://people.mozilla.org/~johnath/breakout/
PS – I made it a little brighter too.
I didn’t find the performance too bad. I did notice damaged bricks, and quite a lot of dodgy bounces with the ball coming back on the same path it had come from. Also, the bat doesn’t tend to go off of the edge in breakout games.
And nothing happened when I completed it! Still, very cool
Dan: I think this behaves in the same way as a lot of other breakout-type games, where the ball behaves as if the paddle were a convex surface, even though it might be drawn as a flat surface.
I wonder if this thing could do vector graphics, like sbzone.
See:
http://glimr.rubyforge.org/cake/missile_fleet.html (not made by me)
The ball doesn’t know how to bounce horizontally off bricks! I had it eating its way from left to right through the middle of the wall. I also saw a couple of those dodgy bounces where the ball bounced vertically as well as horizontally off the side.
IIRC setInterval tries to maintain consistent intervals i.e. catchup, although you can always look at the hidden last parameter to the setInterval function (you’re not using a string parameter I hope!) to see how late the timer is.
Ur – wow. My version felt smoother and maybe faster on windows, where I was playing with it briefly last night – but trying it this morning on my MBP, it crawls. Still a fun experiment, though!
That was pretty impressive! And I’m happy that you found the breakout physics tutorial helpful. Although I must admit that it’s not the best resource – you might want to look at the Casual Games Technology Face Off zip from the 2007 Casual Games Summit site, which contains very good implementations of a Breakout-style game using different libraries. I’m dabbling with web games myself currently, and I’d love to see where your project goes! Good luck!
Very strange. On linux and a brand new quad core computer it runs very sluggish in the latest Minefield nightly but more or less smoothly in a Seamonkey stable build. Not at all what I’ve expected.
Hi,
two examples of classic dhtml (no canvas) versions of breakout:
original Arkanoid and BlockedUp
On my Ubunut Linux 7.10, I get framerates of about one frame every 2 seconds on both Firefox 2 and 3.0 beta 3. I wonder why it’s sucking so much? I’m using the “ati” driver, and I can turn on Desktop Effects if I want, although they do slow things down.
[...] Physics. I can’t remember ever _wanting_ to remember trig before I threw together that little Breakout! demo Now I am kicking Past Rob for not paying more attention. I guess the most I can hope to do is [...]
Runs smoother on my windows machine than my ubuntu box. mine is nvidia but i guess it’s because of firefox under linux. i dont know but firefox runs better under windows.
pretty good work! breakout