Chargeur de jeux HTML : Plein écran, Mise en cache, Débloqué

204 kirkstienjews

Ouvrir dans l'éditeur Publiez votre code

Chargeur de jeux HTML : Plein écran, Mise en cache, Débloqué

Recommandé

23 September 2025

Extrait HTML d'animation de chargement CSS

30 March 2025

Un code par ytr3d3

30 August 2024

Bouton avec effet de survol animé de Dracula

HTML

<!DOCTYPE html>
<html>
<head>
<base target="_blank">
<title>New Tab</title>
<style>
/* ---------------------------------------------------------------------- */
/* --- CSS (40% opacity and 1.5x smaller) --- */
/* ---------------------------------------------------------------------- */
#intro-text-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999; 
}
.intro-message {
    color: gold;
    font-size: 5vw;
    font-family: 'Arial', sans-serif;
    font-weight: bold;
    text-shadow: 2px 2px 4px #000000;
    position: absolute;
    opacity: 0;
}
#intro-text-1 {
    animation: fade-and-hold-1 6s forwards;
}
#intro-text-2 {
    animation: fade-and-hold-2 6s forwards;
}@keyframes fade-and-hold-1 {
    0%, 5% { opacity: 0; }
    25% { opacity: 1; }
    45% { opacity: 1; }
    50%, 100% { opacity: 0; }
}
@keyframes fade-and-hold-2 {
    0%, 50% { opacity: 0; }
    55% { opacity: 1; }
    75% { opacity: 1; }
    95%, 100% { opacity: 0; }
}
.play-button {
    padding: 20px 40px;
    background: #000;
    color: #fff;
    border: 2px solid #4a148c;
    border-radius: 10px;
    font: bold 24px Arial;
    cursor: pointer;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1001;
}
.play-button:hover {
    background: #4a148c;
}
.fullscreen-button {
    padding: 6.6px 10px;
    background: #000;    color: #fff;
    border: 2px solid #4a148c;
    border-radius: 5px;
    font: bold 9px Arial;
    cursor: pointer;
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1002;
    opacity: 0.4; 
    transition: opacity 0.2s;
    outline: none; 
}
.fullscreen-button:hover {
    background: #4a148c;
    opacity: 1;
}
#fs-preview-btn {
    bottom: 60px; 
}

body, html {
    margin: 0;
    padding: 0;
    overflow: hidden;
    height: 100%;
    background: #000;
}
#container {
    width: 100%;
    height: 100%;
}
/* ---------------------------------------------------------------------- */</style>
</head>
<body>
<div id="intro-text-overlay">
    <span id="intro-text-1" class="intro-message">MC</span>
    <span id="intro-text-2" class="intro-message">enjoy</span>
</div>
<div id="container">
    <iframe id="fr" width="100%" height="100%" frameborder="0" allowfullscreen="" style="display:none;"></iframe>
    <button class="play-button" type="button" onclick="PlayTo(this)">PLAY REGULAR</button>
    <p id="unblocked-text" style="color:white; position:absolute; top:60%; left:50%; transform:translateX(-50%);">G+ (MC 1.20) contact zzzjz510@gmail.com for game suggestions/fixes. (you can use your school gmail i will see them)</p>
    
    <button id="fs-preview-btn" class="fullscreen-button" type="button" onclick="toggleBrowserFullscreen(); this.blur();">TOGGLE FULLSCREEN</button>
    
    <button id="fs-btn" class="fullscreen-button" type="button" onclick="openFullscreen(); this.blur();">OPEN UNDETECTABLE</button>
</div><script>
    const ENCODED_URL = 'aHR0cHM6Ly9ydXNlbGxvMjUuZ2l0aHViLmlvL0VhZ2x5TUMtMS4yMC8='; 
    const DB_NAME = 'GameCacheDB';
    const STORE_NAME = 'GameFiles';
    const CACHE_DURATION = 90 * 24 * 60 * 60 * 1000;

async function saveToCache(url, content) {
        const db = await openDB();
        const transaction = db.transaction(STORE_NAME, 'readwrite');        transaction.objectStore(STORE_NAME).put({ url: url, content: content, timestamp: Date.now() });
    }

async function getFileFromCache(url) {
        const db = await openDB();
        return new Promise((resolve, reject) => {
            const transaction = db.transaction(STORE_NAME, 'readonly');
            const request = transaction.objectStore(STORE_NAME).get(url);
            request.onsuccess = async (event) => {
                const data = event.target.result;
                if (data && (Date.now() - data.timestamp) < CACHE_DURATION) {
                    resolve(data.content);
                } else {
                    try {
                        const response = await fetch(url);
                        const text = await response.text();
                        await saveToCache(url, text);
                        resolve(text);
                    } catch (err) { reject(err); }
                }            };
        });
    }

// Refocus the game iframe so keys work
    function refocusGame() {
        const iframe = document.getElementById("fr");
        if (iframe && iframe.style.display !== "none") {
            iframe.focus();
        }
    }

function PlayTo(button) {
        const fileUrl = getFileUrl();
        const iframe = document.getElementById("fr");
        const fsBtn = document.getElementById("fs-btn");
        const previewBtn = document.getElementById("fs-preview-btn");

getFileFromCache(fileUrl).then((text) => {
            iframe.contentDocument.open();
            iframe.contentDocument.write(text);
            iframe.contentDocument.close();            
            iframe.style.display = "block";
            button.style.display = "none";
            document.getElementById("unblocked-text").style.display = "none";
            
            if(previewBtn) previewBtn.style.display = "none";

// Focus the game immediately after it loads
            setTimeout(refocusGame, 500);

fsBtn.innerHTML = "TOGGLE FULLSCREEN";
            fsBtn.onclick = function() {
                toggleBrowserFullscreen();
                this.blur();
            };
            
        }).catch((err) => {
            alert('Could not load game content.');
        });
    }

CSS