No Mercy Michel

When the visitor types a nickname on the home page and presses Fight, No Mercy Michel first searches online for a real person playing at the same time. If the visitor has waited about 15 seconds without a human turning up, the system sends in a Merci-Michel employee as the opponent instead.

Merci-Michel has turned its entire staff into opponents in the game, so instead of introducing itself with case studies and team photos, the studio does it through a series of matches. The game has 28 opponents in all, each with their own name, a nickname, a difficulty level, an arm skin tone and a set of accessories and tattoos, with difficulty split into easy, medium, hard and expert. Most of the tattoos are small personal motifs, such as the wearer's own name, a Game Boy, dice or a moustache. Every new match brings in an employee the visitor has not yet faced until everyone has been beaten once, which makes the game an unusual kind of team page as well.

Clicking is the only rule of the match, and each click of the mouse or press of the space bar adds points to the visitor's arm. The gap between the two scores decides which way the arms lean. A round ends when the gap reaches a fixed value, and a match is best of three. To stop a round dragging on, each click becomes worth more over time, rising from 1 point to 3 after 2 seconds and to 4 after 6 seconds.

The employees who serve as opponents have a clicking rhythm of their own. The code gives each employee a base interval between clicks according to difficulty, and each click then varies randomly by about a tenth, so the opponent never clicks at an even pace. After 6 seconds the opponent starts to tire, and the interval between clicks slowly grows. A medium-level employee opens at 6.6 clicks a second but drops to just over 3 a second after 20 seconds, so a visitor who survives the opening has a chance to fight back.

The text after each match keeps up the mocking tone of that opening line. A visitor who loses sees YOU SUCK and we are not surprised at all, while a winner gets VICTORY and the current winning streak.

The home page also has two things that give visitors a reason to come back beyond the match itself. A leaderboard of winning streaks hangs in the bottom right corner, listing only the top ten, and first place has won 149 games in a row. A FREE STICKERS banner scrolls across the top of the page the whole time, and clicking it opens a sign-up form that enters subscribers into a draw for Merci-Michel stickers.

The whole game takes place in a 3D boxing ring. The canvas, the ropes and a corner stool with a towel slung over it are all there, and the background is a haze of out-of-focus blue lights, like an arena full of spectators. The two arms are cartoon shapes like soft vinyl toys, with rounded surfaces and gentle highlights, and the tattoos sit on the skin like stickers. The camera always watches the two arms from a low angle at the side.

The interface type borrows the language of sport. Large words such as the nickname, the round number, READY and FIGHT are set in the ultra-bold condensed styles of United Sans, like shirt numbers and fight posters. Flourishes such as the opponent's nickname and Winstreak use a script called Cetary. The two players' names sit in the top left and top right of the screen, each with a live clicks-per-second count beneath it, like the score graphic on a TV broadcast. The Fight button on the home page is a thick orange disc made of the same kind of soft material as the arms.

The colour of the scene follows the state of the match, and most of the time the whole scene is deep blue. When the visitor wins the match, the scene turns golden yellow, and when they lose it turns a dark pink. The dark vignette around the edges of the picture changes to deep blue, dark yellow or dark red to match. At the moment a round is decided, the floor of the ring glows with a ring of red light.

Merci-Michel has turned the crowd's voice into words floating around the ring. During a match, lines of slanted white text keep rising on screen. Some of them are cheers such as SMASH HIM, GO GO GO, FINISH HIM and MONSTER, and others are jeers such as YOU SUCK, LAME, BORING and HAHAHA. These words are particles in the 3D scene rather than web text, rising from behind the players and slowly fading, which puts the visitor under the pressure of being watched from the stands.

From the moment the visitor enters to the final result, the game plays out as a sequence of staged scenes. When the visitor presses Fight, the screen shrinks into a round porthole showing the visitor's own arm, with waiting text such as Looking for a challenger beneath it. Once an opponent is found, the two arms come out of the porthole and lock hands, and READY and FIGHT burst onto the screen with a white shockwave before the match begins. After each round the screen shows ROUND 2 and then runs through READY and FIGHT again.

The animation during a match all works to amplify the feedback from each click. The angle of the two arms maps directly to the score gap, so the faster the visitor clicks, the further their arm forces the other one down, and the camera tilts along with it. When a round is decided, the camera rushes up to the winning arm. After a whole match is won, a single arm rises alone in the golden scene with the word VICTORY slanted across the front of it. The picture holds 60 frames per second throughout a match, about 16.7 milliseconds a frame, and the slowest frame is 36 milliseconds.

No Mercy Michel's interface is written in Vue and bundled with Vite, and its 3D part runs on three.js wrapped in a WebGL framework of Merci-Michel's own. The game was probably finished several years ago. It uses three.js r146, a release from 2022, and the project's name on its back-end data service is mm-10years, so it appears to have been made for the studio's tenth anniversary and has only now won FWA of the Day.

Real-time matches rely on Google's Firebase, a cloud service that lets websites store and fetch live data. Each visitor gets an anonymous identity on arrival and, after pressing Fight, joins a waiting area in the Firebase real-time database. Once two humans are matched, their click data travels directly between them over a peer-to-peer connection, while the leaderboard and winning streaks are stored in Firebase.

The 3D scene puts very little load on the graphics card. On the results screen each frame needs only 23 draw calls, the instructions the code sends to the graphics card, and the scene holds about 56,000 triangles. The code first sets a starting quality level according to the graphics card model and raises it once the picture runs smoothly. On a card in the class of an RTX 3060, the game reaches the highest level about 7 seconds after the start.

The game asks visitors for a heavy download before they can play. Opening the home page for the first time downloads about 11.4 MB, while all the visitor can see so far is a text field and a button. The largest single file is a 1.6 MB bundle of sound effects, followed by three PNG textures for the arms that come to about 3.2 MB together, the biggest being a 1.5 MB normal map. A normal map records small bumps on a surface, so the arm gains fine surface detail without extra polygons in the model. After two matches the total reaches 13.6 MB, and most of the extra comes from background music split into three layers of about 380 KB each.

The first screen itself arrives quickly, with the server returning its first byte in 150 to 215 milliseconds and the browser painting the first content (FCP) in 276 to 344 milliseconds. Those figures sit well inside Google's recommended 0.8 and 1.8 seconds, and nothing jumps out of place during loading. The trouble comes in the preparation that follows. While loading, the page runs a single long task of 1.2 seconds, a stretch of script that keeps the browser too busy to respond to any input, so nothing happens wherever the visitor clicks.

The game works for keyboard users, but it shuts out screen reader users and people bothered by motion. The space bar does the same job as the left mouse button, so a whole match can be played with the keyboard alone. The whole scene is drawn on a canvas with no text description at all, however, so screen reader users cannot hear the score or find out who their opponent is. Operating systems offer a reduced motion setting for people who feel unwell when things move on screen, but the stylesheet has no rules for it. The swaying camera, the floating crowd text and the close-ups that rush in on an arm all play regardless of the setting.

Merci-Michel's game scored 85 points at the FWA, which files it under three categories, Fun & Playable, Game and Personal/Portfolio. The FWA does not publish category scores, so there is no way to tell which aspect the jury rated most highly.

The only credit goes to the studio Merci-Michel, and the 28 opponents in the game are members of that same studio, so the people who made the game are also the people the visitor beats. Merci-Michel is a digital gamification studio in Paris, meaning a studio that turns brand content into games. This game is its 80th FWA award, and its FWA of the Day wins now number 64.