Códigos de arquivos UGS

24 anithameela

Abrir no Editor Video Publique Seu Código

Recomendado

12 December 2025

Modelo de jogo Flappy Bird em HTML Canvas

12 December 2025

Incorporação HTML do reprodutor de jogos Flash Ruffle

1 March 2026

Modelo de jogo de tiro 3D

HTML

<!DOCTYPE html>
<html>
<head>
    <title>UGS Files</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background: linear-gradient(135deg, #2e3244 0%, #36224b 100%);
            min-height: 100vh;
            margin: 0;
            padding: 0;
            display: flex;
        }

.sidebar {
            position: fixed;
            left: 0;
            top: 0;
            width: 80px;
            height: 100vh;
            background: rgba(0, 0, 0, 0.3);
            backdrop-filter: blur(10px);
            padding: 20px 10px;
            display: flex;
            flex-direction: column;
            gap: 8px;
            overflow-y: auto;
            box-shadow: 2px 0 10px rgba(0,0,0,0.3);
            z-index: 1000;
        }

.sidebar::-webkit-scrollbar {
            width: 6px;
        }

.sidebar::-webkit-scrollbar-track {
            background: rgba(255,255,255,0.1);
        }

.sidebar::-webkit-scrollbar-thumb {
            background: rgba(255,255,255,0.3);
            border-radius: 3px;
        }

.sidebar-btn {
            background: rgb(89, 134, 218);
            border: none;
            padding: 12px;
            font-size: 18px;
            font-weight: 700;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.2s ease;
            color: white;
            text-align: center;
            min-height: 45px;
        }

.sidebar-btn:hover {
            background: #79aadb;
            transform: scale(1.05);
        }

.sidebar-btn.empty {
            opacity: 0.4;
            cursor: default;
        }

.sidebar-btn.empty:hover {
            transform: none;
            background: rgb(89, 134, 218);
        }

.main-content {
            margin-left: 100px;
            flex: 1;
            padding: 20px;
        }

h1 {
            color: white;
            text-align: center;
            margin-bottom: 30px;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
        }

.letter-section {
            margin-bottom: 40px;
            padding: 0 20px;
            max-width: 900px;
            margin-left: auto;
            margin-right: auto;
            min-height: 100px;
        }

.letter-section.empty {
            opacity: 0.5;
        }

.letter-header {
            color: white;
            font-size: 32px;
            font-weight: bold;
            margin-bottom: 15px;
            padding-bottom: 10px;
            border-bottom: 3px solid rgba(255,255,255,0.3);
            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
        }

.buttons-container {
            display: flex;
            flex-direction: column;
            gap: 10px;
            align-items: center;
        }

.empty-message {
            color: rgba(255,255,255,0.6);
            font-style: italic;
            text-align: center;
            padding: 20px;
        }

input[type="button"] {
            background: rgb(89, 134, 218);
            border: none;
            padding: 15px 30px;
            font-size: 16px;
            font-weight: 500;
            border-radius: 8px;
            cursor: pointer;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
            transition: all 0.3s ease;
            width: 100%;
            max-width: 600px;
            color: white;
            text-align: left;
        }

input[type="button"]:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 12px rgba(0,0,0,0.2);
            background: #79aadb;
        }

input[type="button"]:active {
            transform: translateY(0);
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

@media (max-width: 768px) {
            .sidebar {
                width: 60px;
                padding: 15px 5px;
            }
            .sidebar-btn {
                padding: 8px;
                font-size: 16px;
            }
            .main-content {
                margin-left: 70px;
            }
        }
    </style>
</head>
<body>
    
    <div class="sidebar" id="sidebar">
    </div>

<div class="main-content">
        <h1>UGS Files</h1>
    <h2 style="color: white; text-align: center; margin-bottom: 30px; text-shadow: 2px 2px 4px rgba(0,0,0,0.3); font-weight: normal; font-size: 18px;">
    Files from
    <a href="https://docs.google.com/document/d/1_FmH3BlSBQI7FGgAQL59-ZPe8eCxs35wel6JUyVaG8Q/"
        target="_blank"
        style="display: inline; color: #79aadb; text-decoration: none; font-size: 18px; text-shadow: 1px 1px 2px rgba(0,0,0,0.2);">
        Ultimate Game Stash Google Doc
    </a>
    </h2>
    <h2 style="color: white; text-align: center; margin-bottom: 30px; text-shadow: 2px 2px 4px rgba(0,0,0,0.3); font-weight: normal; font-size: 18px;">
    Discord Server:
    <a href="https://discord.gg/rmVsAqkpkA"
        target="_blank"
        style="display: inline; color: #79aadb; text-decoration: none; font-size: 18px; text-shadow: 1px 1px 2px rgba(0,0,0,0.2);">
        https://discord.gg/rmVsAqkpkA
    </a>
    </h2>

function generateAllSections() {
            const allChars = ['0','1','2','3','4','5','6','7','8','9',
                            'A','B','C','D','E','F','G','H','I','J','K','L','M',
                            'N','O','P','Q','R','S','T','U','V','W','X','Y','Z'];
           
            const filesByChar = {};
            allChars.forEach(char => {
                filesByChar[char] = [];
            });

files.forEach(file => {
                const lower = file.toLowerCase();
                if (lower.startsWith('cl')) {
                    const afterCl = lower.substring(2);
                    if (afterCl.length > 0) {
                        const firstChar = afterCl[0].toUpperCase();
                        if (filesByChar[firstChar]) {
                            filesByChar[firstChar].push(file);
                        }
                    }
                }
            });

const container = document.getElementById('sections-container');
            allChars.forEach(char => {
                const section = document.createElement('div');
                section.className = 'letter-section';
                section.id = `section-${char}`;
               
                const header = document.createElement('div');
                header.className = 'letter-header';
                header.textContent = char;
                section.appendChild(header);

const buttonsContainer = document.createElement('div');
                buttonsContainer.className = 'buttons-container';

if (filesByChar[char].length > 0) {
                    filesByChar[char].forEach(file => {
                        const btn = document.createElement('input');
                        btn.type = 'button';
                        btn.value = file;
                        btn.onclick = () => {

function normalizeFileName(name) {
                                if (name.includes('.') && name.lastIndexOf('.') > 0) return name;
                                return name + '.html';
                            }

const normalized = normalizeFileName(file);
                            const encoded = encodeURIComponent(normalized);

fetch(`https://cdn.jsdelivr.net/gh/bubbls/ugs-singlefile/UGS-Files/${encoded}?t=${Date.now()}`)
                                .then(response => response.text())
                                .then(text => {
                                    const newWin = window.open("about:blank", "_blank");
                                    if (newWin) {
                                        newWin.document.open();
                                        newWin.document.write(text);
                                        newWin.document.close();
                                    }
                                });
                        };
                        btn.style.width = '100%';
                        btn.style.height = '100%';
                        btn.style.fontSize = '100';
                        buttonsContainer.appendChild(btn);
                    });
                } else {
                    section.classList.add('empty');
                    const emptyMsg = document.createElement('div');
                    emptyMsg.className = 'empty-message';
                    emptyMsg.textContent = 'No files';
                    buttonsContainer.appendChild(emptyMsg);
                }

section.appendChild(buttonsContainer);
                container.appendChild(section);
            });

generateSidebar(allChars, filesByChar);
        }

Códigos de arquivos UGS

Recomendado

Modelo de jogo Flappy Bird em HTML Canvas

Incorporação HTML do reprodutor de jogos Flash Ruffle

Modelo de jogo de tiro 3D

HTML

CSS

JS

Recomendado

Modelo de jogo Flappy Bird em HTML Canvas

Incorporação HTML do reprodutor de jogos Flash Ruffle

Modelo de jogo de tiro 3D

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS