Hangman game (only built-in Bubble elements, no HTML or plugins)

tl;dr

I have built a hangman game just using Bubble elements (no plugins and even no HTML element).
See the demo below:
chrome_Z2B6Fwob6j

See the editor and play the demo here:

Longer Version

I like building things in Bubble using nothing extra to test out the limitations of the provided abstraction. After seeing this question, I have decided to attack this as a brain teaser and want to share the details so other non-technical no-coders find something in here.

Word selection:

It is just doing a search for a word in the database. We can import more and more words. One of them is randomly selected. This part can be improved further such as keeping track of the number of selected words for each word and try to choose the less chosen ones next time.
image
And this is how it is selected into a custom state on page load with a custom workflow (to reuse it):
image

Current hidden word:

image

This word is technically just underscores (the same length as the selected word). To do this, I needed to use the find & replace operator with regex.


It is simply, matching all the letters (and excluding the guessed words [explanation coming in next bullet point]) and replacing them with underscores:
image
Alphabet letters are created by arbitrary text split by comma.

Guessing the word:

The guess is happening simply by clicking the letters. This is a repeating group of text with the alphabet as above:


Cell has a button with the letter name on it and when clicked, the letter is added to the guessed letters custom state:
image

Then, this guessed letter custom state is used first to replace the letters with underscore as above section, also, to disable the buttons in this repeating group:
image

Game state:

Game state is an option set to keep track of the status of the game. General suggestion is don’t use yes/no values to keep state. Most of the time, there are more than just 2 states in an application. In hangman, 3 states are enough (game is ongoing, won, or lost):
image
Obviously, in the session, it is tracked with a custom state (initially ongoing value) and this happens whenever a new word is requested (i.e., a new game):


I will talk about the game ending after talking about the hangman part of the game.

Hangman figure:

Hangman figure has two parts. First part is keeping track of what is possible to hang, what is left to hang etc. And the second part is dealing with the displaying of it.

First part (custom states)

This is done with two custom states possible hangman parts and hanged parts:


Obviously, the hanged parts are initially empty:
image
Whenever a button is clicked (user is trying to guess), the letter is added to the guessed letters custom state:
image

And if the guessed letter is not in the word, the next element in the possible hangman parts is moved to the hanged parts custom state:
image
The removal of the first thing in the possible hangman parts is done by get elements starting from #2.

Second part (display)

Second part is just a bunch of images conditionally visible:
image

For example, body is visible when the hanged parts contain the body:
image

And the saved or dead texts are visible when the game state is the right value:
image

Game Ending:

Game can end in two ways. Either the man is hanged :laughing: (lost) or the user guessed the word (won). These check is done after every guess (click of a button).

Man is hanged:

Man is hanged if there are no other parts to hang:
image

And show the dead text:
image

User guessed the word:

If the hidden word (the one with underscores) is the same as the actual word, the user won the game. The hidden word is also updated after every guess.
image

Conclusion

I think this concludes the post. The game can be improved further with features such as keeping track of a user’s history, or scores etc. I am sure there are better or more ways to do the things I did above. If you have any questions or suggestions, don’t hesitate to continue the thread.

6 Likes

Nice stuff :slight_smile:

may I suggest to use a negated set instead of a character set in the regex, this way you don’t need to create all the alphabet letters and works out of the box with other languages.
[^guessedletters]

1 Like

Correctly identified a nice improvement. Thanks. This might improve that part but probably, I will need a whole set of letters of the language for the repeating group of buttons in any case.

yes, for that you need it anyway, not a lot of gain from the negated set :upside_down_face:

amazing

Haha :laughing: I love it! I would have never thought about building this. Glad someone did!