20 replies to this topic

[TheNut]

Description
Duck Hunt
For the past while, I have been working on porting my engine over to JavaScript WebGL. I decided to take what features I implemented so far and built a game with it. The result is Duck Hunt, a WebGL based game where you shoot down as many ducks as you can before they escape. You have 6 shots per clip before you must reload. The game gets faster and more difficult the more you shoot. Submit your score online and see how well you rank against others in the top 10 list.

Click here to play Duck Hunt.


Known Issues
The game was tested on Firefox 4.0.1 and Chrome 11.0.696.68. The game requires a computer with a WebGL compatible video card and drivers. There are some audio playback issues in both Chrome and Firefox. Chrome seems to have complications when you attempt to reset the audio position back to the beginning. It also doesn't handle multiple sounds very well. Firefox is almost flawless, except that it sometimes runs into a network issue and cannot load the game music, throwing a 404 error without an actual server response (say what?!).


Tech Stuff
The core Nutty WebGL Engine currently features:

1. High level OGL ES 2.0 classes to manage VBOs, FBOs, shaders, and rendering.

2. Particle emitters with support for injecting custom particle modifiers, making it really easy to experiment with various particle effects.

3. UI system with controls such as buttons, progress bars, images, lists, window frames, etc.

4. Loads resources and UI controls via XML files with support for custom elements.

5. Supports keyframe animations and storyboards, as well as sprite animations.

6. Various math routines, matrix and vector transformation classes, intersection testing, etc.


Next Steps
Skeletal animation is one of the last remaining features to be ported over. Following that, I'd like to build a couple more games and see how things go.


About WebGL
My development experience with WebGL has been a pleasant one so far. If you come from a background of OpenGL, you will find WebGL to be quite familiar and easy. If you don't have any experience, it makes for an excellent platform to learn from. For a good intro to WebGL, check out Leaning WebGL.

[roel]

Heh, the speeds get quickly insane. But I was lucky enough to hit the frog :)

[TheNut]

Yeah, wildlife tends to do that when being shot at :lol:

[Dia]

Really nice game! This could make a good iPhone/Android game too

[.oisyn]

Damnit, got 670, but after entering my name I accidentally pressed "cancel" instead of "submit". Oh well, I'm still #1 with my second score

Cool stuff . To bad you can't reload when you're not out of ammo (clicking the ammo rounds even counts as a shot)

[bluecat]

This is really cool. After some tries, I made it into the highscore. Can't be too long until someone has 2,147,483,647 points though.

[.oisyn]

Muhahaha 879

[TheNut]

Nice :) I should almost implement a replay recorder so others can see how fast people play. Maybe even throw in that unreal commenter "mo-mo-mo-monster clicker!" :lol:

[moe]

Nice game during work :)
Is is just me or do the ducks get faster more quickly if you replay?

[Nick]

TheNut said:

The game requires a computer with a WebGL compatible video card and drivers.

Works well with SwiftShader too. Just drop the x86 d3d9.dll file in C:\Users\<UserName>\AppData\Local\Google\Chrome\Application

By the way, isn't it relatively simple to hack the high scores? :ninja:

[.oisyn]

What, Nick, are you questioning my leetness?

[TheNut]

I know the system is flawed. I'll fix it up if things get carried away. So far people are playing nice (knock on wood) :lol:

[imerso]

Sweet. Just for you to know, it worked perfect here at home, but there at work I'm currently using a Mac with OSX Leopard, and there although the logic was working right, graphics were very weird, flashing a lot, etc. Buggy as hell on Chrome Mac. I guess it might be Chrome'a problem, just reporting.

[.oisyn]

Worked fine on Chrome for Windows.

[touch_the_sky]

Same here, just fine on Windows with Chrome, cool btw;)

[moe]

I have been wondering how you determine the country for putting up a flag in the high scores. Is this a service you got from somewhere or is it homebrew? Would you mind giving some hints on how you did that?

[TheNut]

moe, you can determine a person's location based on their IP address. Various companies database this information and provide it to the public, either for free or for a price. MaxMind GeoIP is one of the most popular IP lists out there. It's updated regularly and has a free version too. Once you have the list, it's a matter of populating a DB table with them and performing a look-up on the IP address (represented as a 32 bit integer, not as an IP string). If you're interested in how to do that, see this page.

As for the flags themselves, a complete listing is provided on wikimedia as well as OpenClipart. You can also download a compressed list of them here (look for flags-2.9-png or svg). The names of the images follow the same ISO 2-character country code as the IP list above, so it's pretty straightforward to display the correct flag. For best performance, you should build a sprite sheet with all the flags in it. You can see what that looks like here.

[moe]

Awesome, thx for the info.

[.oisyn]

Too bad that not all flags have the same dimensions.

[Nautilus]

There's a potential weakness in the country flags based on IP address.

Likely unheard of in other countries, but not too many years ago a few italian ISP had servers physically outside Italy.
For example, backtracing some IPs from north Italy would map to the Netherlands. Not kidding.

I ignore if this anomaly is still in use today (daring an answer I'd say No).
My current italian ISP is definitely within italian territory.

Cool game, btw!


*back to lurk mode*