tl;dr
I have built a hangman game just using Bubble elements (no plugins and even no HTML element).
See the demo below:
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.
And this is how it is selected into a custom state on page load with a custom workflow (to reuse it):
Current hidden word:
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:

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:
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:
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):
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:
Whenever a button is clicked (user is trying to guess), the letter is added to the
guessed letters
custom state:
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:
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:
For example, body
is visible when the hanged parts
contain the body:
And the saved or dead texts are visible when the game state is the right value:
Game Ending:
Game can end in two ways. Either the man is hanged (
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:
And show the dead
text:
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.
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.