Skip to content

HTML5

Installation

You can install the SDK by including the following script in the head of your game's index.html:

<script src="https://sdk.crazygames.com/crazygames-sdk-v2.js"></script>

The SDK doesn't need to be initialized before being used. The initialization is done internally.

Development

Your game runs on different domains during development/release, which the SDK considers to be different environments.

  • The localhost and 127.0.0.1 domains are considered local environments. Advertisements are not available. Instead, an overlay text will be displayed. For other events such as happy time, gameplay start, etc. the console output can be consulted. If you are using a different domain/ip for local development, you can always enforce the local environment by appending the ?useLocalSdk=true query parameter to the URL in your browser.
  • On CrazyGames domains the SDK has the crazygames environment, where it functions properly.
  • On any other domains (including your domain on which you may host your game) the SDK has the disabled environment. All the calls to the SDK methods will throw an error (or call the error callback). To prevent this, we recommend checking on which environment the SDK is running, and avoid making use of it outside local or crazygames environments.

You can check the environment like this:

const callback = (_error, environment) => {
    console.log(environment); // 'local', 'crazygames' or 'disabled'
};
window.CrazyGames.SDK.getEnvironment(callback);

const environment = await window.CrazyGames.SDK.getEnvironment();
console.log(environment); // 'local', 'crazygames' or 'disabled'

To simulate the setup used on CrazyGames, download this template. The file sdk.html uses our game loader to display your game. It assumes that index.html contains the html of your game. This lets your game run using the same setup as it would on crazygames.com. You'll just have to browse to localhost:port/sdk.html to see our game loader in action.

Info

When you upload your game we only look at your index.html file, and provide the game loader for you. The sdk.html page will not be used: keep any logic out of that file, and make sure that your index.html does not include the game loader.

Modules

The SDK has the following modules:

  • ad - display video ads, detect adblockers
  • banner - display banners
  • game - various game events

Each one of these modules can be accessed as follows:

window.CrazyGames.SDK.{moduleName}, for example window.CrazyGames.SDK.ad. The functionality of each module will be explained below.

Ad module

Guidelines for Advertisements

Please be sure to read our advertisement guidelines, since your game will be rejected without any feedback if it doesn't follow them.

The ad module contains functionality for displaying video ads and for detecting adblockers. It can be accessed like this:

window.CrazyGames.SDK.ad;

Video ads

We support two different types of video ads: midgame and rewarded.

Midgame advertisements can happen when a user died, a level has been completed, etc.

Rewarded advertisements can be requested by the user in exchange for a reward (An additional life, a retry when the user died, a bonus starting item, extra starting health, etc.). Rewarded ads should be shown when users explicitly consent to watch an advertisement.

Midgame ad example:

const callbacks = {
    adFinished: () => console.log("End midgame ad (callback)"),
    adError: (error) => console.log("Error midgame ad (callback)", error),
    adStarted: () => console.log("Start midgame ad (callback)"),
};
window.CrazyGames.SDK.ad.requestAd("midgame", callbacks);

// Promises are not available for video ad request, please use callbacks.

Rewarded ad example:

const callbacks = {
    adFinished: () => console.log("End rewarded ad (callback)"),
    adError: (error) => console.log("Error rewarded ad (callback)", error),
    adStarted: () => console.log("Start rewarded ad (callback)"),
};
window.CrazyGames.SDK.ad.requestAd("rewarded", callbacks);

// Promises are not available for video ad request, please use callbacks.

The adError callback is also triggered if the ad is not filled.

Info

Don't forget to mute the audio and pause the game when the ad starts (adStarted callback), and to unmute the audio and continue the game when the ad finishes/fails to load (adError and adFinished callbacks)

Adblock detection

You can use the code below to detect if the user has an adblocker.

const callback = (error, result) => {
    if (error) {
        console.log("Adblock usage error (callback)", error);
    } else {
        console.log("Adblock usage fetched (callback)", result);
    }
};
window.CrazyGames.SDK.ad.hasAdblock(callback);

try {
    const result = await window.CrazyGames.SDK.ad.hasAdblock();
    console.log("Adblock usage fetched", result);
} catch (e) {
    console.log("Adblock usage error", e);
}

Info

We require games to function even when the user has an adblock. The detection is not foolproof, and it would be very frustrating for a user not running any adblock to get a non-functional game. You can block extra content, such as custom skins, or some levels, to motivate the user to turn off their adblock. Also, keep in mind that turning off the adblock usually requires a page refresh. Make sure that the progress is saved, or the user may just decide to stop playing your game.

The banner module contains functionality for displaying banners in game. It can be accessed like this:

window.CrazyGames.SDK.banner;

Request banner

To begin, you need to have an HTML container of the banner size present on the screen.

<div id="banner-container" style="width: 300px; height: 250px"></div>

Available sizes are:

  • 728x90
  • 300x250
  • 320x50
  • 468x60
  • 320x100
window.CrazyGames.SDK.banner.requestBanner({
    id: "banner-container",
    width: 300,
    height: 250,
});

const callback = (error, result) => {
    if (error) {
        console.log("Error on request banner (callback)", error);
    } else {
        console.log("End request banner (callback)", result); // result is always undefined when requesting banners
    }
};
window.CrazyGames.SDK.banner.requestBanner(
    {
        id: "banner-container",
        width: 300,
        height: 250,
    },
    callback
);

try {
    const result = await window.CrazyGames.SDK.banner.requestBanner(
        {
            id: "banner-container",
            width: 300,
            height: 250,
        }
    );
    console.log("End request banner", result); // result is always undefined when requesting banners
} catch (e) {
    console.log("Error on request banner", e);
}

Info

You can have no more than 2 banners of the same size in your game.

Request responsive banner

The responsive banners feature will requests ads that fit into your container, without the need to specify or select a size beforehand. The resulting banners will have one of the following sizes: 970x90, 320x50, 160x600, 336x280, 728x90, 300x600, 468x60, 970x250, 300x250, 250x250 and 120x600. Only banners that fit into your container will be displayed, if your container cannot fit any of these sizes no ad will be rendered. The rendered banner is automatically vertically and horizontally centered into your container.

Info

Your container size must be set to a non-null value: 

<div id="responsive-banner-container" style="width: 500px; height: 500px"></div>


window.CrazyGames.SDK.banner.requestResponsiveBanner(
    "responsive-banner-container"
);

const callback = (error, result) => {
    if (error) {
        console.log("Error on request responsive banner (callback)", error);
    } else {
        console.log("End request responsive banner (callback)", result); // result is always undefined when requesting banners
    }
};
window.CrazyGames.SDK.banner.requestResponsiveBanner("responsive-banner-container", callback);

try {
    const result = await window.CrazyGames.SDK.banner.requestResponsiveBanner("responsive-banner-container");
    console.log("End request responsive banner", result); // result is always undefined when requesting banners
} catch (e) {
    console.log("Error on request responsive banner", e);
}

Refreshing banners and limitations

To refresh the banners, simply call again the requestBanner or requestResponsiveBanner methods.

The banners have the following limitations:

  • There is a minimum delay of 60 seconds between banner refreshes. If you call the request banner methods more often, you will receive the following error: A banner has already been requested for container banner-container less than 57 seconds ago, please wait.
  • During a gaming session the banners can be refreshed up to 60 times (this applies to each banner size separately).

Clearing the banners

The SDK provides 2 methods for clearing the banners:

window.CrazyGames.SDK.banner.clearBanner("banner-container");
// or
window.CrazyGames.SDK.banner.clearAllBanners();

We recommend that you clear the banners after hiding them. Otherwise, when you request new banners again, the old banners may still appear for a fraction of a second, which negatively impacts the user experience.

Game module

The game module contains various functionality related to the game. It can be accessed like this:

window.CrazyGames.SDK.game;

Happy time

The happytime() method can be called on various player achievements (beating a boss, reaching a highscore, etc.). It makes the website celebrate (for example by launching some confetti). There is no need to call this when a level is completed, or an item is obtained.

Info

Use this feature sparingly, the celebration should remain a special moment.

window.CrazyGames.SDK.game.happytime();

const callback = (error, result) => {
    if (error) {
        console.log("Happytime error (callback)", error);
    } else {
        console.log("Happytime triggered (callback)", result); // result is always undefined for happytime
    }
};
window.CrazyGames.SDK.game.happytime(callback);

try {
    const result = await window.CrazyGames.SDK.game.happytime(); // result is always undefined for happytime
    console.log("Happytime triggered", result);
} catch (e) {
    console.log("Happytime error", e);
}

Gameplay start/stop

We provide functions that enable us to track when and how users are playing your games. These can be used to ensure our site does not perform resource intensive actions while a user is playing.

The gameplayStart() function has to be called whenever the player starts playing or resumes playing after a break (menu/loading/achievement screen, game paused, etc.).

The gameplayStop() function has to be called on every game break (entering a menu, switching level, pausing the game, ...) don't forget to call gameplayStart() when the gameplay resumes.

// player pauses the game
window.CrazyGames.SDK.game.gameplayStop();
// player resumes the game
window.CrazyGames.SDK.game.gameplayStart();

const callback = (error, result) => {
    if (error) {
        console.log("Gameplay start error (callback)", error);
    } else {
        console.log("Gameplay start triggered (callback)", result); // result is always undefined for gameplayStart/Stop
    }
};
window.CrazyGames.SDK.game.gameplayStart(callback); // gameplayStop accepts a similar callback

try {
    const result = await window.CrazyGames.SDK.game.gameplayStart(); // result is always undefined for gameplayStart/Stop
    console.log("Gameplay start triggered", result);
} catch (e) {
    console.log("Gameplay start error", e);
}

Game loading start/stop

We provide functions that enable us to track when and how long the loading of your game takes.

The sdkGameLoadingStart() function has to be called whenever you start loading your game.

The sdkGameLoadingStop() function has to be called when the loading is complete and eventually the gameplay starts.

// Your game starts loading
window.CrazyGames.SDK.game.sdkGameLoadingStart();
// Loading...
window.CrazyGames.SDK.game.sdkGameLoadingStop();
// Next level's assets are loading now
window.CrazyGames.SDK.game.sdkGameLoadingStart();
// Assets are loaded
window.CrazyGames.SDK.game.sdkGameLoadingStop();

const callback = (error, result) => {
    if (error) {
        console.log("Game loading start error (callback)", error);
    } else {
        console.log("Game loading start triggered (callback)", result); // result is always undefined for sdkGameLoadingStart/Stop
    }
};
window.CrazyGames.SDK.game.sdkGameLoadingStart(callback); // sdkGameLoadingStop accepts a similar callback

try {
    const result = await window.CrazyGames.SDK.game.sdkGameLoadingStart(); // result is always undefined for sdkGameLoadingStart/Stop
    console.log("Game loading start triggered", result);
} catch (e) {
    console.log("Game loading start error", e);
}

This feature lets you share the Crazygames version of your game to the players and invite them to join a multiplayer game. You can call inviteLink with a map of parameters that correspond to your game or game room.

const callback = (error, link) => {
    if (error) {
        console.log("Invite link error (callback)", error);
    } else {
        console.log("Invite link (callback)", link);
    }
};
window.CrazyGames.SDK.game.inviteLink(
    { roomId: 12345, param2: "value", param3: "value" },
    callback
);

const link = await window.CrazyGames.SDK.game.inviteLink(
    { roomId: 12345, param2: "value", param3: "value" }
);
console.log("Invite link", link);

Other

Disable unwanted page scroll

By default, browsers scroll the page when a user presses 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();
  }
});

Sitelock

We currently do not have a sitelock for plain Javascript games but do recommend building in some protections to avoid your game files getting stolen. One option is to use an obfuscator (e.g.: https://obfuscator.io/) to obfuscate (part of) your game. The domains you should whitelist are the following:

  • *.crazygames.*
  • *.1001juegos.com.

Migration from V1 SDK

Init

You don't need to call init() anymore. The new SDK does the initialization on its own.

Global event listeners

The global events ('adStarted', 'adFinished', etc.) are gone. Now the methods accept a callback object with various callbacks. Although callbacks can be passed to almost every SDK method in the SDK V2, they are most useful for ads, where you need to know when an ad starts or completes.

const crazysdk = window.CrazyGames.CrazySDK.getInstance();
// init and wait until it gets initialized...
crazysdk.removeEventListener("adFinished", () => console.log("End rewarded ad (callback)"));
crazysdk.removeEventListener("adError", (error) => console.log("Error rewarded ad (callback)", error));
crazysdk.removeEventListener("adStarted", () => console.log("Start rewarded ad (callback)"));
crazysdk.requestAd("rewarded");

const callbacks = {
    adFinished: () => console.log("End rewarded ad (callback)"),
    adError: (error) => console.log("Error rewarded ad (callback)", error),
    adStarted: () => console.log("Start rewarded ad (callback)"),
};
window.CrazyGames.SDK.ad.requestAd("rewarded", callbacks);

Single banner request

The new requestBanner method can request a single banner at a time. The limit of maximum 2 banners of the same size is still present.

crazysdk.requestBanner([
    {
        containerId: "banner-container",
        size: "300x250",
    },
]);

window.CrazyGames.SDK.banner.requestBanner({
    id: "banner-container",
    width: 300,
    height: 250,
});