Código para insertar el juego HTML5 de Geometry Dash Lite

3,031 31lhelton

Abrir en el editor Publica tu código

Código para insertar el juego HTML5 de Geometry Dash Lite

Recomendado

30 December 2025

Botón de pedido animado HTML/CSS

12 December 2025

Ubicación de la hermana de FNAF

30 November 2024

Menú de navegación de Coreboot

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>

CSS