Show HN: made a html5 game, polished it many many times | Hacker News Reader

Show HN: made a html5 game, polished it many many times

hotbazooka.com

211 pointsbazookaBen114 comments

hi all,

I've always wanted to make my own game, but couldn't afford a thousand-dollar adobe (flash+photoshop) license.

I'm not a talented programmer, have no degree in CS. But I understand some elements of design.

So I got me a copy of ImpactJS, and after about 5 months of steep learning curve (at least for me), I managed to come up with a game.

I also integrated it with a highscore and badge system, similar to what you get at Kongregate. You need to login with Google/OpenID to earn badges/scores.

link is: http://www.hotbazooka.com/privatejoe

hope to hear some feedback/questions from you guys!

Open articleView on HN

Just a general advice for writing HTML games: remember to preventDefault() on all keyboard-related events (keydown, keypress) for all keys you use when your game has focus (add tabindex to your canvas so you'll get focus/blur events).

Otherwise browser's shortcuts could interfere with your game. I have Opera customized with 1-key shortcuts (with no modifier key) and that's a minefield in games that assume keyboard is all for them.

Yeah, bummer. Hit X and the tab closed. Fun game though, kudos.

hmm preventDefault() was not built into the older Operas.

apparently the guys fixed preventDefault() on Opera 11.10, as explained here: http://impactjs.com/forums/help/binding-keys-in-opera-not-wo...

preventDefault() worked in Opera since ancient times. However, Opera took default action on different event than other browsers (keydown instead of keypress if I remember correctly).

Decent game overall, but I hope you plan on switching out the Advance Wars sprites with something you own in the future. (or use resources from sites like http://opengameart.org/)

advice taken!

Your App Engine app is over quota, game.min.js can't be loaded: http://game1-main.appspot.com/baked/game.min.js

ok i allocated additional bandwidth, the game should be up and running with full music! Enjoy!

It still isn't working. Any mirrors? Reading the reviews below, I can't wait to try this!

hmm i think you need to clear your browser cache before trying again. (this will retrieve the latest version)

i checked the servers, all is good

Really really great game! You should make the rewards for freeing a prisoner appear instantly, waiting for those items to appear kills the pacing of the game somewhat.

You may want to use the up arrow to jump. Using X for jumping and C for shooting is a bit confusing.

That's interesting. I actually found having the jump and shoot actions over on the left hand quite intuitive. I'm now wondering whether left/right handedness or some other physical factors are involved in this...

Just make UP work in addition to X. This way users with built in reflexes won't feel punished.

Also, make space work for jumping too. I hit space a few times causing me to skip down on the page.

You don't need to advertise these additional key bindings, but since they are very common in other games a significant portion of players will automatically use them.

Other than that, very well done!

thx, updates made to the game! Key UP and Space now makes you jump.

X and C are also not in convenient places for Dvorak users, and I imagine for some other international keyboard layouts.

what keys do you suggest for Dvorak? let me know..

Arrow keys, space, control, shift etc. are all normal, but I guess how capturable those are from JS varies. Making them configurable?

Qwerty X maps to Dvorak Q; Qwerty C maps to Dvorak J. That is, listening to Q and J when the user is using Dvorak, as X and C on a Qwerty keyboard.

its pretty capturable. Ok the idea to configure keys make a lot of sense!

I would have made space shoot, too, incidentally (arrows + space should be the same for just about every keyboard out there), but configuration itself is a great idea.

I also wish that the length of time you held down the jump key controlled the height of your jump rather (up to a maximum, obviously), rather than one-size-fits-all jumps, but that's minor.

Play an old NES game that used that system like Super Mario Bros. (any of them) then play your game to see how much more in control you feel.

If you use keyCode instead of charCode I think you'll get the same result on every keyboard layout, but of course if you tell people to use C, it means the key where C is on a US keyboard, not really the key where a C is printed. I believe Dvorak users are conscious enough to understand that though.

(Dvorak user here.) I've played many Flash games in which the keys were WASD, but they actually worked the same even if I didn't switch the layout back to Qwerty. And then I've played games in which it did matter which layout I used. I suspect there's one set of functions that receives keypresses, and another that looks at more raw device input. Perhaps there is a way to do the same thing here?

That wouldn't work with a physical Dvorak keyboard, though (as opposed to my Qwerty keyboard, with the input layout on my operating system set to Dvorak). Do you have one, out of curiosity? (And, hmm, you could make WASD--or X and C here--work as desired on a real Dvorak keyboard by making it handle keypresses rather than device input and then setting the layout to Qwerty.)

You should allow the user to customize the keyboard, I prefer 'awsd' for movement and 0 and . as nintendo's 'A' and 'B' buttons. It maps better in my brain.

I didn't find immediately that the C was to jump. The keys should appear in the beginning.

pretty awesome job. fullscreen or a larger playable area would be nice.

Very nice, I second that fullscreen or a larger playable area would be nice.

the thing is, if I make the screen larger, the game will lag (lower FPS). Below 45 fps, the game isn't that fun to play.

I do realize that old NES games can be fullscreened any time of the day. Wish I could do that in my case.

Speaking of FPS, I honestly don't understand this: why is it that 25 frames per second is okay for movies but not for games?

There is generally about a one frame deep pipeline between the user interface and the rendering so you end up with more like a 100ms delay which is two human reaction times and enough to feel unresponsive.

Story of old: in the 90's, when the radiology transcriptionists were moved too far away for RS232 to reach their computer, and they were put on LAT devices (8 serial ports to Ethernet with crazy complicated optimization to multiplex traffic from all 8 into the same packets) their duplicate key errors and general frustration went up. Working from audio, they watched the screen and if the delay was ever perceptible they would restrict a key. Allen ended up writing them an editor that worked in half duplex mode (local echo).

Also an image on film is the integration over the time the shutter was open, causing a very smooth motion blur. Games don't naturally have this motion blur, so low frame-rate movement appears choppy.

Sometimes film makers reduce the length of integration (time the shutter is open) to produce a choppier scene. This was prominently featured in action scenes of the movie Gladiator. Many people did not like the effect because, like a low frame-rate video game, it was harsh and disorienting.

Because movies show motion blur which makes things appear more smooth. Most games just show static snapshots of moments in time and it makes motion jerky as a result.

Not working on firefox or safari on mac. This might be a problem?

http://game1-main.appspot.com/baked/game.min.js

http://game1-part2.appspot.com/media/music/level1.mp3

yup there was a bandwidth quota from AppEngine. I activated billing and it should work now

The best part about it was that I forgot it wasn't Flash.

thanks! it took a lot of integrating+checking+debugging, making sure the loading doesn't break halfway. Look and feel are my top priority

This was really fun! Addictive enough to have me spend 20 minutes completing all 5 levels.

Suggested areas to work on: 1 - The FPS reduces significantly when battling the tanks and shooting the officers - almost to the point of wondering if the game will crash. 2 - There was 1 prisoner on level 4 who I'm sure was unreachable. 3 - Improved sound effects i.e. different level music, mood music when facing the tanks etc

Looking forward to the next installment.

Additional unexpected behavior: 4 - NPCs were able to shoot through boxes/floors which stopped my bullets. 5 - When dropping off a ledge, it is possible to walk into midair before falling.

Also, like many 2D games, the best way to kill something like the level 1 boss is to scroll it off the screen and spam bullets.

I did not have any performance issues - it was steady at 60fps.

I'd recommend against using OpenID; see http://productblog.37signals.com/products/2011/01/well-be-re... for a well-written explanation of why. However, in the meantime, if you continue to use OpenID, please allow user-specified OpenID URLs, not just a fixed list of providers.

The key binding is the same as in biolab disaster. And it sort of looks the same. But awesome-awesome. Multiplayer coming soon?

i think multiplayer requires some node.js magic. Don't have a clue how that works!

the forums at ImpactJS had some discussions on node.js, will have a look

The fact that you can run out of ammo may made it a little too punishing for a game like this.

It's addicting anyway, but it could be even more.

Nice job.Can you please tell me what you used to code it:RoR,Python or just HTML5 only.i have an idea to develop something like that.

Not OP, but he used the Impact engine (Javascript) to do this.

what is Impact Engine?a js library for games?

Yes: http://impactjs.com/

any good open source alternative ?

Take a look at this list.

http://www.reddit.com/r/javascript/comments/f094j/list_of_js...

I have been looking for a good alternative to impactjs too. The one that I have been playing with is called Easel.js - http://easeljs.com/

i used to play around a lot with Akihabara (free & opensourced). The lack of a good map editor made me switch to ImpactJS

Suggest you to have a look at LimeJS (free & opensource). http://www.limejs.com

Have a look at craftyjs.com - not very mature, but moving fast, and really nice to work with.

I would suggest to take a good look at LimeJS.

Not to be a downer (I'm sure there was still a lot of work in it), but when it loaded I thought "oh, it's just Biolab disaster" (the first demo game of impactjs: http://playbiolab.com/). I think this game is just a "reskin".

The music goes a way when I switch tabs! It is a shame more games do not do this.

yup, it's a design decision. I hate it when games keep playing/running when i'm on another tab. Makes the laptop warm.

This is so awesome! Good work bazookaBen! I can't believe that you can make games with... html5. I thought this is only like: "with html5 you can make games! yea yea, i will just stick to flash..."

i'm still amazed myself! if the user doesn't even notice the difference between flash and html5, then there's hope!

i like it!

Needs a shorthop bro. Jump continues only if jump button is being held. check any NES / SNES Mario for an example

Great game. A little QA: your enemies are speaking a mix of German and English, and the signage is English. When you follow woogley's advice and change the sprites out, make sure exit becomes Ausgang. Some enemies say "fire!" instead of "feur!", and some say "stop!" instead of "halt!" Also, I couldn't restart the game at the game over screen (using c or x). Chrome 10 on OSX.

solved the restart problem. thanks!

Doesn't seem to be working on my XP SP3 + Chrome 10. I'll give it a try later on my Ubuntu and Win7, if they work any better.

Fun game! I'm happy I got to play. Smooth and natural feeling controls at 50+ fps on Opera 11.01, Windows Vista, 2.4GHz Core 2. Smoother than some native code games games I have played. Good art, good sfx.

I did want bigger pixels. Zooming in the page in the browser worked fine. And I would have liked either a higher difficulty setting or adaptive difficulty that gets harder if I haven't died for a while, like Xevious had. And I agree with nicetryguy that a short jump would be nice. And the monster didn't really make any sense in the game story.

i put the monster in as a teaser actually. Perhaps I need to include some sort of cutscene / chatter between characters. Have to find balance between game flow and fun

Nice game - how much work is something like this?

I like how the controls/movement are precise yet just forgiving enough.

Only thing, I'm not hearing any music (Chrome 11 beta, OS X).

I'm running Chrome 11 beta on OS X and I can hear the music.

Game has a great old school flair btw, well done!

the music server overserved its quota. for a 300kb song file, it reached 1 GB pretty fast!

I;ve just increased the quota, it's running great

about 3 months of work (from the very beginning of opening the manual)

I just put on my headphones, I didn't know you had this awesome C64 style music in it.. Great platformer game..!

yup, without the music, it's not a game!

Pretty awesome! My two complaints: Not everything has to talk. The weird monster going "roar" was a bit tacky. It's an ingrained convention that if something is flashing, it's about to disappear, so don't have your health crates flash by default.

i accept your reason. Maybe i'll replace it with some roaring soundfx in the new version.

this is awesome. Nice work. What tools did you use?

tools:

ImpactJS Google Appengine + Python for hosting and achievement system GIMP for graphics TextMate Switch for Mac (to reduce the bitrate for the audio files)

Out of curiosity, how many of you worked on it and how long did it take? I can imagine just the sprite artwork alone was a good chunk of time.

Great game. Just played it again so I can beat it. One thing I found annoying was how the enemy bullets can go through cover. Also I would have liked it more if you added more boss fights like the one in the first level instead of just tanks.

new levels by the end of next week!

I like the meaty sound it makes when a shot hits. More meaty sounds might be good.

Is there anything that can be done about the audio lag? In other words, is it something that could be solved in JavaScript, something that needs to be improved in browsers, or an inherent flaw in the HTML5 audio spec?

Really like the game, have you considered doing a write up on how you developed it? I think there is a lot of people out there that would be interested in developing a game, especially with this level of polish.

will keep that in mind. am pretty overwhelmed myself right now, due to the comments coming in. Basically trying to keep the game alive and fixing bugs

Is there a way to get in touch with you? Email me? suhail@mixpanel.com

sent an email

Could you drop me an email too?

jacob@gameclosure.com

ok sent

This is probably the smoothest html5 platformer I've played. Kudos.

the game was tested on

Chrome 10 Safari 5 Firefox 4 Opera 11

some users with IE9 reported some errors, I couldn't debug because i'm on OSX. Please let me know if there're any cheap methods to get an IE9.

> Please let me know if there're any cheap methods to get an IE9.

VirtualBox/VMWare/Parallels. Install Windows in a VM then install IE9.

EC2

http://crossbrowsertesting.com is great, and not too expensive

I think I found a bug: after losing the game and you want to start again, pressing x or c doesn't do anything. (Chrome 10 on Win 7)

i fixed that, thx for the heads up!

Nice job! It's fun. The jump is a little too slow for me though. And it's very frictionless. Awesome that this was done in html5.

Nice oldschool music. Where did you get it?

Very cool dude! Congrats on finishing it. This is motivating me to start on a game also this weekend :)

try ImpactJS! best thing that ever happened to me.

$99 seems pretty steep (for a beginner). Any alternatives?

it's the best you've got out there. The framework is organized, there's an awesome map editor, and the community is growing.

Fantastic job! The only downside is the limited game area size, but it's really pretty and funny.

anyone completed the entire game so far? I made 5 levels, planning to have more by next weekend

yes sir! giovanni 45211 pts!

Pretty cool! Is there any way you can make it larger? I find the characters to be very small.

Awesome! Creative and fun gameplay. Action-packed. Good level of difficulty.

Shouldnt this load on the iPad ? It stops at 25% of the loading

nope it won't load on an iPad.

Sound is not well built on the iOS/Android browser, so I figured, if the game is going to suck anyway, might as well don't build it for mobile.

Nice game, well done! Reminded me a bit of Metal slug.

Super awesome! Reminds me of my old NES games :)

have a quick question: how do I sort the comments coming in by time? Getting pretty overwhelmed here.

Use Notifo. I don't recall whether it notifies you about all comments on links you submit, but at least you can get notified when you get a direct reply to one of your comments.

are you @BazookaBen from Minnesota?

nope, my handle is @bazooka_ben, with 2 followers right now

just created it yesterday, don't have much idea on how to manage the account. Basically looking at what other game designers use their twitter and try to emulate them.

Not bad, not bad at all.

Nice work!

I'm in the process of building a game portal, would you like a subdomain like http://privatejoe.gumyum.com ?

I could create an A record right away.

Also you should check out my game sometime at http://four2go.gumyum.com

Reply on news.ycombinator.com