Show HN: Listen To The Ocean – JavaScript game w. AI-generated sprites | Hacker News Reader

Show HN: Listen To The Ocean – JavaScript game w. AI-generated sprites

neontomo.com

43 pointsneontomo27 comments

Performance is disastrous on my machine. Janks more often than not.

Looks like most time is spent computing styles and parsing CSS.

Same here. It doesn't use any GPU.

The creator should check out this video https://www.youtube.com/watch?v=bEoLCZzWZX8&

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 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.

0. https://lonekorean.github.io/animation-workshop/

Hence "using canvas"

What do you mean? There's no canvas in those examples.

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'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.

The video dagurp referenced is literally precisely what you are looking for.

TL;DW: Use CSS transform instead of left/top/width.

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.

The game gets really easy when you make the width of the screen as small as it can go.

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.

I will not be taking questions at this time.

You're on to something...

If only reality was this simple.

Needs to start slowly and work its way up. gets janky when lots of fish are in the water.

Thanks, good idea!

2fps on my phone.

So you're saying there's a chance?

That's brutal, trash touches fish, they die

RIP

What is with these people literally shooting trash into to water?

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.

I’d imagine it’s equally poignant when you realize there’s literally no end to the trash, regardless of how much you pick up ;)

It’s certainly true the rocket trash successfully kills my fishes though.

I prefer Xbill

That's a new one for me, thanks!

Reply on news.ycombinator.com