NOTE: This game can only be played on Desktop
Project Type
Browser Game
Roles
Designer
Programmer
Made Using
-
This is a light recreation of the classic Nintendo game Duck Hunt made using various JavaScript frameworks.
-
Players can aim using their mouse and click to shoot the flying duck. With each successful shot however, the duck will move faster. The game ends when players miss the duck 5 times, and have no ammunition left.
Background
In 2018, I made a game using in JavaScript where players shoot a ball bouncing across the screen. The player’s score increased each time they successfully shoot the ball. The player’s goal was to get a high score by shooting the ball as many times as they can.
Here is a recreation of the prototype done with Claude Code. This was how the game looked and played initially.
A simple exercise that worked for the time, but one that desperately needed elaboration. I then aimed to continue building upon the game, looking to one of my favorite casual games as inspiration, the 1984 NES game: Duck Hunt.
In Duck Hunt, players use a zapper gun to shoot ducks that appear on the screen. Players score points every time a duck is successfully shot, and a player has 3 chances to shoot a duck. Shooting enough ducks advances the player to the next round.
The difficulty increases as the player advances; targets will move faster, and the required number of targets to shoot will increase.
When doing the 2018 prototype, I aimed to create a 1:1 replica of playing Duck Hunt as closely as possible. However, I soon found out the game was more complex than its simple appearance. With this in mind, I would go on to restart the project with a goal of getting as close to the original experience as possible..
Creative Process
While I was able to recreate the original project in JavaScript, upon additional experimentation, I stumbled upon P5.play, an adaptation of the p5.js framework that allows for creation of game assets, including animated sprites with natural attributes that can be manipulated, such as velocity, colliders, and even gravity.
Using p5.play allowed me to create and animate the sprites, while also generating backgrounds. Weaving these in sped up my coding time and length considerably.
To implement the games audio, I used another associated framework, P5.sound. This allowed me to add distinct elements including game background music and different sound effects to make things more dynamic.
I gathered game assets from several different platforms including The Spriter's Resource for sprites, The Sounds Resource for sfx, and YouTube for the game's bgm.
Project Timeline
Day 1
Began experimenting with P5.play.
Animated Duck Sprite in place of Ball.
Got duck to face right and left when moving and react to being shot.
Day 2
Added crosshairs to game as cursor.
Added Shot sound effect from original game.
Got score to increase when Duck gets shot.
Day 3
Got ammo count to decrease, ending game if out of ammo.
Added custom typography and Game Over screen
Added background sprites and background layers to game screen.
Day 4
Programmed sound to game interactions (when Duck is shot)
Added 3 Easter Eggs as individual game over screens.
Added game's title screen.
Day 5
Added music to game.
FINISHED GAME
Retrospective
My goal for this project was to expand and add what I can to turn this game into a fun experience that captures some feelings of nostalgia. With the way the work ended up I exceeded my expectations for how this project would turn out, as I originally didn’t think this was all possible in such a short timeframe.
Adding the original game’s sprites and music and implementing the game over screens changing depending on the player's final score was easily my favorite achievement. I wanted to incorporate at least 1 easter egg, but the fact I was able to add 3 was something I didn’t plan for.
Finished in the span of five days, this project stands as one of my favorites. It was a painless experience assembling the various assets, and exciting to see ideas slowly come to reality, but it's a different feeling seeing other people enjoy interacting with something you built.
I do wish to do more work with P5.js in my spare time to possibly get this game closer to it's NES counterpart, and even recreate more retro games for browser.
Even if they check it out for a few seconds, I hope those deciding to check this game out have as much fun with it as I did making it.
Last Project
