What we can learn from this is that if we build a dam across the Pacific with a single opening 1 plastic bottle wide, we can easily fix the problem of ocean plastics.
haven't watched the video but it seems to me that in this case the solution would be as simple as using canvas + requestAnimationFrame instead of the DOM
That's a great solution. I've been trying to wrap my head around canvas manipulation but it just gives me a headache and I prefer making quick prototypes. I need to learn it one of these days.
That certainly would improve it but as the video points out, it can be simply about choosing the right CSS properties to update in each animation step.
You can see in the examples[0] that instead of changing the "left: x" value you can use "transform: translateX(val)" for a huge performance boost.
That's too bad. I'm sure it can be optimised quite a bit. I tried to make it so it renders different amount of fish based on your screen size, but that's not a good enough way of determining resources available unfortunately. Suggestions are welcome.
I did that at first, but if I remember correctly, it caused a lot of difficulties because I was also skewing the images to create a swimming effect (with transform). But you've motivated me to look into it more, it's possible I overlooked the solution.
Needs more of an arc to the game and end more quickly naturally. Like more trash at a time as you go on, or don't ever make it so it goes down to only a single fish. I got to 49/50 and just had to keep the trash can hovering over the fish, and I eventually stopped collecting on purpose after my score got above 1000.
Also might be better if some of the trash specifically targets fish instead of just dropping randomly. Like you determine the trajectory of the trash and fish and spawn it so it will hit it normally. Didn't seem to do that at all once I got down to only a few fish left, things just got way easier for me because there was less targets to protect.
Clever idea though, and the mechanics are nice and smooth.
Thanks buddy, glad you like it. Some real MVP suggestions here, I like the trajectory idea the most. Might be a weekend project... Yes I did notice that the last fish is very easy to protect, then again, it becomes that much more of an important mission to save the last fish in existence. I guess in a sense, it's a feature not a bug.
Haha, well, this started as a project for my class about sustainability, so the game is meant to show how much the ocean is in danger, which is does by literally making it impossible to "win" by simply picking up trash. That's why some of the trash is impossibly fast.
27 comments
[ 3.0 ms ] story [ 23.1 ms ] threadI will not be taking questions at this time.
Looks like most time is spent computing styles and parsing CSS.
The creator should check out this video https://www.youtube.com/watch?v=bEoLCZzWZX8&
0. https://lonekorean.github.io/animation-workshop/
TL;DW: Use CSS transform instead of left/top/width.
Also might be better if some of the trash specifically targets fish instead of just dropping randomly. Like you determine the trajectory of the trash and fish and spawn it so it will hit it normally. Didn't seem to do that at all once I got down to only a few fish left, things just got way easier for me because there was less targets to protect.
Clever idea though, and the mechanics are nice and smooth.
It’s certainly true the rocket trash successfully kills my fishes though.