8 Games Built with Webflow
As an attentive reader of my blog, you already know that you can build great websites with animations with Webflow. But did you know that it is also possible to develop entire games with Webflow? You read that correctly! Numerous game developers and designers use Webflow for their games. And they achieve really good results.
I'll introduce you to eight of them in this post. Playful spirit guaranteed.
Once 90s please: Baby Race
If you played Super Mario on Game Boy in the past, you will Babyrace catapult back to that time (to the Webflow showcase project*). The platformer was developed by ESE Agency for Swiss discounter Denner. The game comprises a total of 10 levels, in which you fight your way through different cities in Switzerland as a baby. The idea: get to the nearest Denner store as quickly as possible. Can you beat the time it takes in real life to get from Swiss attractions to the nearest Denner store?
The design is based entirely on the classic Game Boy. And it can also be operated directly via the virtual Game Boy - or alternatively via the PC keyboard. Smart idea that includes CSS Design Awards for which the best UI design, the best UX design and the best innovation got.
Creative agency idea: Road Trip Reveal
Agencies always come up with something to keep their teams engaged. This included ThreeSixtyEight, who wanted their employees to find out which retreat location was being visited in 2022. For this, the agency has a interactive game created, which even as free Webflow Cloneable * is available. Six teams compete against each other to overcome challenges and reveal the location.
The result is a game in which all team members are involved. Because: You can put together your own team. And then jet off with everyone on the VW bus to find out the retreat spot. That's a cool idea. Implemented even more coolly. And from Awwwards with a Honorable Mention honored.
The playful portfolio: Pierre Louis
The competition is showing no mercy. Even — and especially — in the creative sector. You have to stand out from the crowd. A simple portfolio is not enough. The French creative freelancer thought so too Pierre Louis. And with Webflow, he quickly designed his portfolio as a game.
Click by click, the 'game' unfolds and reveals further information about Pierre and his nature. Makes you happy, looks good - and stands out.
Recreated with Webflow: Civilization VI
Just recreated with Webflow. And in doing so, pursues a big vision. Sarkis Buniatyan from Protocore Studio wants to show the world that you can create great things even without code. This is also the case with a Nocode tool such as Webflow.
So he simply has the global strategy game Civilization VI rebuilt and in his words, “released the biggest webflow project ever with 12,400 elements, 1,800 styles, 1,200 assets, and 400 interactions.” He has integrated all 46 leaders into the game, along with their soundtracks and almost every feature. The project is a whopping 124 GB in size! Yo, Nocode can do something.
Feel free to take a look at the Civilization game's Webflow project in Designer (Free Cloneable*) on.
Tricks Games: Webflow Wizard Journey
Press & Hold. That's how you start it Game by T.RICKS Games. Well, not entirely. First, you create your magician character. The color, head shape and design of your hat can be adjusted. And that's when it starts.
The rules of the game are quickly explained. Avoid the beetles. Collect chests And use the space bar to jump. Simple but addictive.
The game is available as free Webflow Cloneable*. Here you can see how it was built.
By the way: Once you've finished the game, you can choose your prize from a bar at the bottom. For example, the custom code is visible here.
Work in progress: The magician game
Friends Timothy Ricks and Nick Landry have created a small but nice game in Webflow. In Wizards Game (free Cloneable*) A magician runs through a fantasy world and destroys any enemy that gets in his way. Character changes are possible.
The menu is solved via the simple menu button. Treasure chests, which are stored as two images - a closed and an open chest - in Webflow work in a similar way. Just like the energy indicator.
For learning purposes: Recreate an interactive fantasy map
One interactive map * (free cloneable), which could come from a really good fantasy game. Timothy Ricks shows in a Tutorial videoHow he builds the map. The basis is a map container and a map image contained therein. Then it's on to the details, such as boxes, which act as buttons on the map and make details about the country visible.
Step by step, the video shows how this interactive map is created entirely in Webflow.
Want to take a closer look at the map in Webflow? Here is the link to free cloneable. However, this is really only to be used for learning purposes. Timothy does not have the rights to the design.
An immersive experience: Christmas World
A website built in the character of a game - that's what we know from Webflow. Yet rarely done so brilliantly. As is well known, animations are really nice to implement with the website builder. And that's what the developers from Amce Studios are doing for their Christmas World make use of.
You enter the Christmas World and move from house to house. The houses are designed as 3D elements that animate back and forth into the scene. When you click into the scene, you can see further details that fold out from the right edge of the screen. On the same principle as the interactive fantasy map from the section above.
--
Links marked with * are affiliate links to Webflow.
