Show HN: I made a web game using emojis and no JS framework | Hacker News Reader

Show HN: I made a web game using emojis and no JS framework

fastflood.dylancastillo.co

188 pointsdcastm109 comments

Open articleView on HN

Fast Flood No.4 → ⌛ → 31 seconds ▶ → 18 moves → 1 try

Quite fun! Nicely made.

My (hopefully constructive) feedback:

- Bug: I refreshed the page on my first try and it told me to “come back tomorrow.”

(I opened it in incognito to proceed.)

- Opinion: Failed three times. Felt terrible that I was limited to three goes. The “You’ve used up your tries” approach that Wordle takes only works because you get the satisfaction of learning what the word is.

- Opinion: Timer is stressful. Personally I’d prefer a relaxed game. Just time how long the person takes, don’t cut it off.

- Idea: Use subtle cross-hatching as well as colours to make the game far nicer to play. If you must stay with emojis, then use more creative square-shaped ones.

- Opinion/Idea: Don’t limit the moves. Just show a goal, and let the player exceed. So count tries, overall time (spent trying on any try) and lowest moves. That way people can share “Fast Flood No. 3 with 14 moves in 4 tries over 6 minutes and 10 seconds.”

- Idea: Draw a subtle border around the cells you control. Makes it easier to search for neighbouring cells, and makes it satisfying as the border eats away at the border.

- Idea: Simplify the explanation to “Make all the squares the same colour, in as few moves and as quickly as possible. There’s a new challenge every day.” The mechanics are simple enough that giving players the goal is enough. They’ll figure out the rest, and actually enjoy the process more than if was all laid out for them.

Metacomment: I like your approach of explicitly labelling feedback items as bugs, opinions, or ideas. This allows for quick triaging – as a Show HN’er, I’d love to receive feedback in this format. I’m also going to reuse it for the feedback I give.

Thank you. This is great feedback.

I like the move limit- it's part of what gives Wordle and its associated games (have you tried Sedordle?) their charm.

One thing I'd definitely like to see would be the ability to see your score and game state once you return to the page. I'm effectively locked out at this point so I can't share my score anymore.

Got that feedback a few times. That's the next feature :)

On iPhone SE (the original small one) the "I'm colorblind" checkbox is cut off below the bottom of the screen at 100% zoom, can't scroll to it or pinch-zoom out, so there's no way to know it's even there. I could see and use it when I set page zoom to 75%.

I thought I might have had the system text size set high, but it's at the 2nd-lowest.

Update: I love the colorblind mode! I was already going to suggest a game mode with more visually interesting emojis and you picked some great ones :)

I actually find it much more fun and aesthetic than the default mode. (At least on iOS, the emojis are very nicely designed. Iirc each Android brand has their own emoji design.)

Thank you. I've been thinking about that change. It does look cool haha

100% agreed. It's already fun, but these changes could make it something special. The "adjacent color matching" concept reminds me of an iOS game I like called "Kami 2".

I get that you're following the "once a day" wordle model, but you're going to lose a lot of people who go in blindly (like me), don't understand the game, and then discover they're locked out because they went back out to read the instructions.

Put the instructions in a modal or something or make it clearer you're about to start the "once a day" mode.

Bingo. I did not appreciate having to delete the cookies just to actually play because I skipped through the text.

Just open it again in an incognito/private tab, no need to clear your cookies.

edit: I guess I wasn't clear, I was trying to say to parent that it is not needed to clear all your browser cookies and opening in incognito is the easiest solution, especially on mobile.

Of course on desktop you can easily delete that single cookie from dev tools, but opening in incognito is still faster.

>it is not needed to clear all your browser cookies

In Firefox, Right click > Inspect > Storage > Cookies

You can see that site's cookies and delete the ones you want manually. I hate clearing all of my browser cookies

> Right click > Inspect

When you do this you are opening dev tools, that's what I was saying. On firefox you can just hit F12 to open it and then go to storage.

Nobody said they had to clear their cookies.

I explicitly didn't use the word "clear" because that isn't what I did.

Regardless, absurd that it's even required for such a small game.

Yes, you're right. Fixing that refreshing and getting locked out bug is a priority right now.

Agree. This is the kind of game that requires little thinking and I would like to play it for an hour straight.

If, like me, you entered the game and found yourself not fully understanding how to play (because you didn't read the example), then found you couldn't play the game again today, just delete the cookie it leaves in your browser of `has_played - 1`. Then you can play again.

Seems a weird choice to only let people play once when it could be easily randomized or solved in multiple ways, unlike Wordle, which seems to have started the one-a-day fad.

I liked Wordle and thought that the one word per day limit made it more fun. But maybe it doesn’t apply for this type of game.

I think this is a bug. If the user goes back to the help page in the middle of their first try, they don’t get another try (but they’re supposed to get three tries).

EA was just ahead of the time with “you have to wait twelve hours until ‘the car is repaired’... or you could pay us money”.

Cool game! I think the timer detracts from it.

I also did one try, then came back a bit later to try again, but I guess I don’t get to use my other tries because I left, which I didn’t like.

The timer has been controversial haha

I may end up removing it, just thought it was interesting to get two axis to measure performance: moves and time.

I like knowing the time but I don't like being cut off by it. Just let it count up. Same with the moves. You can say what "par" is to make a goal to achieve, but let people take as long and as many moves as they want. They will pressure themselves to do better.

Within 60 seconds and while distracted I managed to figure out how it worked and win my first round (also clicked right through the text) - but then I failed the second round by running out of moves, so the first may have been a fluke :)

I think the timer can help avoid people who will over-analyze colors, but it definitely also changes the way our brains allow us to play - maybe a compromise could be a "free-play" option with no timer, but keep the timer by default? Or the opposite with the timer as a "challenge" mode? I could see the interest in both- it would be neat to see how few moves I could complete a puzzle in if given infinite time!

Also replying to another comment, I do think it is the right choice to allow multiple plays (you may have changed that in the past 10 minutes since it seems I was able to play twice)

I actually liked that it had both a timer and move limit - helps prevent analysis paralysis. My biggest complaint was that the blue and purple colours seemed very similar.

I'd probably bump it to 90s, at minimum. I moved what I felt was pretty fast through it, and ended up in the high 50s both tries (1 fail while figuring it out, then succeed).

After your first loss it starts counting up while the 3...2...1 go thing appears, which costs you three seconds.

Why do I have to "come back tomorrow" to play a game more than once? What a weird anti-user feature. Have to delete cookies to play a game! What next, be allowed to play one game a day on my xbox?

Agreed, I refreshed to play more but found this message. What an odd decision.

It's trying to copy the artificial scarcity of Wordle, which limits the amount of times you can play to encourage sharing the link.

The actual, not so secret now, secret sauce for wordle is the instant recognizability of its "game outcome" (I don't know what to call the green, yellow and gray emojis). This might do the same by instead of telling everyone all these details about score, publish the final status of the board. I think that would instantly tell someone how far one got etc.

Bad inspiration from Wordle I guess

I have to admit, I don't like the limited tries per day thing. I like the move limit, but it's frustrating not being able to finish the thing and have to wait for tomorrow before trying to figure out a better strategy.

Nicely done!

I actually made a similar "flood it" game last summer to practice Vue 3.

In my version there is no timer and I added some power-ups to add a little more complexity to my project.

Disclaimer: Not so mobile friendly :(

https://flood.kirkegaard.tech/

Love it!

Great game!

Can you add manifest.json [1] so it is more app like when added to home screen.

"display": "standalone" helps alot on phones.

https://developer.mozilla.org/en-US/docs/Web/Manifest

Thanks. That's a good idea!

Cool game, but it doesn't work on Safari, Chrome, or Firefox on MacOS 10.14 Mohave. I worked out that it will work if the colorblind checkbox is checked, but I had to clear the cookie to find that out. Problem with the emojis I guess, but there's no need to use emojis just to get a coloured block — you could do that with a couple of lines of CSS.

It's good that you didn't use a JS framework, though given that the only changes to the page as the game progresses are updating the grid cells and a couple of bits of text, it would be pretty crazy if you did.

Also, I was amused that the example gif is over half the total page weight. You could do a mini demo/practice level instead in much less.

Cool game mechanic, I haven't seen anything quite like it.

I think you could remove the UI options at the bottom entirely.

Instead have the user click on the adjacent squares directly. Basically if I click a red square on the board, that would be equivalent to selecting the red square in the UI options.

Then add have a hover state that indicates what is going to happen after they click. And make everything bigger such that so the user can't avoid mousing over the squares. If the hover state is good enough, it should teach the rules without the need for instruction.

Oh and make the color blind option the default / ditch the squares. The emojis look cooler.

Doesn't work at all in Brave, all I see are rectangles.

I am on brave 1.36 and windows 10, I was able to finish the game.

It looks like it uses "modern" emojis that aren't available on our OS.

They don't render in macOS 10.13 (the latest version I can install on my girlfriend's 2009 iMac) either.

I've found that any time I'm using emojis for something substantial, I end up using rendered images for them. Even when the emojis are all supported, they can differ across devices and look like something that wasn't what I was going for. Though kinda defeats the fun of using emojis.

Agreed, and it doesn't work on 10.14 either. It's a shame that emojis are somehow tied to OS updates.

I’m going to rub the other way here and state that I didn’t enjoy it. Times puzzles aren’t fun since it eliminates time to think about strategy. I’d tweak it a bit to remove the timer and limit it to one solution per day(if you want to keep the daily model). This way the player would have time to pick the solution but mistakes are unforgiving if you want it perfect every day).

I enjoyed this game!

My strategy was simple: Scan the boundaries of the area of cells stemming from the top-left corner cell which are of the same color, and attempt to determine which of the other colors has the highest number of unique cells which have at least one edge in common* with that region.

* There's room for optimization here.

Is there a better strategy?

Here's my score.

Fast Flood No.3 → ⌛ → 31 seconds ▶ → 17 moves → 2 tries

Same.

But then got timed out, so just tried to pick what felt like it would increase surface area the most.

Ie one red touching that is connected to a strip of red Ha s more value than flipping 2 red.

Very fun. I like the timer and move limit to add a bit more pressure, but agree with other commenters that it may not always be desirable. My suggestion is to have different modes. A practice mode to learn the mechanics, a “strategic” mode where you can turn off the timer and/or move limit, and a competitive mode when you’re ready to tackle the day’s puzzle.

What I find funny about this game is how exact the odds are

90% of the time you'll end up with 1 turn out of luck pretty much

I also made a flood implementation

Except it's not locked to one try per day

And clicking the items in the box triggers the action as well

https://flood.merkoba.com/

Nice game! One cool / weird thing that happened to me is that I got better each try (solved it on the third one) but still have no explicit opinion about what the right strategy is, and what I was doing better. It's interesting to see one's brain take over.

Fast Flood No.4 → ⌛ → 30 seconds ▶ → 18 moves → 3 tries

This game is amazing!

I was a little confused by the game mechanics at first so it took the first two rounds just to figure out what's going on... maybe animate the active colored blocks with sth like a shake/highlight effect?

Nice work. I just posted it to a group of friends and they’re all playing it and posting their scores.

Assimilate (Flood-It for Mac OS 9) was posted on HN recently; did that inspire you? https://news.ycombinator.com/item?id=30176448

Not really. I missed that post.

I was looking for logic games and found Flood in Simon Tatham's puzzles collection: https://www.chiark.greenend.org.uk/~sgtatham/puzzles/

I think it's obviously inspired by that. Too bad you can't click the board directly like in the original (which was apparently made 11 years ago).

Like you say, it's obviously inspired by Flood-It. I should clarify: I had never heard of Flood-It before the Mac OS 9 port ("Assimilate") was posted to HN last month, and I was curious if that posting was what inspired this remake.

> the original (which was apparently made 11 years ago)

I'm not sure what the true original is--I found a still-playable version[1] from 2006, from back in the brief heyday of Web Gadgets and personalized web portals[2].

[1] http://web.archive.org/web/20061112004207/http://www.labpixi...

[2] https://en.wikipedia.org/wiki/IGoogle#Gadgets

Seems like a fun game but I don't think it'll hit the worldle success because the dividide the middle and aim straigh for the diagonal strategy gets you a win pretty much every time. Mechanic wise I really like it. The delays and limitations would make you want to play it more too. Probably if you improve the algorithm you use to generate the blocks you can make it harder. Also maybe make the board bigger.

Fast Flood No.4 → ⌛ → 30 seconds ▶ → 20 moves → 1 try

Fast Flood No.3 → ⌛ → 57 seconds ▶ → 17 moves → 1 try

Nice concept!

- I had to considerately speed up my game after realising I was running out of time - The frenetic pace is not very enjoyable - I don't see any emojis - It doesn't feel like a puzzle because of the time constraint, I'd remove the timer and lower the max moves allowed, so that you have to think in advance instead of just scanning for max adjacents color and then iterating colors

Fun game!

I'd suggest adding a link to the shareable clipboard score.

"Always blue, Always blue" haha

at first I didn't understand what was going on with the mouse but then it worked out. Nicely done.

Haha. I loved the first seasons of Sillicon Valley.

I skimmed the tutorial and just clicked around my first round, not rly sure what was going on until around the end of the round. Second round I understood the mechanics but ran out of time, was confused a bit about why I lost before I realized there was a timer. Finally... Fast Flood No.3 → ⌛ → 51 seconds ▶ → 17 moves → 3 tries

I didn't complete the first game and reloaded the page and now I can't play until tomorrow. In this case I think the imposed limit is kinda "artificial" and would work better having a unlimited number of games/puzzles as opposed as in Wordle

Working on that bug now. I'll probably keep a limited number of plays per day, but you should be able to continue playing even if you refresh.

I have made some emoji games too.

https://elemental-emojis.vercel.app/ https://ee-nojs.vercel.app/

I tried it three times and failed, got frustrated, then opened it in a private window and turned on color blind mode and got it on the first try!

I think color blind mode is way easier and maybe should just be the default or only option.

Nice! I make emoji games too!

Here's minesweeper https://letter-press.netlify.app/scooper

I can't try it since trying to press 'back' using mouse 4 entered me into the game. Trying to copy the emoji entered me into the game and then my 3 moves were used?

So =(

Can the board be made larger? I found the game was over too quickly and there was little scope for strategic thinking by looking ahead for channels with lots of branches.

I'm not exactly sure how it would change the gameplay, but I wonder what it would be like if the starting point wasn't always in a corner?

Also - not a fan of the timer.

That's a pretty interesting idea. Gonna think more about it.

I'm using a recent Firefox on a stock Android on a Samsung 8.

The game only shows brownish rectangles.

I know the phone is considered antique by today's standards, but still...

This is fun, thanks!

It seems like once I solve a puzzle if I don't copy my results I have no way of seeing them. I'm at a screen that says to come back tomorrow.

Fast Flood No.3 → ⌛ → 20 seconds ▶ → 18 moves → 2 tries

Super fun!!!!

Took my a run to understand how to play. Thought I had to click on the titles to pick what colors I wanted. Got it the second go though!

I went back to the instruction page realizing I really needed to understand it before playing. Now it shows comeback tomorrow.

I was not expecting much, but that’s pretty good! It’s Tetris-simple, but still challenging give the time limit. Great job!

I like the timer. Main improvement I'd suggest is using the full browser display rather than jamming it up where it is.

I'd love a mode that adds some letters on the tiles, as I'm colorblind and have difficulty differentiating colors.

I'd love to see the top left corner or the 'flood' section highlighted somehow, I really liked it!

Sorry to add a third comment, but I'd love the 'share' button to include the game's url

Now what is the best way today to publish such JavaScript app in Google or Apple app stores?

Fast Flood No.4 → ⌛ → 52 seconds ▶ → 18 moves → 3 tries

pretty fun. love to see where this goes.

If you press back to try and enable colour blind mode you have to come back tomorrow.

For those of us (like me) that insist on sharing their results, use this thread!

First try, 17 moves: Okay, lets see if I can do better.

Second try, 17 moves: Interesting, lets try again.

Third try, 18 moves: Damn, not what I expected...

Fast Flood No.3 → ⌛ → 19 seconds ▶ → 17 moves → 1 try

Not sure if that took me 19 seconds or 19 seconds remaining.

Fast Flood No.3 → ⌛ → 42 seconds ▶ → 17 moves → 1 try

I enjoy this game very!

Fast Flood No.4 → ⌛ → 30 seconds ▶ → 20 moves → 2 tries

Fast Flood No.3 → ⌛ → 35 seconds ▶ → 16 moves → 3 tries

Fast Flood No.3 → ⌛ → 25 seconds ▶ → 15 moves → 1 try

Fast Flood No.3 → ⌛ → 28 seconds ▶ → 16 moves → 3 tries

Would be savvy to have an emoji set that still works on HN for sharing purposes.

Yes, tbh had no idea that not all emojis would work in HN!

I posted this awhile ago, all the emojies that work with HN.

https://news.ycombinator.com/item?id=19482991

You could use diff flags and give it a stratego like appeal.

Thank you!

Fast Flood No.4

→

⌛ → 45 seconds

▶ → 16 moves

→ 3 tries

Fast Flood No.3

→

⌛ → 45 seconds

▶ → 16 moves

→ 1 try

Fast Flood No.4 → ⌛ → 32 seconds ▶ → 20 moves → 3 tries

… beautiful game! very well done.

This is incredibly addicting

Took a minute to figure out, but thought it was fun. Thanks for sharing!

Fast Flood No.3 → ⌛ → 41 seconds ▶ → 17 moves → 2 tries

This is fun and seems to replicate more closely the things I enjoyed about Wordle than other attempts. Well done!

Fast Flood No.3 → ⌛ → 29 seconds ▶ → 15 moves → 1 try

Cool game I like it, runs smooth!

Cool game, thanks for showing!

Thanks! Glad you liked it

like the idea

very nice

too stressful

Fast Flood No.3

→

⌛ → 59 seconds

▶ → 18 moves

→ 1 try

Reply on news.ycombinator.com