Slime Rancher

11 0 Games argghh Follow

Remix Open In Editor Fullscreen Discuss Publish Your Code

HTML

<html lang="en-us"><head><script async="" src="https://www.googletagmanager.com/gtag/js?id=G-L7856P3VNT"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

gtag('config', 'G-L7856P3VNT');
</script>

<base href="https://cdn.jsdelivr.net/gh/web-ports/slime-ranchers@f0c5856ac43cf0cfbab4c58139282fc75f9b1861/">
    <link rel="shortcut icon" href="TemplateData/favicon.ico">
    <link rel="stylesheet" href="TemplateData/style.css">
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
    <script src="TemplateData/UnityProgress.js"></script>
    <script src="Build/UnityLoader.js"></script>
    <script src="mobile-controls.js"></script>
    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap" rel="stylesheet">
<style id="mobile-controller-styles">
      #mobile-controller-root{position:fixed;left:0;top:0;right:0;bottom:0;pointer-events:none;z-index:2147483647;-webkit-user-select:none;-webkit-touch-callout:none; touch-action: manipulation; font-family:"Open Sans", sans-serif;}
      .mc-area{pointer-events:auto}
      .mc-joy{position:absolute;border-radius:50%;background:rgba(0,0,0,0.18);display:flex;align-items:center;justify-content:center;pointer-events:auto;touch-action:none;overflow:visible}
      .mc-knob{width:64px;height:64px;border-radius:50%;background:rgba(255,255,255,0.12);box-shadow:0 6px 18px rgba(0,0,0,0.4);transition:transform 0.02s linear;pointer-events:none}
      .mc-buttons{position:fixed;display:flex;flex-direction:column;gap:12px;pointer-events:auto;z-index:2147483647}
      .mc-left-buttons{
        left:12px;
        bottom:calc(12px + 160px + 12px);
        display:grid;
        grid-template-columns:repeat(2,70px);
        grid-auto-rows:50px;
        gap:12px;
        transform:translateY(-24px);
      }
      .mc-right-buttons{
        right:12px;
        bottom:calc(12px + 200px + 12px);
        display:grid;
        grid-template-columns:repeat(2,70px);
        grid-auto-rows:50px;
        gap:12px;
        transform:translateY(-24px);
      }
      .mc-center-buttons{
        position:fixed; zoom: 65%; left:50%; transform:translateX(-50%);
        bottom:12px; display:flex; flex-direction:row; gap:28px; align-items:center; justify-content:center;
        pointer-events:auto; z-index:2147483647
      }
      .mc-btn {
        width: clamp(48px, 12vw, 70px);
        height: clamp(48px, 12vw, 70px);
        padding: 0;
        font-size: clamp(12px, 3.5vw, 16px);
        border-radius: 50%;
        background: radial-gradient(circle at 60% 40%, #ffb6e6 0%, #ff69b4 100%);
        color: white;
        text-align: center;
        user-select: none;
        -webkit-touch-callout: none;
        -webkit-user-drag: none;
        user-drag: none;
        touch-action: none;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 2px solid #ff69b4;
        box-shadow: 0 4px 12px rgba(255, 105, 180, 0.25);
        opacity: 0.65;
      }
      .mc-btn:active{transform:scale(0.98)}
      #btn-esc{position:fixed;top:12px;left:12px;z-index:2147483647;}
      #btn-shift{position:fixed;top:12px;right:12px;z-index:2147483647;}

@media (max-width: 700px){
        #btn-esc,
        #btn-shift{
            width: 44px !important;
            height: 44px !important;
            font-size: 11px !important;
            border-width: 1.5px;
      }
        #btn-esc{ top: 8px; left: 8px; }
        #btn-shift{ top: 8px; right: 8px; }
      }
      </style></head>

<body style="-webkit-user-select: none; -webkit-touch-callout: none;">
    <div class="webgl-content">
        <div class="bg hide">
            <img class="bg" src="TemplateData/loading_bg.png" style="width: 100%; height: 100%; padding: 0px; margin: 0px; border: 0px; position: absolute;">
        </div>
        <div id="loading-text" style="-webkit-text-stroke-width: 2px; -webkit-text-stroke-color: black; color: white; font-size: 48px; font-family: cursive; text-align: center; margin-top: 20px;">LOADING... 54.50 MB / 54.5 MB</div>
        <div id="gameContainer" style="width: 774px; height: 688px; padding: 0px; margin: 0px; border: 0px;"><canvas id="#canvas" style="width: 774px; height: 688px;"></canvas><div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; border: 1px solid black; padding: 5px; background: rgb(232, 232, 232);"><span>Press OK.</span><br><button style="margin: 5px;">click to run game!</button></div></div>
    </div>
    <script src="TemplateData/responsive.js"></script>

const ogxhr = window.XMLHttpRequest;

var loadingText = document.querySelector("#loading-text");

let loadedBytes = 0;

async function fetchWithProgress(url) {
        const response = await fetch(url);
        const reader = response.body.getReader();
        let chunks = [];
        let received = 0;

while (true) {
            const {
                done,
                value
            } = await reader.read();
            if (done) break;
            received += value.length;
            loadedBytes += value.length;
            chunks.push(value);

let mbDone = (loadedBytes / (1024 * 1024)).toFixed(2);
            let mbTotal = '54.5';
            loadingText.innerHTML = `LOADING... ${mbDone} MB / ${mbTotal} MB`;
        }

let fullBuffer = new Uint8Array(received);
        let offset = 0;
        for (let chunk of chunks) {
            fullBuffer.set(chunk, offset);
            offset += chunk.length;
        }
        return fullBuffer.buffer;
    }

async function mergeFiles(fileParts) {
        const buffers = await Promise.all(fileParts.map(part => fetchWithProgress(part)));
        const mergedBlob = new Blob(buffers);
        return URL.createObjectURL(mergedBlob);
    }

function getParts(file, start, end) {
        let parts = [];
        for (let i = start; i <= end; i++) {
            parts.push(file + ".part" + i);
        }
        return parts;
    }

function resizeUnityContainer() {
        var container = document.getElementById("gameContainer");
        var canvas = container.querySelector("canvas");

container.style.width = window.innerWidth + "px";
        container.style.height = window.innerHeight + "px";

if (canvas) {
            canvas.style.width = window.innerWidth + "px";
            canvas.style.height = window.innerHeight + "px";
        }
    }

(async () => {
        const [dataUrl] = await Promise.all([
            mergeFiles(getParts("Build/slimeBUILDS.data.unityweb", 1, 3)),
        ]);

const json = {
            "companyName": "Snubs",
            "productName": "Slime Rancher Prototype",
            "dataUrl": dataUrl,
            "wasmCodeUrl": "slimeBUILDS.wasm.code.unityweb",
            "wasmFrameworkUrl": "slimeBUILDS.framework.unityweb",
            "TOTAL_MEMORY": 536870912,
            "graphicsAPI": ["WebGL 2.0", "WebGL 1.0"],
            "webglContextAttributes": {
                "preserveDrawingBuffer": false
            },
            "splashScreenStyle": "Dark"
        };

let blob = new Blob([JSON.stringify(json)], {
            type: "application/json"
        });
        let blobUrl = URL.createObjectURL(blob);
        window.addEventListener("resize", resizeUnityContainer);

UnityLoader.instantiate("gameContainer", json, {
            url: blobUrl,
            Module: {
                onRuntimeInitialized: function() {
                    resizeUnityContainer();
                    document.querySelector("#loading-text").remove();
                },
            },
        });
    })();
</script>

<div class="mc-buttons mc-left-buttons mc-area"><div class="mc-btn" id="btn-leftclick" draggable="false" role="button" aria-label="Shoot" style="-webkit-user-select: none; -webkit-touch-callout: none; -webkit-user-drag: none;">Shoot</div></div><div class="mc-buttons mc-right-buttons mc-area"><div class="mc-btn" id="btn-rightclick" draggable="false" role="button" aria-label="Vac" style="-webkit-user-select: none; -webkit-touch-callout: none; -webkit-user-drag: none;">Vac</div><div class="mc-btn" id="btn-jump" draggable="false" role="button" aria-label="Jump" style="-webkit-user-select: none; -webkit-touch-callout: none; -webkit-user-drag: none;">Jump</div></div><div class="mc-buttons mc-center-buttons mc-area"><div class="mc-btn" id="btn-scroll-up" draggable="false" role="button" aria-label="<" style="-webkit-user-select: none; -webkit-touch-callout: none; -webkit-user-drag: none;"><</div><div class="mc-btn" id="btn-e" draggable="false" role="button" aria-label="Interact" style="-webkit-user-select: none; -webkit-touch-callout: none; -webkit-user-drag: none;">Interact</div><div class="mc-btn" id="btn-scroll-down" draggable="false" role="button" aria-label=">" style="-webkit-user-select: none; -webkit-touch-callout: none; -webkit-user-drag: none;">></div></div><div class="mc-btn" id="btn-esc" draggable="false" role="button" aria-label="Menu" style="-webkit-user-select: none; -webkit-touch-callout: none; -webkit-user-drag: none;">Menu</div><div class="mc-btn" id="btn-shift" draggable="false" role="button" aria-label="Sprint" style="-webkit-user-select: none; -webkit-touch-callout: none; -webkit-user-drag: none;">Sprint</div><div id="mobile-controller-root" style="display: block;"><div class="mc-joy mc-area" style="left: 12px; bottom: 12px; width: 160px; height: 160px;"><div class="mc-knob" style="touch-action: none;"></div></div><div class="mc-joy mc-area" style="right: 12px; bottom: 12px; width: 200px; height: 200px;"><div class="mc-knob" style="touch-action: none;"></div></div></div></body></html>

CSS

Comments 0

…