HTML5 Resources

This page contains other resources relevant for many HTML5 games.

Sitelock

Protecting HTML5 games

To prevent your game from being stolen by other websites, you should consider checking if the game is running on CrazyGames or not.

An HTML5 game will be loaded from a URL that looks like this https://cubes-2048-io.game-files.crazygames.com/cubes-2048-io/13/index.html. Your sitelock should check if the origin of the URL the game is currently running on ends with crazygames.com. Sample code:

// javascript
window.location.origin.endsWith("crazygames.com");

If not, you can, among other things, show a message "Available only on CrazyGames" or just a blank screen.

To improve the security of your sitelock, you can consider using an obfuscator (e.g.: https://obfuscator.io/) to obfuscate (part of) your game.

Protecting Iframe games

One way to prevent iframe embedding is by using the CSP header Content-Security-Policy: frame-ancestors [...]. If you submit your game as an iframe game, you may have already done this to protect it from other websites embedding it. You should be aware however that CrazyGames has a lot of regional domains, for example, www.crazygames.no, www.1001juegos.com, www.crazygames.fr.

This is the full list of domains that you will have to whitelist:

www.crazygames.com
de.crazygames.com
it.crazygames.com
vn.crazygames.com
tr.crazygames.com
gr.crazygames.com
ar.crazygames.com
th.crazygames.com

www.1001juegos.com

www.crazygames.fr
www.crazygames.co.id
www.crazygames.cz
www.crazygames.dk
www.crazygames.hu
www.crazygames.nl
www.crazygames.no
www.crazygames.pl
www.crazygames.com.br
www.crazygames.ro
www.crazygames.fi
www.crazygames.se
www.crazygames.ru
www.crazygames.com.ua
www.crazygames.at
www.crazygames.jp
www.crazygames.pt
www.crazygames.vn
www.crazygames.com.vn
www.crazygames.co.kr 

// video ads run on
games.crazygames.com

// other domains
*.crazygames.com
crazygames.*   // * can be a TLD consisting of 1 part like .fr, or 2 part like .com.br

Disable unwanted page scroll

By default, browsers scroll the page when a user presses the spacebar or the arrow keys. Your game should prevent this behavior. You might not notice it in development because your game is taking on the full height of the window. But when your game is embedded on CrazyGames, you’ll need to prevent scroll. You can do so by adding the following code to your game:

window.addEventListener("wheel", (event) => event.preventDefault(), {
    passive: false,
});

window.addEventListener("keydown", (event) => {
    if (["ArrowUp", "ArrowDown", " "].includes(event.key)) {
        event.preventDefault();
    }
});