3D WebGL FPS Shooter Game in JavaScript and HTML

6 0 Games mzierenberg1 Follow

Remix Open In Editor Fullscreen Discuss Publish Your Code

3D WebGL FPS Shooter Game in JavaScript and HTML

<html lang="en-us">
  <base href="https://cdn.jsdelivr.net/gh/bubbls/UGS-Assets@main/lolshooter2-main/">
<head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>Funny Shooter 2</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link rel="stylesheet" href="style.css">

async function mergeSplitFiles(filePath, partsCount) {
        try {
          const parts = [];
          for (let i = 1; i <= partsCount; i++) {
            parts.push(`${filePath}.part${i}`);
          }
          log(`Merging ${filePath} from ${partsCount} parts...`);
          
          const responses = await Promise.all(parts.map(p => fetch(p)));
          for (const r of responses) {
            if (!r.ok) throw new Error(`Part missing: ${r.url} (${r.status})`);
          }
          
          const buffers = await Promise.all(responses.map(r => r.arrayBuffer()));
          const totalLen = buffers.reduce((acc, b) => acc + b.byteLength, 0);
          const merged = new Uint8Array(totalLen);
          let offset = 0;
          
          for (const b of buffers) { 
            merged.set(new Uint8Array(b), offset); 
            offset += b.byteLength; 
          }
          
          log(`✅ Merged: ${filePath} (${(totalLen/1024/1024).toFixed(2)} MB)`);
          
          const mimeType = 'application/octet-stream';
          const blob = new Blob([merged], { type: mimeType });
          const blobUrl = URL.createObjectURL(blob);
          
          log(`✅ Created blob URL for: ${filePath}`);
          
          return { buffer: merged.buffer, blobUrl: blobUrl };
        } catch (e) { 
          error(e); 
          throw e; 
        }
      }

function getBlobUrl(name) {
        if (window.blobUrls[name]) return window.blobUrls[name];
        for (const [k, v] of Object.entries(window.blobUrls)) {
          if (urlsMatch(k, name)) return v;
        }
        return null;
      }

function getMergedBuffer(name) {
        if (window.mergedFiles[name]) return window.mergedFiles[name];
        for (const [k, v] of Object.entries(window.mergedFiles)) {
          if (urlsMatch(k, name)) return v;
        }
        return null;
      }

// Intercept fetch to return blob URLs
      if (!window.originalFetch) window.originalFetch = window.fetch;
      window.fetch = function(url, ...args) {
        const name = shouldIntercept(url);
        if (name) {
          log('Intercepting fetch for:', name);
          return new Promise((resolve, reject) => {
            const interval = setInterval(() => {
              const blobUrl = getBlobUrl(name);
              if (blobUrl) {
                clearInterval(interval);
                log('Fetching from blob URL:', name);
                window.originalFetch(blobUrl, ...args)
                  .then(resolve)
                  .catch(reject);
              } else if (mergeStatus[name] === 'failed') { 
                clearInterval(interval); 
                reject(new Error('Merge failed')); 
              }
            }, 50);
          });
        }
        return window.originalFetch.call(this, url, ...args);
      }

// Intercept XHR to use blob URLs
      if (!window.OriginalXMLHttpRequest) window.OriginalXMLHttpRequest = window.XMLHttpRequest;
      window.XMLHttpRequest = function(opts) {
        const xhr = new window.OriginalXMLHttpRequest(opts);
        const originalOpen = xhr.open;
        const originalSend = xhr.send;
        
        xhr.open = function(method, url, ...args) { 
          this._url = url;
          this._method = method;
          this._openArgs = args;
          const name = shouldIntercept(url);
          
          if (name) {
            log('Intercepting XHR open:', name);
            this._shouldIntercept = true;
            this._interceptName = name;
            return;
          }
          
          return originalOpen.call(this, method, url, ...args); 
        };
        
        xhr.send = function(...args) {
          if (this._shouldIntercept) {
            const name = this._interceptName;
            log('Intercepting XHR send:', name);
            
            const checkInterval = setInterval(() => {
              const blobUrl = getBlobUrl(name);
              if (blobUrl) {
                clearInterval(checkInterval);
                log('Sending XHR with blob URL:', name);
                originalOpen.call(this, this._method, blobUrl, ...this._openArgs);
                originalSend.call(this, ...args);
              } else if (mergeStatus[name] === 'failed') {
                clearInterval(checkInterval);
                error('Failed to get blob URL for:', name);
              }
            }, 50);
            return;
          }
          
          return originalSend.call(this, ...args);
        };
        
        return xhr;
      }

// Start merging process
      async function start() {
        log('Starting merge process...');
        for (const f of config.files) {
          mergeStatus[f.name] = 'merging';
          
          try {
            const result = await mergeSplitFiles(f.name, f.parts);
            window.mergedFiles[f.name] = result.buffer;
            window.blobUrls[f.name] = result.blobUrl;
            mergeStatus[f.name] = 'ready';
            log(`✅ Ready: ${f.name}`);
          } catch (err) {
            mergeStatus[f.name] = 'failed';
            error(`Failed to merge ${f.name}:`, err);
          }
        }
        log('All files processed. Ready to load Unity.');
      }
      
      start();
    })();
    </script>
</head>
<body class="dark">
    <div id="unity-container" class="unity-desktop">
      <canvas id="unity-canvas"></canvas>
    </div>
    <div id="loading-cover" style="display:none;">
      <div id="unity-loading-bar">
        <div id="unity-logo"><img src="logo.png"></div>
        <div id="unity-progress-bar-empty" style="display: none;">
          <div id="unity-progress-bar-full"></div>
        </div>
        <div class="spinner"></div>
      </div>
    </div>
    <div id="unity-fullscreen-button" style="display: none;"></div>
    <script>
      const hideFullScreenButton = "1";
      const buildUrl = "Build";
      const loaderUrl = "FunnyShooter2_Yandex.loader.js";
      const config = {
        dataUrl: "FunnyShooter2_Yandex.data.unityweb",
        frameworkUrl: "FunnyShooter2_Yandex.framework.js.unityweb",
        codeUrl: "FunnyShooter2_Yandex.wasm.unityweb",
        streamingAssetsUrl: "StreamingAssets",
        companyName: "GoGoMan",
        productName: "Funny Shooter 2",
        productVersion: "1.0.1",
      };

const container = document.querySelector("#unity-container");
      const canvas = document.querySelector("#unity-canvas");
      const loadingCover = document.querySelector("#loading-cover");
      const progressBarEmpty = document.querySelector("#unity-progress-bar-empty");
      const progressBarFull = document.querySelector("#unity-progress-bar-full");
      const fullscreenButton = document.querySelector("#unity-fullscreen-button");
      const spinner = document.querySelector('.spinner');

if (/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)) {
        container.className = "unity-mobile";
        config.devicePixelRatio = 1;
      }
      canvas.style.background = "url('FunnyShooter2_Yandex.jpg') center / cover";
      loadingCover.style.display = "";

if (typeof YaGames !== 'undefined') {
      YaGames.init({
        adv: {
          onAdvClose: wasShown => {
            console.info('adv closed!');
          }
        }
      })
        .then(ysdk => {
          sdk = ysdk;
          ysdk.getPlayer({ signed: true }).then(_player => {
            player = _player;
          }).catch(err => {
          });
          ysdk.getPayments({ signed: true }).then(_payments => {
            payments = _payments;
            console.log("Purchasing True");
            payments.getPurchases().then(purchases => {
            if (purchases.some(purchase => purchase.productID === 'remove_ads')) {
                SHOW_ADS = false;
              }
          }).catch(err => {
          })
          }).catch(err => {
          })
          if(SHOW_ADS){
            sdk.adv.showFullscreenAdv({ callbacks: {} });
            sdk.adv.showBannerAdv();
          }
          else
          {
            sdk.adv.hideBannerAdv();
          }
        });
    } else {
      console.warn('YaGames SDK not available');
    }

function checkCom() {
      var isCom = 0;
      var output;

if (sdk != null) {
        var output = sdk.environment.i18n.tld;
        if (output == "com") {
          isCom = 1;
        } else if (output == "com.tr") {
          isCom = 2;
        }
      }

console.log(output);
      console.log(isCom);

if (window.unityInstance) {
        window.unityInstance.SendMessage('GameManager', 'IsCom', isCom);
      }

if (payments != null) {
        initPurchasing();
        checkShop();
      }
    }

function purchaseComplete(id) 
    {
        if(id == 0)
        {
            SHOW_ADS = false;
            if (sdk) sdk.adv.hideBannerAdv();
        }
    }

function consumePurchase(purchase) {
      window.unityInstance.SendMessage('SDKPlatforms', 'PurchasesComplete', purchase.id);
      payments.consumePurchase(purchase.purchaseToken)
    }

function checkSave() {
        loadData();
    }

function checkLanguage() {
      var currentLanguage = 0;
      var output;

if (sdk != null) {
        var output = sdk.environment.i18n.lang;
        if (output == "ru" || output == "be" || output == "kk" || output == "uk" || output == "uz")
          currentLanguage = 0;
        else if (output == "tr")
          currentLanguage = 2;
        else
          currentLanguage = 1;
      }

console.log(output);
      console.log(currentLanguage);

if (window.unityInstance) {
        window.unityInstance.SendMessage('GameManager', 'SetLanguage', currentLanguage);
      }
    }

function showFullscrenAd() {
      if (sdk && sdk.adv) {
        sdk.adv.showFullscreenAdv({
          callbacks: {}
        })
      }
    }

function rate() {
    }

CSS

Comments 0

…

3D WebGL FPS Shooter Game in JavaScript and HTML

Recommended

Comments 0