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

423 30jdiehl

Abrir en el editor Publica tu código

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

Recomendado

18 May 2024

Página principal del portafolio

20 August 2025

Plantilla HTML para blog de diseño moderno

13 June 2025

Un código de ashimadison8

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