Knight's Defense: codice sorgente del gioco HTML Canvas

308 30jdiehl

Apri nell'Editor Video Pubblica il Tuo Codice

Knight's Defense: codice sorgente del gioco HTML Canvas

Consigliato

23 August 2025

Modello di sito web portfolio per web designer

10 December 2025

Demo del gioco di fisica Ragdoll di Matter.js

13 June 2025

Un codice di Metehan

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: codice sorgente del gioco HTML Canvas

Consigliato

Modello di sito web portfolio per web designer

Demo del gioco di fisica Ragdoll di Matter.js

Un codice di Metehan

HTML

CSS

JS

Consigliato

Modello di sito web portfolio per web designer

Demo del gioco di fisica Ragdoll di Matter.js

Un codice di Metehan

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS