Modèle HTML de jeux débloqués avec prise en charge du plein écran

248 702022949

Ouvrir dans l'éditeur Publiez votre code

Modèle HTML de jeux débloqués avec prise en charge du plein écran

Recommandé

10 December 2025

Jeu du cercle parfait : Dessiner et marquer des points (Canvas HTML)

18 August 2024

Page de vente de chaises

1 April 2026

Configuration du chargeur HTML5 et de Firebase pour le jeu Escape Road

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Nexus Games | Unblocked</title>
    <style>
        :root {
            --primary: #00ff88;
            --bg: #0f172a;
            --card-bg: #1e293b;
            --text: #f8fafc;
            --accent: #3b82f6;
        }

body {
            background-color: var(--bg);
            color: var(--text);
            font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
            margin: 0;
            padding: 0;
            overflow-x: hidden;
        }

header {
            width: 100%;
            padding: 2rem 0;
            text-align: center;
            background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
            border-bottom: 3px solid var(--primary);
            box-shadow: 0 4px 20px rgba(0,0,0,0.5);
        }

h1 {
            margin: 0;
            font-size: 3rem;
            text-transform: uppercase;
            letter-spacing: 5px;
            color: var(--primary);
            text-shadow: 0 0 15px rgba(0, 255, 136, 0.6);
        }

.container {
            max-width: 1200px;
            margin: 40px auto;
            padding: 0 20px;
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 25px;
        }

.game-card {
            background: var(--card-bg);
            border-radius: 15px;
            overflow: hidden;
            transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            cursor: pointer;
            border: 1px solid rgba(255, 255, 255, 0.05);
            position: relative;
        }

.game-card:hover {
            transform: translateY(-10px) scale(1.02);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.6), 0 0 20px rgba(0, 255, 136, 0.3);
            border-color: var(--primary);
        }

.game-thumb {
            width: 100%;
            height: 180px;
            background: linear-gradient(45deg, #1e293b, #334155);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            font-weight: bold;
            color: var(--primary);
            text-align: center;
            padding: 10px;
            box-sizing: border-box;
        }

.game-info {
            padding: 20px;
            background: var(--card-bg);
        }

.game-info h3 {
            margin: 0;
            font-size: 1.25rem;
            color: #fff;
        }

.game-info p {
            font-size: 0.9rem;
            color: #94a3b8;
            margin-top: 8px;
        }

/* Fullscreen Overlay */
        #game-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(15, 23, 42, 0.98);
            z-index: 9999;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

#game-frame {
            width: 90%;
            height: 85%;
            border: 2px solid var(--primary);
            border-radius: 10px;
            background: #000;
        }

.controls {
            width: 90%;
            display: flex;
            justify-content: space-between;
            padding: 15px 0;
        }

.btn {
            background: var(--primary);
            color: var(--bg);
            border: none;
            padding: 10px 25px;
            border-radius: 5px;
            font-weight: bold;
            cursor: pointer;
            transition: opacity 0.2s;
        }

.btn:hover {
            opacity: 0.8;
        }

.close-btn {
            background: #ef4444;
            color: white;
        }
    </style>
</head>
<body>

<header>
    <h1>NEXUS GAMES</h1>
    <p>Premium Unblocked Web Experience</p>
</header>

<div class="container">
    
    <div class="game-card" onclick="launchGame('https://www.google.com/logos/2010/pacman10-i.html')">
        <div class="game-thumb">PAC-MAN</div>
        <div class="game-info">
            <h3>Pac-Man</h3>
            <p>The classic arcade experience, unblocked.</p>
        </div>
    </div>

<div class="game-card" onclick="launchGame('https://playtictactoe.org/')">
        <div class="game-thumb">TIC-TAC-TOE</div>
        <div class="game-info">
            <h3>Tic-Tac-Toe</h3>
            <p>Simple, clean, and impossible to beat.</p>
        </div>
    </div>

<div class="game-card" onclick="launchGame('https://2048game.com/')">
        <div class="game-thumb">2048</div>
        <div class="game-info">
            <h3>2048</h3>
            <p>Join the numbers and get to the 2048 tile!</p>
        </div>
    </div>

<div class="game-card" onclick="launchGame('https://hexgl.bkcore.com/play/')">
        <div class="game-thumb">HEXGL</div>
        <div class="game-info">
            <h3>HexGL</h3>
            <p>Fast-paced futuristic racing game.</p>
        </div>
    </div>
</div>

<div id="game-overlay">
    <div class="controls">
        <button class="btn" onclick="toggleFullscreen()">Fullscreen</button>
        <button class="btn close-btn" onclick="closeGame()">Close Game</button>
    </div>
    <iframe id="game-frame" src="" frameborder="0" allowfullscreen></iframe>
</div>

function launchGame(url) {
        frame.src = url;
        overlay.style.display = 'flex';
        document.body.style.overflow = 'hidden';
    }

function closeGame() {
        overlay.style.display = 'none';
        frame.src = '';
        document.body.style.overflow = 'auto';
    }

</body>
</html>

CSS