Duck Hunt

6837d514b487de395be51432d9cdd078
0
TheNut 179 May 16, 2011 at 09:00

11-05-15.jpg

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.

20 Replies

Please log in or register to post a reply.

6aa952514ff4e5439df1e9e6d337b864
0
roel 101 May 16, 2011 at 09:54

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

6837d514b487de395be51432d9cdd078
0
TheNut 179 May 16, 2011 at 19:15

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

Fdbdc4176840d77fe6a8deca457595ab
0
dk 158 May 19, 2011 at 07:26

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

340bf64ac6abda6e40f7e860279823cb
0
_oisyn 101 May 19, 2011 at 09:57

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)

64c9331d641e452b48dbafa9b4587a9c
0
bluecat 101 May 19, 2011 at 11:34

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

340bf64ac6abda6e40f7e860279823cb
0
_oisyn 101 May 19, 2011 at 14:17

Muhahaha 879 ;)

6837d514b487de395be51432d9cdd078
0
TheNut 179 May 19, 2011 at 19:48

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:

87e614b8b888bb2c4485c1ac16d8c779
0
moe 101 May 20, 2011 at 11:09

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

99f6aeec9715bb034bba93ba2a7eb360
0
Nick 102 May 20, 2011 at 14:36

@TheNut

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:

340bf64ac6abda6e40f7e860279823cb
0
_oisyn 101 May 20, 2011 at 15:34

What, Nick, are you questioning my leetness? ;)

6837d514b487de395be51432d9cdd078
0
TheNut 179 May 21, 2011 at 00:55

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:

17ba6d8b7ba3b6d82970a7bbba71a6de
0
vrnunes 102 May 22, 2011 at 12:55

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.

340bf64ac6abda6e40f7e860279823cb
0
_oisyn 101 May 22, 2011 at 20:40

Worked fine on Chrome for Windows.

Ffe16f497018b21d87cf101c9c49cfe0
0
touch_the_sky 103 May 29, 2011 at 14:18

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

87e614b8b888bb2c4485c1ac16d8c779
0
moe 101 May 30, 2011 at 07:28

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?

6837d514b487de395be51432d9cdd078
0
TheNut 179 May 30, 2011 at 14:38

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.

87e614b8b888bb2c4485c1ac16d8c779
0
moe 101 May 30, 2011 at 15:10

Awesome, thx for the info.

340bf64ac6abda6e40f7e860279823cb
0
_oisyn 101 May 30, 2011 at 15:17

Too bad that not all flags have the same dimensions.

D619d95cddb1edb227f51ef539d15cdc
0
Nautilus 103 Jun 08, 2011 at 16:11

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*

Ffe16f497018b21d87cf101c9c49cfe0
0
touch_the_sky 103 Jun 08, 2011 at 16:43

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

Also, let’s not forget about good old VPNs and stuff ;)