ZOMBIE BASE DEFENSE TYCOON — WITH TURRETS

by TurboMaker33
255 lines10.5 KB
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ZOMBIE BASE DEFENSE TYCOON — WITH TURRETS</title>
    <style>
        * { box-sizing: border-box; font-family: Arial, sans-serif; }
        body { max-width: 1000px; margin: 0 auto; padding: 20px; background: #1a0f0f; color: #fff; }
        h1 { text-align: center; color: #ff3333; font-size: 42px; margin-bottom: 5px; text-shadow: 0 0 15px #ff000060; }
        .subtitle { text-align: center; color: #ff8888; margin-bottom: 20px; font-size: 18px; }
        .status-bar { display: flex; justify-content: space-around; background: #2b1515; padding: 15px; border-radius: 12px; margin-bottom: 15px; flex-wrap: wrap; gap: 10px; }
        .stat { text-align: center; min-width: 110px; font-size: 16px; font-weight: bold; }
        .stat span { display: block; color: #ffdd44; font-size: 24px; margin-top: 5px; }
        .hp-bar { background: #332222; height: 30px; border-radius: 8px; margin: 10px 0; overflow: hidden; }
        .hp-fill { height: 100%; background: linear-gradient(90deg, #ff2222, #ff6600); transition: width .3s; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: bold; }
        .event-box { background: #2b1010; padding: 15px; border-radius: 10px; margin: 15px 0; border-left: 5px solid #ff3333; min-height: 60px; font-size: 17px; }
        .btn-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 20px 0; }
        @media(max-width:700px) { .btn-grid { grid-template-columns: repeat(2,1fr); } }
        button { padding: 15px 8px; font-size: 14px; font-weight: bold; border: none; border-radius: 10px; cursor: pointer; transition: transform .15s; }
        button:hover { transform: scale(1.05); }
        button:disabled { opacity: .4; cursor: not-allowed; transform: none; }
        .farm { background: #28c76f; color: #000; }
        .wall { background: #708090; color: #fff; }
        .tower { background: #4facfe; color: #000; }
        .turret { background: #ff5500; color: #fff; }
        .trap { background: #ff9f1c; color: #000; }
        .guard { background: #9d65c9; color: #fff; }
        .hire { background: #3d8bff; color: #fff; }
        .fortify { background: #ffd700; color: #000; }
        .research { background: #ea3943; color: #fff; }
        .log-box { background: #221111; padding: 15px; border-radius: 10px; height: 200px; overflow-y: auto; font-family: monospace; font-size: 13px; margin-top: 15px; }
        .win { color: #00ff41; font-weight: bold; }
        .lose { color: #ff4d4d; font-weight: bold; }
        .danger { color: #ff0000; font-weight: bold; animation: blink .5s infinite alternate; }
        @keyframes blink { from { opacity:1; } to { opacity:.5; } }
    </style>
</head>
<body>

<h1>🧟 ZOMBIE BASE DEFENSE 🧟</h1>
<p class="subtitle">Build your base • Defend your walls • Survive ENDLESS zombie waves! <strong>NEW: TURRETS!</strong></p>

<div class="status-bar">
    <div class="stat">💰 MONEY<br><span id="money">$100</span></div>
    <div class="stat">👷 WORKERS<br><span id="workers">1</span></div>
    <div class="stat">🌊 WAVE<br><span id="wave">0</span></div>
    <div class="stat">🖱️ CLICKS<br><span id="clicks">0</span></div>
</div>

<div class="hp-bar">
    <div class="hp-fill" id="hpbar" style="width:100%">WALL HP: 5 / 5</div>
</div>

<div class="event-box" id="event">
    <strong>🏠 YOUR BASE — STARTING!</strong> Farm for money → Build defenses → NEW: TURRETS ($800) kill 5 ZOMBIES each per wave! Every 10 clicks = ZOMBIE WAVE ATTACK!
</div>

<div class="btn-grid">
    <button class="farm" onclick="doFarm()">🌾 FARM<br>Earn Money</button>
    <button class="wall" onclick="doWall()">🧱 WALL<br>$80 +5HP</button>
    <button class="tower" onclick="doTower()">🗼 TOWER<br>$400 Kills+1</button>
    <button class="turret" onclick="doTurret()">🤖 TURRET<br>$800 Kills+5</button>
    <button class="trap" onclick="doTrap()">🪓 TRAP<br>$250 Kills+2</button>
    <button class="guard" onclick="doGuard()">👮 GUARD<br>$600 Kills+3</button>
    <button class="hire" onclick="doHire()">🧑 WORKER<br>$100</button>
    <button class="fortify" onclick="doFortify()">💎 FORTIFY<br>Half Damage</button>
    <button class="research" onclick="doResearch()">🧪 RESEARCH<br>+25% All</button>
</div>

<div class="log-box" id="log">
    <div>═══════════════ BATTLE LOG ═══════════════</div>
</div>

<script>
// === ZOMBIE DEFENSE TYCOON — WITH TURRETS ===
let money = 100;
let workers = 1;
let wallHP = 5;
let maxWallHP = 5;
let wave = 0;
let clicks = 0;

// DEFENSES
let towers = 0;      // kills +1 each
let turrets = 0;     // kills +5 each 🆕
let traps = 0;       // kills +2 each
let guards = 0;      // kills +3 each
let fortified = false; // half damage
let research = 1.00;  // defense multiplier

let gameOver = false;

// ELEMENTS
const eMoney = document.getElementById('money');
const eWorkers = document.getElementById('workers');
const eWave = document.getElementById('wave');
const eClicks = document.getElementById('clicks');
const eHpbar = document.getElementById('hpbar');
const eEvent = document.getElementById('event');
const eLog = document.getElementById('log');

function fmt(n) { return '$' + n.toLocaleString(); }
function updateUI() {
    eMoney.textContent = fmt(money);
    eWorkers.textContent = workers;
    eWave.textContent = wave;
    eClicks.textContent = clicks;
    let pct = Math.max(0, (wallHP/maxWallHP)*100);
    eHpbar.style.width = pct + '%';
    eHpbar.textContent = `WALL HP: ${wallHP} / ${maxWallHP}`;
    if(pct <= 25) eHpbar.style.background = 'linear-gradient(90deg, #ff0000, #ff4400)';
    else if(pct <= 50) eHpbar.style.background = 'linear-gradient(90deg, #ff6600, #ffaa00)';
    else eHpbar.style.background = 'linear-gradient(90deg, #22aa22, #44dd44)';
    document.querySelectorAll('button').forEach(b => b.disabled = gameOver);
}

function log(msg, type='') {
    const line = document.createElement('div');
    line.className = type;
    line.textContent = `Click ${clicks}: ${msg}`;
    eLog.insertBefore(line, eLog.children[1]);
}

function defensePower() {
    return Math.floor((towers*1 + turrets*5 + traps*2 + guards*3) * research);
}

function nextClick() {
    clicks++;
    if(clicks % 10 === 0) {
        wave++;
        zombieAttack();
    }
    updateUI();
}

function zombieAttack() {
    // ZOMBIES GET STRONGER EVERY WAVE
    let baseZombies = 3 + Math.floor(wave * 1.5) + Math.floor(Math.pow(wave/5, 1.4));
    let zombies = Math.floor(baseZombies + Math.random()*(baseZombies*0.4));
    let defense = defensePower();
    let zombiesReaching = Math.max(0, zombies - defense);
    
    // DAMAGE TO WALLS
    let dmg = zombiesReaching;
    if(fortified) dmg = Math.floor(dmg / 2);
    wallHP -= dmg;

    let eventMsg = `🧟 WAVE ${wave} ATTACKS! ${zombies} Zombies Coming!<br>`;
    eventMsg += `⚔️ Defenses: ${towers} Towers + ${turrets} TURRETS + ${traps} Traps + ${guards} Guards = ${defense} Kills!<br>`;
    
    if(zombiesReaching > 0) {
        eventMsg += `💥 ${zombiesReaching} Zombies Hit Your Walls! —${dmg} HP!`;
        log(`WAVE ${wave}: ${zombies} Zombies → Defenses Killed ${defense} → ${zombiesReaching} Hit Walls! -${dmg}HP`, 'lose');
    } else {
        eventMsg += `✅ ALL ZOMBIES DESTROYED! Your TURRETS did work!`;
        log(`WAVE ${wave}: ${zombies} Zombies → ALL KILLED! Walls Safe!`, 'win');
    }

    // CHECK WALLS BROKEN
    if(wallHP <= 0) {
        gameOver = true;
        eventMsg = `<span class="danger">💀 WALLS BROKEN! ZOMBIES GOT IN! YOU SURVIVED ${wave} WAVES!</span>`;
        log(`💀 BASE OVERRUN! Survived ${wave} WAVES!`, 'danger');
        // RESTART OPTION
        setTimeout(()=>{
            money = 100; workers = 1; wallHP = 5; maxWallHP = 5; wave = 0; clicks = 0;
            towers = 0; turrets = 0; traps = 0; guards = 0; fortified = false; research = 1.00; gameOver = false;
            eEvent.innerHTML = '🔄 REBUILT! Build TURRETS this time — they are POWERFUL!';
            log('🔄 NEW BASE BUILT — Try TURRETS this time!');
            updateUI();
        }, 3000);
    }
    eEvent.innerHTML = eventMsg;
}

// === BUTTON ACTIONS ===
function doFarm() {
    let earn = 15 * workers;
    money += earn;
    log(`🌾 FARM → +${fmt(earn)}`);
    nextClick();
}

function doWall() {
    if(money < 80) { eEvent.innerHTML = '🧱 Need $80 to build Wall!'; return; }
    money -= 80;
    wallHP += 5;
    maxWallHP += 5;
    log('🧱 BUILT WALL! +5 HP!');
    updateUI();
}

function doTower() {
    if(money < 400) { eEvent.innerHTML = '🗼 Need $400 to build Tower!'; return; }
    money -= 400;
    towers++;
    log('🗼 ARROW TOWER BUILT! Kills +1 Zombie Per Wave!');
    updateUI();
}

function doTurret() {
    if(money < 800) { eEvent.innerHTML = '🤖 Need $800 to build TURRET!'; return; }
    money -= 800;
    turrets++;
    log('🤖 TURRET BUILT! MACHINE GUN DEPLOYED! Kills +5 ZOMBIES PER WAVE FOREVER! 💥', 'win');
    updateUI();
}

function doTrap() {
    if(money < 250) { eEvent.innerHTML = '🪓 Need $250 to build Traps!'; return; }
    money -= 250;
    traps++;
    log('🪓 SPIKE TRAPS BUILT! Kills +2 Zombies Per Wave!');
    updateUI();
}

function doGuard() {
    if(money < 600) { eEvent.innerHTML = '👮 Need $600 to Hire Guard!'; return; }
    money -= 600;
    guards++;
    log('👮 GUARD HIRED! Kills +3 Zombies Per Wave!');
    updateUI();
}

function doHire() {
    if(money < 100) { eEvent.innerHTML = '🧑 Need $100 to Hire Worker!'; return; }
    money -= 100;
    workers++;
    log('🧑 WORKER HIRED! Earn More Money!');
    updateUI();
}

function doFortify() {
    if(fortified) { eEvent.innerHTML = '💎 Walls Already Fortified!'; return; }
    if(money < 1000) { eEvent.innerHTML = '💎 Need $1,000 to Fortify!'; return; }
    money -= 1000;
    fortified = true;
    log('💎 WALLS FORTIFIED! Take HALF DAMAGE from ALL Zombies FOREVER!', 'win');
    updateUI();
}

function doResearch() {
    if(money < 2000) { eEvent.innerHTML = '🧪 Need $2,000 to Research!'; return; }
    money -= 2000;
    research *= 1.25;
    log(`🧪 RESEARCH COMPLETE! ALL Defenses +25%! (Total ×${research.toFixed(2)})`, 'win');
    updateUI();
}

updateUI();
</script>
</body>
</html>
Game Source: ZOMBIE BASE DEFENSE TYCOON — WITH TURRETS

Creator: TurboMaker33
Libraries: none
Complexity: complex (255 lines, 10.5 KB)
The full source code is displayed above on this page.
Remix Instructions

To remix this game, copy the source code above and modify it. Add a ARCADELAB header at the top with "remix_of: zombie-base-defense-tycoon-with-turrets-turbomaker33" to link back to the original. Then publish at arcadelab.ai/publish.