Duck Hunt is a simple arcade game inspired by the original Nintendo Duck Hunt game.
- User stories: Trello
- Production deployment: BitBalloon
- GitHub: Duck Hunt
- HTML5
- JavaScript
- jQuery
- Vite
The steps below will demonstrate how to create this project from scratch:
- Step 1 - Setup The Project
- Step 2 - Download the Images and Set Background
- Step 3 - Add Some Ducks
- Step 4 - Make the Ducks Fly
- Step 5 - Shoot the Ducks
- Step 6 - Recycle Ducks
- Step 7 - Deploying to BitBalloon via Drag-and-Drop
In this step we will use vite to scaffold the project, install node modules, and initialize it as a git repository.
1a. Run vite to create the project.
npx create-vite@latest -t vanilla duck-hunt1b. CD into the new directory and install the node modules.
cd duck-hunt
npm install1c. Initialize Git repo and commit all changes:
git init
git add -A
git commit -m "Created the duck-hunt project."
git tag step1Now we are ready to start editing the HTML, CSS, and JavaScript files under the src folder. As you edit and save, you will see the changes in the browser.
We need some images to make Duck Hunt come to life.
2a. Create an images directory and download the images into it.
wget https://raw.githubusercontent.com/drmikeh/duck-hunt/master/app/images/background.jpg -O public/background.jpg
wget https://raw.githubusercontent.com/drmikeh/duck-hunt/master/app/images/crosshair.png -O public/crosshair.png
wget https://raw.githubusercontent.com/drmikeh/duck-hunt/master/app/images/duckhunt.png -O public/duckhunt.png
wget https://raw.githubusercontent.com/drmikeh/duck-hunt/master/app/images/grass.png -O public/grass.png
wget https://raw.githubusercontent.com/drmikeh/duck-hunt/master/app/images/mockup.jpg -O public/mockup.jpg
wget https://raw.githubusercontent.com/drmikeh/duck-hunt/master/app/images/shot.png -O public/shot.png