Seulement vers le haut

814 argghh

Ouvrir dans l'éditeur Publiez votre code

Recommandé

20 April 2024

Icônes sociales utilisant HTML et CSS

14 October 2025

Exemple de conteneur d'animation HTML

23 August 2025

Web Leb : Solutions numériques, technologies Web

HTML

<!DOCTYPE html>
<html lang="en-us">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <style>html, body {
                width: 100%;
                height: 100%;
                padding: 0px;
                margin: 0px;
            }
            .fullscreen {
                background: #383838;
                width: 100%;
                height: 100%;
                position: absolute;
                top: 0px;
                left: 0px;
            }
            #banner-container {
                position: absolute;
                bottom: 0px;
                width: 100%;
                height: 90px;
                display: none;
            }
            #loading-overlay {
                font-size: 20px;
                z-index: 1;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
            }
            #icon {
                max-width: 120px;
                border-radius: 10px;
                margin-bottom: 20px;
            }
            #progress-bar {
                border-radius: 5px;
                width: 90%;
                max-width: 250px;
                height: 20px;
                background: #242424;
                padding: 5px;
            }
            #progress-bar-fill {
                border-radius: 3px;
                width: 0%;
                height: 100%;
                background: #FF9A00;
            }
        </style>
    </head>
    <body>
        <canvas id="canvas" class="fullscreen"></canvas>
        <div id="banner-container"></div>
        <div id="loading-overlay" class="fullscreen">
            <img id="icon" src="https://cdn.jsdelivr.net/gh/sz-games/Games8@d12ca56d8b0a51ee19122003c75987a349816837/only-up/icon.png" />
            <div id="progress-bar"><div id="progress-bar-fill"></div></div>
        </div>
        <script src="https://cdn.jsdelivr.net/gh/sz-games/Games8@d12ca56d8b0a51ee19122003c75987a349816837/only-up/instant-games-bridge.js"></script>
        <script>
            if (/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)) {
                let meta = document.createElement('meta')
                meta.name = 'viewport'
                meta.content = 'width=device-width, height=device-height, initial-scale=1.0, user-scalable=no, shrink-to-fit=yes'
                document.getElementsByTagName('head')[0].appendChild(meta)
            }

let canvas = document.getElementById('canvas')
            let loadingOverlay = document.getElementById('loading-overlay')
            let progressBarFill = document.getElementById('progress-bar-fill')
            let bannerContainer = document.getElementById('banner-container')

function sendMessageToUnity(name, value) {
                if (window.unityInstance !== null) {
                    window.unityInstance.SendMessage('Bridge', name, value)
                }
            }

function onUnityLoadingProgressChanged(progress) {
                if (progress === 0.9) {
                    completeProgressBarFilling()
                    return
                }

progressBarFill.style.width = `${ progress * 100 }%`
                if (progress === 1 && progressBarFillingInterval !== null) {
                    clearInterval(progressBarFillingInterval)
                    progressBarFillingInterval = null
                }
            }
            
            function completeProgressBarFilling() {
                if (progressBarFillingInterval !== null) {
                    return
                }

let currentPercent = 90
                progressBarFill.style.width = `${ currentPercent }%`
                progressBarFillingInterval = setInterval(() => {
                    currentPercent++
                    if (currentPercent > 100) {
                        currentPercent = 100
                    }

progressBarFill.style.width = `${ currentPercent }%`

if (currentPercent >= 100) {
                        clearInterval(progressBarFillingInterval)
                        progressBarFillingInterval = null
                        return
                    }
                }, 100)
            }

window.addEventListener('pointerdown', () => {
                window.focus()
                canvas.focus()
            })

let bridgeOptions = {
                platforms: {
                    'game_distribution': {
                        gameId: 'c7a11f86eeda4a2b88e8d5ad2ba2f41d'
                    }
                }
            }

// initialization
            bridge
                .initialize(bridgeOptions)
                .then(() => {
                    bridge.advertisement.on('banner_state_changed', state => sendMessageToUnity('OnBannerStateChanged', state))
                    bridge.advertisement.on('interstitial_state_changed', state => sendMessageToUnity('OnInterstitialStateChanged', state))
                    bridge.advertisement.on('rewarded_state_changed', state => sendMessageToUnity('OnRewardedStateChanged', state))
                    bridge.game.on('visibility_state_changed', state => sendMessageToUnity('OnVisibilityStateChanged', state))

let unityLoader = document.createElement('script')
                    unityLoader.src = 'https://cdn.jsdelivr.net/gh/sz-games/Games8@d12ca56d8b0a51ee19122003c75987a349816837/only-up/Build/Only Up 230815_3.loader.js'
                    unityLoader.onload = () => {
                        createUnityInstance(
                            canvas,
                            {
                                dataUrl: 'https://cdn.jsdelivr.net/gh/sz-games/Games8@d12ca56d8b0a51ee19122003c75987a349816837/only-up/Build/4b94f11ea671fe7b3eae7940f4e15a40.data.unityweb',
                                frameworkUrl: 'https://cdn.jsdelivr.net/gh/sz-games/Games8@d12ca56d8b0a51ee19122003c75987a349816837/only-up/Build/4c369b9d2386e4063078bac59b580f5d.js.unityweb',
                                codeUrl: 'https://cdn.jsdelivr.net/gh/sz-games/Games8@d12ca56d8b0a51ee19122003c75987a349816837/only-up/Build/6866d97471f0353df472ed6d8104b1cc.wasm.unityweb',
                                streamingAssetsUrl: 'StreamingAssets',
                                companyName: 'Craft Game World',
                                productName: 'Only Up! Parkour Running Game',
                                productVersion: '1.7',
                                // matchWebGLToCanvasSize: false, // Uncomment this to separately control WebGL canvas render size and DOM element size.
                                // devicePixelRatio: 1, // Uncomment this to override low DPI rendering on high DPI displays.
                            },
                            onUnityLoadingProgressChanged)
                            .then((unityInstance) => {
                                window.unityInstance = unityInstance
                                loadingOverlay.remove()
                                canvas.focus()
                            })
                            .catch((error) => {
                                console.error(error)
                            })
                    }
                    document.body.appendChild(unityLoader)
                })
                .catch(error => console.error(error))

// platform
            window.getPlatformId = function() {
                return bridge.platform.id
            }

window.getPlatformLanguage = function() {
                return bridge.platform.language
            }

window.getPlatformPayload = function() {
                let payload = bridge.platform.payload
                if (typeof payload === 'string') {
                    return payload
                } else {
                    return ''
                }
            }

window.getPlatformTld = function() {
                let tld = bridge.platform.tld
                if (typeof tld === 'string') {
                    return tld
                } else {
                    return ''
                }
            }

window.sendMessageToPlatform = function(message) {
                bridge.platform.sendMessage(message)
            }

// device
            window.getDeviceType = function() {
                return bridge.device.type
            }

// player
            window.getIsPlayerAuthorizationSupported = function() {
                return bridge.player.isAuthorizationSupported.toString()
            }

window.getIsPlayerAuthorized = function() {
                return bridge.player.isAuthorized.toString()
            }

window.getPlayerId = function() {
                if (bridge.player.id) {
                    return bridge.player.id.toString()
                }

return ''
            }

window.getPlayerName = function() {
                if (bridge.player.name) {
                    return bridge.player.name.toString()
                }

return ''
            }

window.getPlayerPhotos = function() {
                if (bridge.player.photos.length > 0) {
                    return JSON.stringify(bridge.player.photos)
                }

return ''
            }

window.authorizePlayer = function(options) {
                if (options) {
                    options = JSON.parse(options)
                }

bridge.player.authorize(options)
                    .then(() => {
                        sendMessageToUnity('OnAuthorizeCompleted', 'true')
                    })
                    .catch(error => {
                        sendMessageToUnity('OnAuthorizeCompleted', 'false')
                    })
            }

// game
            window.getVisibilityState = function() {
                return bridge.game.visibilityState
            }

// storage
            window.getStorageDefaultType = function() {
                return bridge.storage.defaultType
            }

window.getIsStorageSupported = function(storageType) {
                return bridge.storage.isSupported(storageType).toString()
            }

window.getIsStorageAvailable = function(storageType) {
                return bridge.storage.isAvailable(storageType).toString()
            }

window.getStorageData = function(key, storageType) {
                let keys = key.split(STORAGE_KEYS_SEPARATOR)

bridge.storage.get(keys, storageType)
                    .then(data => {
                        if (keys.length > 1) {
                            let values = []

for (let i = 0; i < keys.length; i++) {
                                let value = data[i]
                                if (value) {
                                    if (typeof value !== 'string') {
                                        value = JSON.stringify(value)
                                    }

values.push(value)
                                } else {
                                    values.push('')
                                }
                            }

sendMessageToUnity('OnGetStorageDataSuccess', `${key}${STORAGE_DATA_SEPARATOR}${values.join(STORAGE_VALUES_SEPARATOR)}`)
                        } else {
                            if (data[0]) {
                                if (typeof data[0] !== 'string') {
                                    data = JSON.stringify(data[0])
                                }
                            } else {
                                data = ''
                            }

sendMessageToUnity('OnGetStorageDataSuccess', `${key}${STORAGE_DATA_SEPARATOR}${data}`)
                        }
                    })
                    .catch(error => {
                        sendMessageToUnity('OnGetStorageDataFailed', key)
                    })
            }

window.setStorageData = function(key, value, storageType) {
                let keys = key.split(STORAGE_KEYS_SEPARATOR)
                let values = value.split(STORAGE_VALUES_SEPARATOR)

bridge.storage.set(keys, values, storageType)
                    .then(() => {
                        sendMessageToUnity('OnSetStorageDataSuccess', key)
                    })
                    .catch(error => {
                        sendMessageToUnity('OnSetStorageDataFailed', key)
                    })
            }

window.deleteStorageData = function(key, storageType) {
                let keys = key.split(STORAGE_KEYS_SEPARATOR)

bridge.storage.delete(keys, storageType)
                    .then(() => {
                        sendMessageToUnity('OnDeleteStorageDataSuccess', key)
                    })
                    .catch(error => {
                        sendMessageToUnity('OnDeleteStorageDataFailed', key)
                    })
            }

// advertisement
            window.getIsBannerSupported = function() {
                return bridge.advertisement.isBannerSupported.toString()
            }
            
            window.getMinimumDelayBetweenInterstitial = function() {
                return bridge.advertisement.minimumDelayBetweenInterstitial.toString()
            }

window.setMinimumDelayBetweenInterstitial = function(options) {
                bridge.advertisement.setMinimumDelayBetweenInterstitial(JSON.parse(options))
            }

window.showBanner = function(options) {
                if (options) {
                    options = JSON.parse(options)
                } else {
                    options = { }
                }

if (bridge.platform.id === bridge.PLATFORM_ID.CRAZY_GAMES || bridge.platform.id === bridge.PLATFORM_ID.GAME_DISTRIBUTION) {
                    bannerContainer.style.display = 'block'
                }

options['crazy_games'] = {
                    containerId: 'banner-container'
                }

options['game_distribution'] = {
                    containerId: 'banner-container'
                }

bridge.advertisement.showBanner(options)
            }

window.hideBanner = function() {
                if (bridge.platform.id === bridge.PLATFORM_ID.CRAZY_GAMES || bridge.platform.id === bridge.PLATFORM_ID.GAME_DISTRIBUTION) {
                    bannerContainer.style.display = 'none'
                }

bridge.advertisement.hideBanner()
            }

window.showInterstitial = function(options) {
                if (options) {
                    options = JSON.parse(options)
                }

bridge.advertisement.showInterstitial(options)
            }

window.showRewarded = function() {
                bridge.advertisement.showRewarded()
            }

// social
            window.getIsShareSupported = function() {
                return bridge.social.isShareSupported.toString()
            }

window.getIsInviteFriendsSupported = function() {
                return bridge.social.isInviteFriendsSupported.toString()
            }

window.getIsJoinCommunitySupported = function() {
                return bridge.social.isJoinCommunitySupported.toString()
            }

window.getIsCreatePostSupported = function() {
                return bridge.social.isCreatePostSupported.toString()
            }

window.getIsAddToHomeScreenSupported = function() {
                return bridge.social.isAddToHomeScreenSupported.toString()
            }

window.getIsAddToFavoritesSupported = function() {
                return bridge.social.isAddToFavoritesSupported.toString()
            }

window.getIsRateSupported = function() {
                return bridge.social.isRateSupported.toString()
            }

window.getIsExternalLinksAllowed = function() {
                return bridge.social.isExternalLinksAllowed.toString()
            }

window.share = function(options) {
                if (options) {
                    options = JSON.parse(options)
                }

bridge.social.share(options)
                    .then(() => {
                        sendMessageToUnity('OnShareCompleted', 'true')
                    })
                    .catch(error => {
                        sendMessageToUnity('OnShareCompleted', 'false')
                    })
            }

window.inviteFriends = function() {
                bridge.social.inviteFriends()
                    .then(() => {
                        sendMessageToUnity('OnInviteFriendsCompleted', 'true')
                    })
                    .catch(error => {
                        sendMessageToUnity('OnInviteFriendsCompleted', 'false')
                    })
            }

window.joinCommunity = function(options) {
                if (options) {
                    options = JSON.parse(options)
                }

bridge.social.joinCommunity(options)
                    .then(() => {
                        sendMessageToUnity('OnJoinCommunityCompleted', 'true')
                    })
                    .catch(error => {
                        sendMessageToUnity('OnJoinCommunityCompleted', 'false')
                    })
            }

window.createPost = function(options) {
                if (options) {
                    options = JSON.parse(options)
                }

bridge.social.createPost(options)
                    .then(() => {
                        sendMessageToUnity('OnCreatePostCompleted', 'true')
                    })
                    .catch(error => {
                        sendMessageToUnity('OnCreatePostCompleted', 'false')
                    })
            }

window.addToHomeScreen = function() {
                bridge.social.addToHomeScreen()
                    .then(() => {
                        sendMessageToUnity('OnAddToHomeScreenCompleted', 'true')
                    })
                    .catch(error => {
                        sendMessageToUnity('OnAddToHomeScreenCompleted', 'false')
                    })
            }

window.addToFavorites = function() {
                bridge.social.addToFavorites()
                    .then(() => {
                        sendMessageToUnity('OnAddToFavoritesCompleted', 'true')
                    })
                    .catch(error => {
                        sendMessageToUnity('OnAddToFavoritesCompleted', 'false')
                    })
            }

window.rate = function() {
                bridge.social.rate()
                    .then(() => {
                        sendMessageToUnity('OnRateCompleted', 'true')
                    })
                    .catch(error => {
                        sendMessageToUnity('OnRateCompleted', 'false')
                    })
            }

// leaderboard
            window.getIsLeaderboardSupported = function() {
                return bridge.leaderboard.isSupported.toString()
            }

window.getIsLeaderboardNativePopupSupported = function() {
                return bridge.leaderboard.isNativePopupSupported.toString()
            }

window.getIsLeaderboardMultipleBoardsSupported = function() {
                return bridge.leaderboard.isMultipleBoardsSupported.toString()
            }

window.getIsLeaderboardSetScoreSupported = function() {
                return bridge.leaderboard.isSetScoreSupported.toString()
            }

window.getIsLeaderboardGetScoreSupported = function() {
                return bridge.leaderboard.isGetScoreSupported.toString()
            }

window.getIsLeaderboardGetEntriesSupported = function() {
                return bridge.leaderboard.isGetEntriesSupported.toString()
            }

window.leaderboardSetScore = function(options) {
                if (options) {
                    options = JSON.parse(options)
                }

bridge.leaderboard.setScore(options)
                    .then(() => {
                        sendMessageToUnity('OnLeaderboardSetScoreCompleted', 'true')
                    })
                    .catch(error => {
                        sendMessageToUnity('OnLeaderboardSetScoreCompleted', 'false')
                    })
            }

window.leaderboardGetScore = function(options) {
                if (options) {
                    options = JSON.parse(options)
                }

bridge.leaderboard.getScore(options)
                    .then(data => {
                        if (data) {
                            if (typeof data !== 'string') {
                                data = JSON.stringify(data)
                            }

sendMessageToUnity('OnLeaderboardGetScoreCompleted', data)
                        } else {
                            sendMessageToUnity('OnLeaderboardGetScoreCompleted', '')
                        }
                    })
                    .catch(error => {
                        sendMessageToUnity('OnLeaderboardGetScoreCompleted', 'false')
                    })
            }

window.leaderboardGetEntries = function(options) {
                if (options) {
                    options = JSON.parse(options)
                }

bridge.leaderboard.getEntries(options)
                    .then(data => {
                        if (data) {
                            if (typeof data !== 'string') {
                                data = JSON.stringify(data)
                            }

sendMessageToUnity('OnLeaderboardGetEntriesCompletedSuccess', data)
                        } else {
                            sendMessageToUnity('OnLeaderboardGetEntriesCompletedSuccess', '')
                        }
                    })
                    .catch(error => {
                        sendMessageToUnity('OnLeaderboardGetEntriesCompletedFailed', 'false')
                    })
            }

window.leaderboardShowNativePopup = function(options) {
                if (options) {
                    options = JSON.parse(options)
                }

bridge.leaderboard.showNativePopup(options)
                    .then(() => {
                        sendMessageToUnity('OnLeaderboardShowNativePopupCompleted', 'true')
                    })
                    .catch(error => {
                        sendMessageToUnity('OnLeaderboardShowNativePopupCompleted', 'false')
                    })
            }
        </script>
    </body>
</html>

CSS