In this project, I have created a virtual pet using JS. This is my first project, where I have worked by myself with no set objectives, mainly hoping to get more comfortable with OOP, DOM manipulaiton and designing good looking interfaces.
The first challenge was to create JS objects with dyanmic properties, these are completely based on the virtual pets from the Command Shift bootcamp 'virtual pet' project.
But so far, the pets were just lines of code. Not very fun.
As a challenge to myself, I have also designed and created a GUI so that users can interact in an easy and fun way with these virtual pet objects.
I have tried to use DOM manipulation and creative CSS magic to turn the mathematical objects into cute pets that you must look after, lest they die. :(
I have made 3 unique pet avatars, each with their own animations and interactions, but they function identically when it comes to the JS.
git clone https://github.com/George-xixi/virtual-pet-gui
npm install
in src folder:
-
controller.js : line 53 : Changing this number will allow you to control the speed of the day cycle.
-
controller.js : line 89 : Changing this numnber will allow you to control the speed of aging (faster aging is more difficult.)
-
pet.js : line 3-13 : Changing these numbers will allow you to fine tune the game, how much eating replenishes hunger and how impactful excersise is.
-
Be VERY careful changing any of these, they are fine tuned for a balanced game.
- The tutors at Command Shift for all their help and support!
- https://www.pixilart.com/ for letting me make super fun artwork
- me : for working so hard :)
George - 2022