Knight's Defense: Código fuente del juego HTML Canvas

758 30jdiehl

Abrir en el editor Publica tu código

Knight's Defense: Código fuente del juego HTML Canvas

Recomendado

28 June 2025

Navegación de la barra lateral HTML del panel de control de OMIC EST

29 December 2024

Un código de wsss

25 February 2026

Generador de códigos QR HTML, JavaScript

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Knight's Defense</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
            background: #222;
            font-family: 'Courier New', Courier, monospace;
            color: white;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
        }
        #game-container {
            position: relative;
            border: 4px solid #555;
            box-shadow: 0 0 20px rgba(0,0,0,0.5);
        }
        canvas {
            display: block;
            background: #4a773c; /* Grass color */
        }
        #ui {
            position: absolute;
            top: 10px;
            left: 10px;
            pointer-events: none;
        }
        .health-bar {
            width: 300px;
            height: 20px;
            background: #333;
            border: 2px solid #fff;
        }
        #hp-fill {
            width: 100%;
            height: 100%;
            background: #e74c3c;
            transition: width 0.1s;
        }
        #overlay {
            position: absolute;
            top: 0; left: 0; width: 100%; height: 100%;
            background: rgba(0,0,0,0.7);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            z-index: 10;
        }
        button {
            padding: 10px 20px;
            font-size: 20px;
            cursor: pointer;
            background: #f1c40f;
            border: none;
            font-weight: bold;
        }
    </style>
</head>
<body>

<div id="game-container">
        <canvas id="gameCanvas"></canvas>
        <div id="ui">
            <div>CASTLE HEALTH: <span id="hp-text">10000</span></div>
            <div class="health-bar"><div id="hp-fill"></div></div>
        </div>
        <div id="overlay">
            <h1 id="status-title">KNIGHT'S DEFENSE</h1>
            <p>Defend the castle from the villagers!</p>
            <p>Arrows to Move | Space to Swing Spear</p>
            <button onclick="startGame()">START GAME</button>
        </div>
    </div>

canvas.width = 800;
    canvas.height = 400;

// Game State
    let gameActive = false;
    let castleHealth = 10000;
    let score = 0;
    const villagers = [];
    const keys = {};

// Audio Setup (Procedural Sound)
    const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
    function playSliceSound() {
        const osc = audioCtx.createOscillator();
        const gain = audioCtx.createGain();
        osc.type = 'sawtooth';
        osc.frequency.setValueAtTime(400, audioCtx.currentTime);
        osc.frequency.exponentialRampToValueAtTime(50, audioCtx.currentTime + 0.1);
        gain.gain.setValueAtTime(0.1, audioCtx.currentTime);
        gain.gain.exponentialRampToValueAtTime(0.01, audioCtx.currentTime + 0.1);
        osc.connect(gain);
        gain.connect(audioCtx.destination);
        osc.start();
        osc.stop(audioCtx.currentTime + 0.1);
    }

// Knight Object
    const knight = {
        x: 150,
        y: 200,
        w: 40,
        h: 40,
        speed: 4,
        attacking: false,
        attackTimer: 0,
        dir: 1 // 1 for right, -1 for left
    };

// Input Listeners
    window.addEventListener('keydown', e => {
        keys[e.code] = true;
        if (e.code === 'Space' && !knight.attacking) {
            knight.attacking = true;
            knight.attackTimer = 15;
            playSliceSound();
        }
    });
    window.addEventListener('keyup', e => keys[e.code] = false);

function spawnVillager() {
        if (!gameActive) return;
        villagers.push({
            x: canvas.width + 50,
            y: Math.random() * (canvas.height - 60) + 30,
            w: 30,
            h: 30,
            speed: 1.5 + Math.random() * 1.5
        });
        setTimeout(spawnVillager, Math.max(500, 2000 - (score * 10)));
    }

function update() {
        if (!gameActive) return;

// Move Knight
        if (keys['ArrowUp'] && knight.y > 0) knight.y -= knight.speed;
        if (keys['ArrowDown'] && knight.y < canvas.height - knight.h) knight.y += knight.speed;
        if (keys['ArrowLeft'] && knight.x > 100) { knight.x -= knight.speed; knight.dir = -1; }
        if (keys['ArrowRight'] && knight.x < canvas.width - 40) { knight.x += knight.speed; knight.dir = 1; }

// Attack Logic
        if (knight.attacking) {
            knight.attackTimer--;
            if (knight.attackTimer <= 0) knight.attacking = false;
        }

// Update Villagers
        for (let i = villagers.length - 1; i >= 0; i--) {
            const v = villagers[i];
            v.x -= v.speed;

// Damage Castle
            if (v.x < 80) {
                castleHealth -= 100;
                villagers.splice(i, 1);
                continue;
            }

// Hit by Spear
            if (knight.attacking) {
                const spearX = knight.x + (knight.dir === 1 ? knight.w : -40);
                const dist = Math.hypot((knight.x + knight.w/2 + (knight.dir * 40)) - (v.x + v.w/2), (knight.y + knight.h/2) - (v.y + v.h/2));
                if (dist < 60) {
                    villagers.splice(i, 1);
                    score++;
                    continue;
                }
            }
        }

// Check Game Over
        if (castleHealth <= 0) {
            castleHealth = 0;
            gameOver();
        }

hpText.innerText = castleHealth;
        hpFill.style.width = (castleHealth / 10000 * 100) + "%";
    }

function draw() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);

// Draw Castle (Behind)
        ctx.fillStyle = '#7f8c8d';
        ctx.fillRect(0, 0, 80, canvas.height);
        ctx.fillStyle = '#95a5a6';
        for(let i=0; i<canvas.height; i+=40) ctx.fillRect(60, i, 30, 20);

// Draw Village (Background/Front)
        ctx.fillStyle = '#5d4037';
        ctx.fillRect(700, 50, 60, 40); // Simple house
        ctx.fillRect(720, 250, 50, 50);

// Draw Knight
        ctx.fillStyle = '#bdc3c7'; // Armor
        ctx.fillRect(knight.x, knight.y, knight.w, knight.h);
        ctx.fillStyle = '#34495e'; // Helmet visor
        ctx.fillRect(knight.x + (knight.dir === 1 ? 25 : 5), knight.y + 10, 10, 5);

// Draw Spear
        if (knight.attacking) {
            ctx.strokeStyle = '#ecf0f1';
            ctx.lineWidth = 4;
            ctx.beginPath();
            ctx.moveTo(knight.x + knight.w/2, knight.y + knight.h/2);
            ctx.lineTo(knight.x + knight.w/2 + (knight.dir * 70), knight.y + knight.h/2 + (Math.sin(knight.attackTimer) * 20));
            ctx.stroke();
        } else {
            ctx.strokeStyle = '#7f8c8d';
            ctx.lineWidth = 3;
            ctx.beginPath();
            ctx.moveTo(knight.x + (knight.dir === 1 ? knight.w : 0), knight.y + knight.h);
            ctx.lineTo(knight.x + (knight.dir === 1 ? knight.w + 10 : -10), knight.y - 10);
            ctx.stroke();
        }

// Draw Villagers
        ctx.fillStyle = '#d35400';
        villagers.forEach(v => {
            ctx.fillRect(v.x, v.y, v.w, v.h);
            ctx.fillStyle = '#000';
            ctx.fillRect(v.x + 5, v.y + 5, 5, 5);
            ctx.fillRect(v.x + 20, v.y + 5, 5, 5);
            ctx.fillStyle = '#d35400';
        });

requestAnimationFrame(() => {
            update();
            draw();
        });
    }

function startGame() {
        if (audioCtx.state === 'suspended') audioCtx.resume();
        overlay.style.display = 'none';
        castleHealth = 10000;
        score = 0;
        villagers.length = 0;
        gameActive = true;
        spawnVillager();
    }

function gameOver() {
        gameActive = false;
        overlay.style.display = 'flex';
        statusTitle.innerText = "THE CASTLE HAS FALLEN!";
        document.querySelector('button').innerText = "TRY AGAIN";
    }

draw();
</script>
</body>
</html>

CSS