I made a daily web game

It seems like simple daily web games, à la Wordle or Framed, have been quite popular over the pandemic. One could argue that interest began to wane as everything opened up again, but I still know many people who consistently log in to challenge themselves each day. My partner especially, loves these games - playing about 3 different ones without fail. I had an idea whilst this craze was going on for a similar daily game but one, unlike Wordle or Framed, which required you to log on the next day to see if you had guessed correctly. I decided I'd build it to see if I can get it added to my partner's daily schedule.

The reason I wanted the answer to be revealed the next day is that it allows, up to 24 hours, for people to discuss and debate the answer. This would hopefully increase the spread of the game. That being said, it did add a large limitation to the game as there needed to be a limited number of possible answers or it would be too difficult to win. I did think about making a multiple choice daily quiz, but decided against it. The beauty of these games is that they can played endlessly as they do not require new levels to built by the developer; A quiz would not allow this to be possible as questions and answers would need to be written or sourced.

I decided to look at common card games for inspiration. One immediately stood out to me. Higher or Lower. In this game, one draws from the top of a card deck and has to decide if the next card will have a higher, lower or the same value. This works perfectly for what I wanted to build as the player options can be the same each day and requires nothing more than a good Random Number Generator. I would, however, expand on the numbers and have them generate from a value of 1 to 999.

To begin building the game, I started by deciding how I wanted today's number to be displayed. It was important that you could understand the game very quickly. As such, I settled on making the number appear in a calendar tile with the last 2 numbers off to the side and the next number displayed as a question mark on the other. I can then make today's date appear more prominent. I decided that if you had gotten yesterday's answer correct, it would be green. If wrong, it would be red and in any other case, it would be white.

Then It was a case of adding a few buttons to make your guess. These buttons would link up to a function to save your guess for tomorrow. They didn't need to be complicated. I felt that for now, just basic text buttons would work best so that's what I built.

When it came time to build the random number generator, I decided that this would be done on the backend so as to hide the actual RNG that decided the numbers. This was important to me so as to stop the Worldle Issue of people releasing tomorrows answer before it was revealed. However, this shouldn't end up being a resource drain as the numbers will be the same for every user that plays the game (meaning that I can store the numbers once generated).

One thing that previous daily web games have done well is storing save data in browser local storage. This means that as the host of the game, you don't need to mess with logins or database storage costs. As such, I copied this choice and stored each guess in local storage as well as an overall save game. The 'save game' can keep track of a user's streak of correct guesses as well as their longest streak.

If a user has already guessed today, they needed to be told what they had guessed until the answer was revealed. Again, I went with the most straight forward option and displayed it in a text box. This felt to be the clearest way I could show the information and meant that I could also clearly tell the player to wait until tomorrow.

At this point, the game was practically finished. However, the reason that these games spread so quickly is that it is extremely easy to share your score to social media. This would also be important to create the discussion that I mentioned in the second paragraph of this blog post. I created a button that would allow you to share your choice. If you have a streak of more than 1, it will also include your current streak (so as to lend you credibility). I added a hashtag that allows me to keep track of people's conversations and made the game live. I then shared my own guess as to what today's answer would be (I was right).

Michael Walter Van Der Velden

@mikevdev

This Tweet has failed to load via the Twitter API, this may be due to the changes made by Musk or maybe I broke something. You can still access the tweet by clicking the link button below.

??? ??? link to tweet

If you would like to play Mike's Higher or Lower, you can do so here. I look forward to seeing what you all think.