A small brick game... Pure JS and HTML

[a_bertrand]

Hi,

Just to check a few things, see how well browsers can handle animations, sounds and more without yet using anything beside JS and HTML, I thought I would want to create a small brick game.

Now don't expect it yet to be fun or fully implemented, it needs a few things more (which I will say after the link):

http://temp.nowhere-else.org/jaxbrick/

- Sounds are here, yet I would want to check some BG music to see how it works.

- Art are not bad but not amazing, I would love to add more effects like trails, shadows, explosions of the bricks and more.

- Needs to add bonus dropping from the broken bricks

- Needs to add "enemy" floating around

- Needs to add score

- Needs to handle levels, when the last brick is gone, you should go to the next level

- Needs to handle lives.

- Add some decoration around the game

- Show a "click to start"

- Needs to add sound controls

Known issues: touching a corner of a brick doesn't really act as expected.

Yet, I'm pretty surprised by how good that kind of game can be made just via JS. It actually even works on IE (9, maybe 8 but I doubt), FF and Chrome, and for that, I didn't had much issues. The main issue is the sounds which need to have 2 formats to really work across browsers.

Refresh / animation and PNG handling is pretty good across all browsers I tested. Didn't tested on a phone, but I doubt it will work all that well there.

If you are interested to have more technical info, let me know.

Tested on android with default browser: works, and tested with opera on android it works too. However of course iOS devices shines by the fact they don't work ;) so no Apple your crap is not HTML 5 compatible.

[srachit]

Looking pretty good!

I presume you are making use of the canvas element? Is there any engine being used with it like Crafty or impact?

[a_bertrand]

No I don't use the canvas element (btw you could have looked at the source, all is in one single file). Canvas are good when many many elements, and you need rotations or draw lines or whatever, yet just for this kind, I use pure divs, which I move around with JS. And no I didn't used any pre-made engine, libs or whatever, all the code is there, self written.

[MuskogeeWil]

I like it. You make me feel like an idiot when it comes to coding.

[a_bertrand]

Why? Beside we don't have all the same skills, I'm just an old monkey which invested too much time on computers. You can certainly still learn more, and if I share those things of mine is not to squash others (as I don't believe they are so incredible), it's more to show what I'm trying and to fire some discussions.

[Spudinski]

Ah, the old brick breaker, awesome!

You should add a "You Win!" page, and levels!

You should actually make a tutorial out of this, like there is for C(++/Flash) game development.

The brick breaker game is a perfect place to start off, due to how much resemblance it has with "real-life" programming(maths/logic).

P.S. there's some clipping errors on the paddle itself as well.

[MuskogeeWil]

Why? Beside we don't have all the same skills, I'm just an old monkey which invested too much time on computers. You can certainly still learn more, and if I share those things of mine is not to squash others (as I don't believe they are so incredible), it's more to show what I'm trying and to fire some discussions.

I never could grasp Javascript. That's why I'm almost strictly PHP/MySQL. Maybe I just need to find a book that better explains it to me, and then I could work some Javascript into my projects.

[lucky3809]

I don't know if anyone else has the problem, the glider at the bottom after the ball hits a brick out the mouse pointer goes to the top, I am using firefox, could be the reason for it. Should use the arrow keys for the glider, if it's possible instead of the mouse pointer.

Edited February 16, 2013 by lucky3809

[a_bertrand]

The paddle go to the top? No never had this, and I don't believe how it's possible as I don't touch its "Y" axe. Screenshot? BTW I develop with firefox, so that cannot be the reason must be something else.

Spud: Indeed it's way not finished and needs some good bug fixing. And yes, it contains a lot from math to logic which makes it a good candidate to learn ;)

Musko: JS is just another language which have its own syntax, but honestly is not overall complex. What is more complex is the DOM (Document Object Model) which is not even the same for each browser. You could start by doing some simple textbox checks like is it a number or not, and then slowly add more to your JS. For books and tutorials you will find basically everything you need via google ;)

[lucky3809]

Not the paddle, the mouse pointer itself does, when the ball hits a brick out only, is when it does it,not when it bounces off a brick, the mouse pointer jumps to the top to "bookmarks" in the firefox browser, and you have to move mouse back down on the paddle, I tried to get a screen shot but it moves it to the top too fast, if I had recording software I would record the movement. I use a laptop, maybe my mouse speed needs to be slower.

[a_bertrand]

The mouse pointer should actually disappear while you move it over the game area... and beside changing the mouse cursor you cannot do much more in JS. So must be something odd on your side. Try with another browser.

[a_bertrand]

Worked on a background track sound:

Not a masterpiece but should work for it... at least for a start. Will try to add the bonus this week.

[Joel]

Be interesting to see a side-by-side comparison with a HTML5 version, using requestAnimationFrame and canvas.

Good job though, not many people can do this on here, I assume.

[a_bertrand]

Why use a canvas when you don't actually need it? Also for a small number of pieces which need to animated it seems div are faster than canvas from what I find on the net that's it.

[Joel]

Why use a canvas when you don't actually need it? Also for a small number of pieces which need to animated it seems div are faster than canvas from what I find on the net that's it.

Yes that is true, they only have awful performance loading at large numbers. However you wouldn't notice a difference for a game as small as this, canvas or not.

I wasn't saying "canvas is better use this" I was asking for a comparison, code wise that would be. Wouldn't notice any difference by playing the game unless you are running at a higher fps which results in smoother animating.

Does depend on the type of game, you can render using DOM, Canvas or SVG - each one have there own advantages.

[a_bertrand]

Currently I have a "game loop" with a timeout of 20ms which means an ideal fps of 50, of course it will be a bit slower in best cases. Smoother than that, for a web game, well not sure it makes all that sense.

For the loading, there isn't any real "load" issue, as the divs are created when needed.

Update:

Added bg music

Tweaked volumes to be less annoying

Added bonus (yet doesn't produce anything yet)

Handle level change when all bricks are destroyed

Fixed wrong paddle calculation

http://temp.nowhere-else.org/jaxbrick/

Still need to handle score, lifes, display some texts, and of course game over and many other things yet it's slowly improving.

Works better with IE 9 or Chrome than firefox on my system. On firefox it tends to have small hangs.

[a_bertrand]

I found a tutorial written by a guy doing something very similar, yet with canvas instead of the div as I did:

http://blogs.msdn.com/b/eternalcoding/archive/2011/09/06/write-a-small-game-using-html5-and-javascript-brikbrok.aspx

On my own side, all bonus have been implemented, I improved the look and feel of the page, added lives, and game over.

So what's lacking? well, it lacks the scores, and a good set of levels.

[Scorpio]

Hey a_bertrand, the game is great on firefox! I have no problems yet. If I do I'll report back.

[Scorpio]

Level 2! Looks great! Love the lasers!

[Scorpio]

Okay just found a problem, when the board extend. The ball gose stright through the board.

[a_bertrand]

mmm odd, I will check that, even if it should not have any effect.

[Joel]

I found a tutorial written by a guy doing something very similar, yet with canvas instead of the div as I did:

http://blogs.msdn.com/b/eternalcoding/archive/2011/09/06/write-a-small-game-using-html5-and-javascript-brikbrok.aspx

On my own side, all bonus have been implemented, I improved the look and feel of the page, added lives, and game over.

So what's lacking? well, it lacks the scores, and a good set of levels.

Interesting... developers have there own approach for games, depends on what they prefer and the performance.

[a_bertrand]

Well the tutorial link I gave is more HTML 5 than what I did myself. The tutorial uses the canvas, and I do use only divs. Both approaches have their pro and cons. I decided on purpose to not use canvas to see how fast that would run, and personally I would say it's more than acceptable. I could even make it run faster but I don't see the needs for it.

[Joel]

Well the tutorial link I gave is more HTML 5 than what I did myself. The tutorial uses the canvas, and I do use only divs. Both approaches have their pro and cons. I decided on purpose to not use canvas to see how fast that would run, and personally I would say it's more than acceptable. I could even make it run faster but I don't see the needs for it.

True, you can make it run faster canvas or not.

Not sure if you have looked at requestAnimationFrame, but it can make the animation smooth - ideal replacement for setTimeout. Only downside is that it runs at 60 fps, you cannot change it.

You can see a comparison here: http://ie.microsoft.com/testdrive/Graphics/RequestAnimationFrame/Default.html

It's ideal for game loops and animations.

[a_bertrand]

Updated the game:

- made new art for the bricks to be smaller and pack more bricks horizontally (8 bricks vs 5 before).

- shows your current level

- shows your current score

- added quiet some new levels (7 currently)

- now when a brick breaks "score gold" is dropped, take it with the paddle to actually make points.

So at this point it's a full featured brick game in my opinion. Sure loads of new features could be packed in, as well as increase the appeal of some of the art and sound (specially add more sounds maybe). Also a level editor would not hurt but currently the level system will do the trick.

http://temp.nowhere-else.org/jaxbrick/

In total the game contains 63 lines of HTML, and around 1100 lines of JS. For a full game it's not all that big, but I know that for most of you, so much JS is something never tried. Yet it shows that you can actually create a full game in JS, and even make it fun.

If there is interest in it, I could very well make a NWE module out of it with high score between the players. Of course it doesn't really match the default style of NWE but that doesn't mean it could not be a fun addition to a running game.

P.S: I love the gold explosion after the brick is destroyed. It is actually even cooler than I thought it would be.

Preview:

[ATTACH]866[/ATTACH]

Changed the setTimeout to requestAnimationFrame for the browser supporting it. It does make a very little difference, yet for the code point of view the difference is so small that it make sense to use it. In case the requestAnimationFrame function doesn't exists, it falls back to setTimeout.