Writing a Web Monetized Game
Web games are among the best ways to waste time on the internet. They let you transmit a cool experience to someone without any download required.
Some games are action-packed, some are meditative, and they're almost all addictive. Pictured above is my game, Goblin Farmer, which is none of these. But it's OK, because anybody reading this will have the tools to make something better.
Note: all the techniques outlined here act on the client side. That means a clever user could mess with their browser to pretend they're monetized. It's usually fine for games, just keep in mind that it's possible.
Over the years, web games have given way somewhat to mobile games. Mobile phones are ubiquitous these days, and games are a great way to kill a few minutes when you're on the go. But there's more to it then just that.
Mobile apps also have a built-in way to monetize. You can unlock premium in-game items in just a couple of taps, which has led the mobile gaming space to be massively successful financially.
The web hasn't really had a way to monetize aside from advertising, but Web Monetization changes that equation. By accepting micropayments from Web Monetized users, the web gaming market could catch up to mobile gaming.
How Can I Get Started?
OK, I've talked a lot of talk so now I'll show you how you can make a Web Monetized game.
The first step is to embed your payment pointer in the top of your file. This is all you need to start making money off of your game.
Just including a meta tag doesn't give anything special to the players who are supporting you, which isn't very nice. So let's throw in some extra features for them.
Adding Bonus Features
In my game, Goblin Farmer, you get your in-game money from Web Monetization micropayments.
You spend your in-game money to purchase units. These units make you more in-game money which lets you get more units. So it's not entirely dependent on your Web Monetization micropayments but they can give you a starting boost.
If you want to add a mechanic like this to your game, you can bind the
monetizationprogress event. Here's how I do it in Goblin Farmer:
Every time a Web Monetization micropayment occurs, the page gets a
monetizationprogress event. You can get the amount of the micropayment out of the event (it's denominated in receiver's units, typically nano-USD). In my game I just add that straight onto the user's “cash” resources that they use to buy units.
Checking if Web Monetization is Active
But what if you don't care how much the player is paying? Maybe you just want a rule to activate when the player is monetized, like an on/off switch. Maybe the player unlocks a new power when web monetization is active.
To determine whether Web Monetization is on or off you can look at is
document.monetization.state. This event fires on the very first Web Monetization micropayment. So if you want to apply some rules depending on whether or not the user is web monetized you could do this:
Locking the Whole Game
You can use the following technique to restrict your whole game to Web Monetized users, but be aware it will turn away a lot of your players and some might not be happy.
In my game I use React Web Monetization to show/hide the entire game screen based on whether the user is Web Monetized, because only Web Monetized users can play. You can use this pattern if you want your game to only be usable by Web Monetized users. The code looks like this:
If you're interesting in making a Web Monetized game then I recommend you check out the https://js13kgames.com/ competition! Participants will get a free Coil subscription (see the details on the linked site).
Message me on twitter @sharafian_ if you have any feedback, questions, or if you have a Web Monetized game you want to show off!
My Source Code
If you want to read the source code to Goblin Farmer you can read the source code here. (source code as of Aug. 19). I basically hacked it all together so the code is an absolute mess, but hopefully you can use it to get a slightly more complete picture of how the game works.