BING-BONG! Javascript Game

Edit/Update II: Major play change! I’ve added some new bricks and levels, but more importantly, I’ve changed the paddle mechanism so you can hit with different amounts of force, and most interestingly, rather than the ball moving in a straight line, it moves with GRAVITY. It’s a totally new game now! Try it out, let me know what you think.

Edit/Update: I’ve added a new brick type at Caitlin’s suggestion (indestructible bricks), and there are now new level designs. The game is pretty “complete” now. Enjoy, and do feel free to use the source code for help in your own projects.

I put together another Javascript test/demonstrator, this time in the form of a Breakout/Arkanoid type game. It’s all Javascript with no Flash or plugin elements. It handles mouse interaction, collision detection, animation, multiple levels, score keeping with custom font, pre-loading code (it doesn’t render until it’s done loading the images) and a bunch of other stuff. The code is all clearly commented. It’s my third project in Javascript so I expect there are better and less buggy ways to do things, but it still might be useful to someone. There are some unfinished issues (the paddle reflection code needs work, double collisions are handled wrong, there’s a condition where the paddle stops working, and there’s some minor bugs in the pause/restart/up-level code) but I’m not motivated to spend more time tweaking it.

Click to check it out.


By the way, I’ll mention that doing this was inspired by Google’s Chrome Experiments which show off some of what you can push Javascript to do. You can do some pretty remarkable things with it — although it’s also quite interesting what you can’t do.

Other than that, I’ve watched Friday’s finale to Terminator: TSCC a couple times now… I really think it’s a brilliant show with a deliciously complex story, and I sure hope it survives — the ratings leave a little to be desired, and the richness of the story make it hard for new viewers to pick up on — into season three. Love it!


  1. Nicely done. I played up to level 3. Everything worked well except a few times the ball went right through the paddle. Maybe it’s a Safari/OSx thing.

    Sunday, April 12, 2009 at 10:58 am | Permalink
  2. Shannon wrote:

    I *think* the ball moving through the paddle is an illusion, because once the ball is below where a collision is possible (the top sector of the paddle), I still allow the paddle to be moved into a “hit” location… But at that point it’s too late and the ball keeps moving. Ideally I’d have the paddle bump the ball to the left/right if it’s too late to hit it with the top.

    Caitlin found a bug in the pause function too; if you pause it while the ball is temporarily frozen in “pre-launch” it messes up (because I use the same variable to do a button-activated pause as I do for the game-activated pause).

    Sunday, April 12, 2009 at 11:34 am | Permalink
  3. dresden wrote:

    I hope Terminator survives too.

    Sunday, April 12, 2009 at 2:10 pm | Permalink
  4. Level 19, 15,353 points. This sort of game brings out the OCD in me. Must.. remove.. blocks..

    Sunday, April 12, 2009 at 6:25 pm | Permalink
  5. Shannon wrote:

    Hahaha, I don’t think I’ve even played past level 12, but yeah… it does get a bit OCD. It’s really fast at Level 19!

    Sunday, April 12, 2009 at 6:31 pm | Permalink
  6. Caitlin wrote:

    Level 13, 8776.


    Sunday, April 12, 2009 at 7:18 pm | Permalink
  7. Steph wrote:

    FUN! :) Also totally addicting!

    Sunday, April 12, 2009 at 8:55 pm | Permalink
  8. Glen wrote:

    It’s Fox. Considering how they handled Dollhouse, I’d say give your final farewells now.

    Monday, April 13, 2009 at 3:17 am | Permalink
  9. Jamie wrote:

    Is it me or is there a Princess and the Pea theme here :)

    Monday, April 13, 2009 at 9:02 am | Permalink
  10. darcy wrote:

    pah! I spent waay too long playing this from the link on Facebook lol

    excellent diversion from housework!

    Monday, April 13, 2009 at 11:22 am | Permalink
  11. Paul wrote:

    I think the indestructible bricks just adds to the problems. I got stuck on level 7, as the ball/pea went over the bricks and wouldn’t come back down! It just stayed up there bouncing away. haha.

    Monday, April 13, 2009 at 2:51 pm | Permalink
  12. starlight wrote:

    the ball definitely went through the paddle on level 4 for me, (I get the ‘illusion’ too – maybe it doesn’t help that your paddle is taller than is usual for this sort of game?) and I also saw it go through the indestructable blocks once! great game though, I never knew so much was possible with javascript!

    Monday, April 13, 2009 at 3:06 pm | Permalink
  13. Shannon wrote:

    Yeah, it can get caught on the edge of the indestructible ones somehow! It can also sometimes squeeze between them if it’s going fast enough.

    If the ball gets stuck, just click “restart” and it’ll launch a new ball (it won’t totally reset the game).

    Monday, April 13, 2009 at 4:32 pm | Permalink
  14. Shannon wrote:

    BTW here’s a link to the old non-gravity version

    Monday, April 13, 2009 at 8:10 pm | Permalink
  15. Marlon wrote:

    This is a great game. A version for the iPhone could sell very well on the iTunes App Store. I heard it’s possible to create apps for the iPhone that are just web apps packaged as applications using programs such as Phonegap and iPhone QuickConnect.

    Wednesday, April 15, 2009 at 12:37 am | Permalink
  16. Shannon wrote:

    Thanks :)
    I didn’t know you could do that. I have a bottom of the line cell phone… I’d love to have an iPhone to play with games like this — I think the gravity mod would work nicely with the iPhone’s tilt-detection… But I can’t really justify spending the money right now.

    Wednesday, April 15, 2009 at 8:03 am | Permalink
  17. KungFuGreg wrote:

    Very nice! I especially like the power adjustment with the mouse.

    I’d buy it for my iphone. :)

    Saturday, April 18, 2009 at 1:53 am | Permalink
Wow Shannon, that's really annoying! What is it, 1997 on Geocities? Retroweb is NOT cool!

Post a Comment

Your email is never published nor shared. Required fields are marked *