नाइट्स डिफेंस: एचटीएमएल कैनवास गेम सोर्स कोड

संपादक में खोलें Video अपना कोड प्रकाशित करें

अनुशंसित

17 April 2025

कोडपेन होम स्टार्स और वार्प स्पीड

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>

नाइट्स डिफेंस: एचटीएमएल कैनवास गेम सोर्स कोड

अनुशंसित

मेटेहन द्वारा एक कोड

मेटेहन द्वारा एक कोड

कोडपेन होम स्टार्स और वार्प स्पीड

HTML

CSS

JS

अनुशंसित

मेटेहन द्वारा एक कोड

मेटेहन द्वारा एक कोड

कोडपेन होम स्टार्स और वार्प स्पीड

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS