Jump to content
MakeWebGames

A small brick game... Pure JS and HTML


a_bertrand
 Share

Recommended Posts

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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 by lucky3809
Link to comment
Share on other sites

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 ;)

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

jax.jpg.a5daf1305ef851f4cedc2e2e11b13af0.jpg

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...