Código de incorporação do jogo Geometry Dash Lite em HTML5

949 31lhelton

Abrir no Editor Video Publique Seu Código

Código de incorporação do jogo Geometry Dash Lite em HTML5

Recomendado

16 December 2025

Barra de navegação HTML com menu suspenso e estilos.

2 February 2026

n-gon: Jogo de rolagem lateral de física Matter.js

22 August 2025

Blogium: Modelo HTML para blog sobre tecnologia, design e vida

HTML

<!DOCTYPE html>

<head>
  <base href="https://cdn.jsdelivr.net/gh/bubbls/UGS-Assets@main/gdlite/">
    <title>Geometry Dash</title>
    <link rel="icon" type="image/png" href="https://e3334afd.cf-nate.pages.dev/0/g/geodash/game/splash.png">
    <meta name="description" content="Play Geometry Dash Lite Online For Free on Chromebook, PC, Windows, Desktop in Chrome and modern browsers.">
    <link rel="canonical" href="https://gamecomets.com/game/geometry-dash-lite/" />
    <meta name="robots" content="noindex, nofollow">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="themes/geometrydashlite.io/rs/css/home.css?v=1">
</head>
<meta name="cf-2fa-verify" content="GpoihhhSRQknehLQkEtXM">

<body>
    <style>
        html {
            box-sizing: border-box;
        }
        
        *,
        *:before,
        *:after {
            box-sizing: inherit;
        }
        
        body {
            margin: 0;
            background-image: linear-gradient(rgb(0, 0, 0), rgb(0, 102, 255));
            overflow: hidden;
        }
        
        #gameContainer {
            width: 100vw;
            height: 100vh;
        }
        
        canvas {
            width: 100%;
            height: 100%;
            display: block;
        }
        
        canvas+* {
            z-index: 2;
        }
        
        .container {
            max-width: 1600px;
            position: relative;
        }
        
        .posImg {
            position: absolute;
            top: 0;
            width: 100%;
            height: 100%;
        }
        
        .logo {
            position: absolute;
            display: block;
            max-width: 100vw;
            max-height: 70vh;
            top: 300px;
        }
        
        .pos_progress {
            position: absolute;
            bottom: 15%;
            width: 100%;
        }
        
        .progress {
            margin: 1.5em auto;
            max-width: 436px;
            height: auto;
            display: none;
            position: relative;
        }
        
        .full {
            width: 97%;
            transform-origin: top left;
        }
        
        .box_process {
            width: 100%;
        }
        
        .process {
            width: 98%;
        }
        
        .progress .posfull,
        .progress .posbox {
            position: absolute;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .progress .posfull {
            top: 8px;
            z-index: 1;
        }
        
        .progress .posbox {
            top: 0;
            z-index: 2;
        }
        
        #loader {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            background-image: linear-gradient(rgb(0, 0, 0), rgb(0, 102, 255));
        }
        
        .pos_spinner {
            position: absolute;
            top: 70%;
            left: 50%;
            transform: translate(-30%, -50%);
        }
        
        .spinner,
        .spinner:after {
            display: none;
            border-radius: 50%;
            width: 5em;
            height: 5em;
        }
        
        .spinner {
            margin: 10px;
            font-size: 10px;
            position: relative;
            text-indent: -9999em;
            border-top: 1.1em solid rgba(255, 255, 255, 0.2);
            border-right: 1.1em solid rgba(255, 255, 255, 0.2);
            border-bottom: 1.1em solid rgba(255, 255, 255, 0.2);
            border-left: 1.1em solid #ffffff;
            transform: translateZ(0);
            animation: spinner-spin 1.1s infinite linear;
        }
        
        @keyframes spinner-spin {
            0% {
                transform: rotate(0deg);
            }
            100% {
                transform: rotate(360deg);
            }
        }
    </style>
    <div id="gameContainer"></div>
    <div id="loader"><img class="logo" src="image/loading.png?v=1">
        <div class="spinner"></div>
        <div class=" pos_progress">
            <div class="progress">
                <div class="posfull"><img class="full" src="image/process_bar_back.png"></div>
                <div class="posbox"><img class="box_process" src="image/process_bar_front.png"></div>
            </div>
        </div>
        <script>
      window.fileMergerConfig = {
        files: [
          { name: 'GeometryDashLite.data.unityweb', parts: 2 },
          { name: 'GeometryDashLite.wasm.code.unityweb', parts: 1 },
          { name: 'GeometryDashLite.wasm.framework.unityweb', parts: 1 },
        ],
        basePath: 'Build/',
        debug: true
      };  
      </script>
    <script src="https://cdn.jsdelivr.net/gh/bubbls/UGS-Assets@ac5cdfc0042aca584e72619375b4aca948a9243c/merge.js"></script>
        <script src="Build/UnityLoader.js"></script>
        <script>
            var gameInstance = UnityLoader.instantiate("gameContainer", "Build/GeometryDashLite.json", {
                onProgress: UnityProgress
            });

function ShowInfo() {
                $("div.main-panel").css('width', $("div.main-panel").css('max-width'));
                $("div.main-panel-ads").css('display', 'block');
                $("div.main-panel-content").css('display', 'block');
                $('button.hide-main-panel').children('i').html('>>');
            }

function HideInfo() {
                $("div.main-panel").css('width', '0px');
                $("div.main-panel-ads").css('display', 'none');
                $("div.main-panel-content").css('display', 'none');
                $('button.hide-main-panel').children('i').html('Info');
            }
            $('button.hide-main-panel').click(function() {
                console.log('a');
                ToggleInfo();
            });
        </script>
</body>

</html>

Código de incorporação do jogo Geometry Dash Lite em HTML5

Recomendado

Barra de navegação HTML com menu suspenso e estilos.

n-gon: Jogo de rolagem lateral de física Matter.js

Blogium: Modelo HTML para blog sobre tecnologia, design e vida

HTML

CSS

JS

Recomendado

Barra de navegação HTML com menu suspenso e estilos.

n-gon: Jogo de rolagem lateral de física Matter.js

Blogium: Modelo HTML para blog sobre tecnologia, design e vida

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS