Juegos desbloqueados en HTML: FNAF, Sandtris, Juegos de matemáticas

445 julian.reyna

Abrir en el editor Publica tu código

Juegos desbloqueados en HTML: FNAF, Sandtris, Juegos de matemáticas

Recomendado

7 January 2026

Plantilla de formulario de inicio de sesión HTML con inicio de sesión social

26 March 2026

Cargador de juego 3D Unity Brawl HTML

30 September 2025

Animación de carga CSS con ondas y ondulaciones

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Unblocked Games Hub | FNAF & Sandtris</title>
    <style>
        :root {
            --primary-color: #00ffcc;
            --bg-dark: #0f0f12;
            --card-bg: #1a1a1f;
            --text-light: #e0e0e0;
            --accent: #ff2e63;
        }

body {
            font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
            background-color: var(--bg-dark);
            color: var(--text-light);
            margin: 0;
            padding: 0;
            line-height: 1.6;
        }

header {
            background-color: #000;
            padding: 1rem 5%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 2px solid var(--primary-color);
            position: sticky;
            top: 0;
            z-index: 1000;
        }

.logo {
            font-size: 1.8rem;
            font-weight: 800;
            color: var(--primary-color);
            text-decoration: none;
            letter-spacing: 2px;
        }

nav a {
            color: white;
            text-decoration: none;
            margin-left: 20px;
            font-weight: 500;
            transition: 0.3s;
        }

nav a:hover {
            color: var(--primary-color);
        }

.hero {
            text-align: center;
            padding: 60px 20px;
            background: linear-gradient(rgba(0,0,0,0.8), rgba(0,0,0,0.8)), url('https://images.unsplash.com/photo-1511512578047-dfb367046420?auto=format&fit=crop&q=80&w=1000');
            background-size: cover;
            background-position: center;
        }

.hero h1 {
            font-size: 3rem;
            margin-bottom: 10px;
            color: #fff;
        }

.container {
            max-width: 1200px;
            margin: 40px auto;
            padding: 0 20px;
        }

.section-title {
            border-left: 5px solid var(--accent);
            padding-left: 15px;
            margin-bottom: 30px;
            font-size: 1.5rem;
        }

.game-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 25px;
        }

.game-card {
            background: var(--card-bg);
            border-radius: 12px;
            overflow: hidden;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            border: 1px solid #333;
            display: flex;
            flex-direction: column;
        }

.game-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 10px 20px rgba(0,0,0,0.5);
            border-color: var(--primary-color);
        }

.game-thumbnail {
            width: 100%;
            height: 180px;
            background: #25252b;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.2rem;
            font-weight: bold;
            color: #555;
            position: relative;
        }

.fnaf-thumb { background: linear-gradient(45deg, #300, #000); color: #ff2e63; }
        .sandtris-thumb { background: linear-gradient(45deg, #c2a34f, #634e1a); color: #fff; }

.game-info {
            padding: 20px;
            flex-grow: 1;
        }

.game-title {
            margin: 0 0 10px 0;
            font-size: 1.3rem;
            color: #fff;
        }

.game-desc {
            font-size: 0.9rem;
            color: #aaa;
            margin-bottom: 20px;
        }

.play-button {
            display: block;
            text-align: center;
            background: var(--primary-color);
            color: #000;
            padding: 10px;
            border-radius: 6px;
            text-decoration: none;
            font-weight: bold;
            transition: 0.2s;
        }

.play-button:hover {
            background: #fff;
        }

footer {
            text-align: center;
            padding: 40px;
            margin-top: 60px;
            background: #000;
            color: #666;
            font-size: 0.8rem;
        }

.tag {
            position: absolute;
            top: 10px;
            left: 10px;
            background: var(--accent);
            color: white;
            padding: 2px 8px;
            border-radius: 4px;
            font-size: 0.7rem;
            text-transform: uppercase;
        }
    </style>
</head>
<body>

<header>
        <a href="#" class="logo">UNBLOCKED.IO</a>
        <nav>
            <a href="#">Home</a>
            <a href="#">New Games</a>
            <a href="#">Trending</a>
            <a href="#">Contact</a>
        </nav>
    </header>

<section class="hero">
        <h1>Unblocked Gaming Hub</h1>
        <p>Your favorite games, accessible anywhere, anytime.</p>
    </section>

<div class="container">
        <h2 class="section-title">Popular Now</h2>
        
        <div class="game-grid">
            
            <div class="game-card">
                <div class="game-thumbnail fnaf-thumb">
                    <span class="tag">Horror</span>
                    FNAF 1
                </div>
                <div class="game-info">
                    <h3 class="game-title">Five Nights at Freddy's</h3>
                    <p class="game-desc">Survive the night shift at Freddy Fazbear's Pizza. Watch the cameras and conserve your power!</p>
                    <a href="#" class="play-button">PLAY NOW</a>
                </div>
            </div>

<div class="game-card">
                <div class="game-thumbnail sandtris-thumb">
                    <span class="tag">Puzzle</span>
                    SANDTRIS
                </div>
                <div class="game-info">
                    <h3 class="game-title">Sandtris</h3>
                    <p class="game-desc">A unique twist on Tetris where blocks turn into sand. Manage the piles and clear the lines.</p>
                    <a href="#" class="play-button">PLAY NOW</a>
                </div>
            </div>

<div class="game-card">
                <div class="game-thumbnail" style="background: linear-gradient(45deg, #1a2a6c, #b21f1f);">
                    <span class="tag">Action</span>
                    SLOPE
                </div>
                <div class="game-info">
                    <h3 class="game-title">Slope</h3>
                    <p class="game-desc">High-speed physics game. Roll down the slope and avoid obstacles for as long as possible.</p>
                    <a href="#" class="play-button">PLAY NOW</a>
                </div>
            </div>

<div class="game-card">
                <div class="game-thumbnail" style="background: linear-gradient(45deg, #11998e, #38ef7d);">
                    <span class="tag">Casual</span>
                    1v1.LOL
                </div>
                <div class="game-info">
                    <h3 class="game-title">1v1.LOL</h3>
                    <p class="game-desc">Competitive building and shooting simulator. Practice your mechanics in real-time.</p>
                    <a href="#" class="play-button">PLAY NOW</a>
                </div>
            </div>
        </div>
    </div>

<footer>
        <p>© 2023 Unblocked Games Hub. All game assets belong to their respective creators.</p>
        <p>Built for speed and accessibility.</p>
    </footer>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GN Math | Unblocked School Game</title>
    <style>
        :root {
            --primary: #4a90e2;
            --secondary: #f39c12;
            --bg: #f4f7f6;
            --text: #333;
        }

body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: var(--bg);
            color: var(--text);
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }

.game-container {
            background: white;
            padding: 2rem;
            border-radius: 15px;
            box-shadow: 0 10px 25px rgba(0,0,0,0.1);
            text-align: center;
            width: 90%;
            max-width: 400px;
        }

h1 {
            color: var(--primary);
            margin-bottom: 1rem;
            text-transform: uppercase;
            letter-spacing: 2px;
        }

.stats {
            display: flex;
            justify-content: space-between;
            margin-bottom: 20px;
            font-weight: bold;
        }

#problem {
            font-size: 3rem;
            margin: 20px 0;
            font-weight: bold;
            color: #2c3e50;
        }

input[type="number"] {
            width: 100px;
            padding: 10px;
            font-size: 1.5rem;
            border: 2px solid #ddd;
            border-radius: 8px;
            outline: none;
            text-align: center;
        }

input[type="number"]:focus {
            border-color: var(--primary);
        }

button {
            display: block;
            width: 100%;
            margin-top: 20px;
            padding: 12px;
            background-color: var(--primary);
            color: white;
            border: none;
            border-radius: 8px;
            font-size: 1.1rem;
            cursor: pointer;
            transition: background 0.3s;
        }

button:hover {
            background-color: #357abd;
        }

#feedback {
            margin-top: 15px;
            height: 24px;
            font-weight: bold;
        }

.correct { color: #27ae60; }
        .wrong { color: #e74c3c; }
    </style>
</head>
<body>

<div class="game-container">
    <h1>GN MATH</h1>
    <div class="stats">
        <span>Score: <span id="score">0</span></span>
        <span>Level: <span id="level">1</span></span>
    </div>
    
    <div id="problem">? + ?</div>
    
    <input type="number" id="answer" placeholder="?" autofocus>
    <button id="submit-btn">Check Answer</button>
    
    <div id="feedback"></div>
</div>

let score = 0;
    let level = 1;
    let currentAnswer = 0;

function generateProblem() {
        const max = 5 + (level * 5);
        const num1 = Math.floor(Math.random() * max) + 1;
        const num2 = Math.floor(Math.random() * max) + 1;
        const operators = ['+', '-', '*'];
        const op = operators[Math.floor(Math.random() * Math.min(level, 3))];

if (op === '+') {
            currentAnswer = num1 + num2;
            problemElement.textContent = `${num1} + ${num2}`;
        } else if (op === '-') {
            // Ensure positive results for early levels
            const n1 = Math.max(num1, num2);
            const n2 = Math.min(num1, num2);
            currentAnswer = n1 - n2;
            problemElement.textContent = `${n1} - ${n2}`;
        } else {
            currentAnswer = num1 * num2;
            problemElement.textContent = `${num1} × ${num2}`;
        }
        
        answerInput.value = '';
        answerInput.focus();
    }

scoreElement.textContent = score;
        setTimeout(() => {
            feedbackElement.textContent = "";
            generateProblem();
        }, 1000);
    }

submitBtn.addEventListener('click', checkAnswer);
    
    answerInput.addEventListener('keypress', (e) => {
        if (e.key === 'Enter') checkAnswer();
    });

// Start game
    generateProblem();
</script>

</body>
</html>

CSS