This week went pretty well! I created some buttons for my website with some css shading styles.
I also implemented a back end to store prop changes (firstly for the water colour connected to my buttons, and secondly the fish image that can be changed from a ‘dead’ or ‘alive’ status)
To begin with, I was really confused with how I should implement these changes. I researched and realised props could help me. I made it so my button is clicked, the green and blue values of the water change.
Later on, I was trying to test to see how I could change my fish. I realised I could use the same prop with another variable (in my case, dead or alive fish) to trigger if my fish are alive or dead with a boolean.
I was so happy to see it working in action!
While its not very visible in this screenshot, in the left hand corner I have created a circular sun in order to give some variety to the background. In the future, I might add some clouds or something but I am not sure yet. I’m also planning on making the polluted water more polluted coloured.
Over the weekend I did some research about classes, as I realised it could make the implementation of fish and new features more efficient to code in the future. I have an idea of what functions I want to implement and a priority order, I have a few highest priority tasks:
- have a resurrect and kill function, for bringing my fish to life and killing them. I currently have this outside of the function but it could be easier to manage if I have this inside of my function so that I could kill/resurrect multiple fish
- have a way to spawn multiple fish. Currently, I have a plan where either when the user clicks the clean button a few times in a row more fish spawn, or maybe I’ll have another button that appears only when the water is clean specifically for more fish. Or maybe overtime the longer the water stays clean, the more fish stay alive?
- when the fish is killed, all of the fish die and turn into skeletons. But I wonder if they should eventually despawn naturally over time to avoid clutter or not.
adding my current functionality to my fish into my new fish class as well as adding a method for spawning more fish to make my water feel alive is my top priority.
I also have other things I want to add, but these are more optionally and if I have time:
- adding a message when you hover over a fish image about its species. When the fish is dead, this hover text will mention a sad fact or message. The intent of this is make the user feel sad about what is currently happening to the ocean’s wildlife.
- multiple different animal species. Maybe more fish? some sharks or dolphins? maybe even birds that float on top of the water! And when there is too much pollution, maybe some trash soars past the fish as well along the waves. This could maybe be done with an array of pairs or a prop? However I’d only consider implementing this after I have figured out how to spawn multiple fish at once.
I also have an idea for the water…
- making a class for each waves of water so I can individually change each waves G and B values to give the ocean a unique and stylised texture. Below is a mockup example. After focusing on the fish, which I find is more important than the waves, I’m not sure I’ll have time. But during implementation before, each circle would change rgb value and it would appear glitchy. With a class, maybe I could make it how I originally invisioned.
I have many features that I think of that I will 100% not have time to implement, but I feel like its useful for me to imagine the possibilities of what I could do so that I can visualize in my head what the more important things are.