@game8.io/plugin NPM

Game8.io HTML5 Plugin

This is the documentation of the "Game8.io HTML5 Plugin" project.

Game8.io is the biggest collections of high quality, cross-platform games. We provide great games for your website within minutes!

Running into any issues? Check out the F.A.Q. within the Wiki of the github repository before mailing to support@game8.io

Implementation

Implement the following snippet within your game or within the <head> section of your index.html.

<!-- Pogame Plugin -->
<link rel="stylesheet" href="https://unpkg.com/@game8.io/plugin/dist/g8plugin.css">
<script type="text/javascript" src="https://unpkg.com/@game8.io/plugin/dist/g8plugin.js"></script>

Usage

Create container where the game screen will be rendered.

<!-- Container -->
<div id="game-screen" style="background: rgba(0, 0, 0, 0.5);height:600px;"></div>

Render game screen with window.g8plugin.init method.

<script>
    window.g8plugin.init({
        container: 'game-screen',
        gameId: 'df0a60ffc1e344adb308b5e9a8a0bd04',
        preload: true,
    });
</script>

This plugin provides a range of flexible options to help you fine-tune your experience during usage.
When you start the game, if your device is not oriented correctly, a warning will appear on your screen. This is a gentle reminder to keep your device in a fixed position for the best gaming experience possible

Options:

window.g8plugin.init({
    // The container where the game screen will be rendered
    container: "game-screen",

    // you need to provide either gameId or gameUrl
    // if no `gameData` is used, the game won't be able to fetch from the server, so you don't need to provide gameId, you can provide gameUrl directly
    gameId: "df0a60ffc1e344adb308b5e9a8a0bd04",
    // gameUrl: "https://h5.ga8.io/df0a60ffc1e344adb308b5e9a8a0bd04/",

    environment: "production", // can be 'development' or 'production'
    preload: true, // will be 'preload' or 'direct'

    //can be 'portrait' or 'landscape' or a function that returns either 'portrait' or 'landscape'
    orientation: (gameData) => { return gameData.orientation },
    gameControls: {
        // can be a string that represents the game title or a function that returns the game title
        gameTitle: (gameData) => { return gameData.title },
        // can be a string that represents the game thumb or a function that returns the game thumb
        gameThumb: (gameData) => { return gameData.thumb },
        // You can provide a custom full screen button icon or hide the full screen button by setting fullScreenButton=false
        fullScreenButton: {
            icon: "https://static.ga8.io/plugins/g8plugin/images/full-screen.svg"
        },
        // Determines the visibility of the game controls.
        // You can set the visibility for mobile, mobile_fullscreen, pc, pc_fullscreen or visibility=false to hide the game controls
        visibility: {
            mobile: true,
            mobile_fullscreen: false,
            pc: true,
            pc_fullscreen: true,
        }
    },
    //Button will float on mobile devices on fullscreen mode and will be hidden on PC as default
    floatingButton: {
        // Determines the visibility of the floating button.
        // You can set the visibility for mobile, mobile_fullscreen, pc, pc_fullscreen or visibility=false to hide the floating button
        visibility: {
            mobile: false,
            mobile_fullscreen: true,
            pc: false,
            pc_fullscreen: false,
        },
        // Default position of the floating button, default is bottom right corner
        defaultPosition: {
            right: "0px",
            bottom: "0px"
        }
    },
})