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

309 30jdiehl

Abrir en el editor Video Publica tu código

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

Recomendado

13 June 2025

Código para insertar el juego HTML5 de Geometry Dash Lite

30 March 2025

Un código de ytr3d3

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>

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

Recomendado

Un código de Metehan

Código para insertar el juego HTML5 de Geometry Dash Lite

Un código de ytr3d3

HTML

CSS

JS

Recomendado

Un código de Metehan

Código para insertar el juego HTML5 de Geometry Dash Lite

Un código de ytr3d3

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS