Talent Tower Defense — HR Planning · DrAIStudio& <link rel="canonical" href="https://draistudio.com/innovative-games/talent-tower-defense/"> <meta name="description" content="Waves of candidates march toward the open seat. Place screening towers to filter for the right hire."/> <meta name="theme-color" content="#0b1b24"/> <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ctext y='52' font-size='52'%3E%F0%9F%8F%B0%3C/text%3E%3C/svg%3E"/> <style> *,*::before,*::after{box-sizing:border-box} html,body{margin:0;background:#06121a;color:#e8f4f6;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;min-height:100%;-webkit-text-size-adjust:100%} body{background:radial-gradient(circle at 50% 0%,#0e2a30 0%,#06121a 60%,#02080d 100%);min-height:100vh;-webkit-user-select:none;user-select:none} .wrap{max-width:920px;margin:0 auto;padding:24px 18px 80px} .crumb{display:inline-block;font-size:13px;color:#9cb8be;margin-bottom:14px;padding:6px 12px;border:1px solid rgba(125,211,252,.2);border-radius:999px;background:rgba(11,27,36,.6);text-decoration:none} h1{font-size:clamp(22px,3.6vw,28px);margin:0 0 4px;text-align:center;letter-spacing:-.015em} .sub{font-size:13px;color:#9cb8be;letter-spacing:.04em;text-align:center;margin-bottom:18px} .hud{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-bottom:14px} .chip{background:rgba(11,27,36,.78);border:1px solid rgba(125,211,252,.32);border-radius:999px;padding:6px 12px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;font-weight:700} .chip b{font-size:14px;margin-left:5px;color:#7dd3fc} .chip.good b{color:#86efac} .chip.bad b{color:#f87171} .field{background:linear-gradient(180deg,#0e1f2a,#08151d);border:1px solid rgba(125,211,252,.25);border-radius:14px;padding:14px 18px;position:relative;overflow:hidden;min-height:280px} .field-label{display:flex;justify-content:space-between;margin-bottom:8px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#7dd3fc;font-weight:800} .lanes{display:flex;flex-direction:column;gap:10px} .lane{position:relative;height:54px;background:rgba(11,27,36,.7);border:1px dashed rgba(125,211,252,.2);border-radius:8px;overflow:hidden} .lane .seat{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:36px;height:36px;background:rgba(125,211,252,.15);border:1.5px solid #7dd3fc;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:20px} .lane .slots{position:absolute;left:6px;top:50%;transform:translateY(-50%);display:flex;gap:6px} .slot{width:32px;height:32px;border-radius:6px;border:1.5px dashed rgba(125,211,252,.3);background:rgba(11,27,36,.5);font-size:16px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .12s,border-color .12s} .slot:hover{background:rgba(125,211,252,.1);border-color:#7dd3fc} .slot.filled{background:rgba(125,211,252,.18);border-style:solid;border-color:#7dd3fc;cursor:default} .candidate{position:absolute;height:38px;display:flex;align-items:center;gap:6px;background:rgba(11,27,36,.92);border:1.5px solid rgba(125,211,252,.4);border-radius:18px;padding:0 10px 0 6px;font-size:11.5px;font-weight:700;white-space:nowrap;top:8px;will-change:left;box-shadow:0 4px 12px rgba(0,0,0,.5)} .candidate .av{width:28px;height:28px;border-radius:50%;background:#1a2a36;display:flex;align-items:center;justify-content:center;font-size:14px} .candidate.qualified{border-color:#86efac} .candidate.unqualified{border-color:#f87171} .candidate.pop{animation:popOut .35s forwards} @keyframes popOut{to{transform:scale(.4) rotate(15deg);opacity:0}} .shop{margin-top:14px;background:rgba(11,27,36,.6);border:1px solid rgba(125,211,252,.2);border-radius:12px;padding:12px} .shop-title{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#7dd3fc;font-weight:800;margin-bottom:8px} .tools{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:8px} .tool{background:rgba(15,30,45,.85);border:1.5px solid rgba(125,211,252,.3);border-radius:10px;padding:10px 8px;cursor:pointer;text-align:center;font-size:11px;line-height:1.3;font-weight:600;transition:border-color .12s,transform .08s} .tool:hover{border-color:#7dd3fc;transform:translateY(-2px)} .tool.selected{background:#7dd3fc;color:#06121a;border-color:#86efac} .tool .e{font-size:22px;display:block;margin-bottom:3px} .tool .c{display:block;font-size:10px;color:#fbbf24;margin-top:3px;font-weight:800;letter-spacing:.06em} .tool.selected .c{color:#06121a} .modal{position:fixed;inset:0;background:rgba(2,8,13,.86);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:20;padding:18px} .modal.hidden{display:none} .card{background:linear-gradient(180deg,#0e2330 0%,#091823 100%);border:1px solid rgba(125,211,252,.4);border-radius:18px;max-width:520px;width:100%;padding:26px;text-align:center} .card h2{margin:0 0 6px;font-size:23px} .card .s{color:#9cb8be;font-size:14px;margin-bottom:14px} .rules{text-align:left;background:rgba(11,27,36,.55);border:1px solid rgba(125,211,252,.18);border-radius:10px;padding:12px 14px;font-size:13.5px;line-height:1.55;margin-bottom:14px} .btnrow{display:flex;gap:10px;justify-content:center;flex-wrap:wrap} .btn{cursor:pointer;border:1px solid rgba(125,211,252,.5);background:#7dd3fc;color:#06121a;font-weight:800;padding:11px 20px;border-radius:999px;font-size:14px;letter-spacing:.04em;text-decoration:none;display:inline-block} .btn.ghost{background:transparent;color:#e8f4f6;border-color:rgba(125,211,252,.4)} .stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:6px 0 14px} .stats .stat{background:rgba(11,27,36,.6);border:1px solid rgba(125,211,252,.18);border-radius:10px;padding:8px} .stats .v{font-size:20px;font-weight:900;color:#7dd3fc} .stats .l{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#9cb8be;margin-top:2px} .pulse{animation:pulse 1s infinite} @keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}} </style> <link rel="stylesheet" href="/assets/light-theme.css?v=2026-05-31-gold" /> <script defer src="/assets/analytics.js?v=2026-05-20"></script> </head><body> <div class="wrap"> <a class="crumb" href="/innovative-games/">← Innovative Games</a> <h1>🏰 Talent Tower Defense</h1> <div class="sub">HR Planning · place screening towers, filter the right hires to the open seat</div> <div class="hud"> <div class="chip">Wave <b><span id="wave">1</span>/<span id="waveTot">5</span></b></div> <div class="chip">Budget <b id="budget">$300</b></div> <div class="chip good">Good hires <b id="good">0</b></div> <div class="chip bad">Bad hires <b id="bad">0</b>/5</div> </div> <div class="field"> <div class="field-label"><span>Candidates →</span><span>← Open seat</span></div> <div class="lanes" id="lanes"></div> </div> <div class="shop"> <div class="shop-title">Place a screening tower (click an empty slot above)</div> <div class="tools" id="tools"></div> </div> </div> <div class="modal" id="intro"> <div class="card"> <h2>🏰 Tower Defense Rules</h2> <div class="s">HR Planning & Talent Management · 14-week sim</div> <ul class="rules"> <li>3 lanes. 5 waves of candidates per game. Each candidate walks toward the open seat.</li> <li>Buy screening "towers" from the shop. Place one in any empty slot in a lane.</li> <li>Each tower screens out specific candidate types. Some are cheap and shallow, some are pricey but precise.</li> <li>If a <b style="color:#f87171">bad hire</b> reaches the seat → −1 reputation. 5 bad hires = you're fired.</li> <li>Every good hire = +$50 to budget. Spend wisely.</li> </ul> <div class="btnrow"> <button class="btn" id="start">Open requisition →</button> <a class="btn ghost" href="/games/hr-planning-talent-management/">Source: 14-week sim</a> </div> </div> </div> <div class="modal hidden" id="over"> <div class="card"> <h2 id="overTitle">🏁 Hiring drive complete</h2> <div class="s" id="overSub"></div> <div class="stats"> <div class="stat"><div class="v" id="finGood">0</div><div class="l">Good hires</div></div> <div class="stat"><div class="v" id="finBad">0</div><div class="l">Bad hires</div></div> <div class="stat"><div class="v" id="finRank">—</div><div class="l">Rank</div></div> </div> <div class="rules" id="overNote"></div> <div class="btnrow"> <button class="btn" id="again">New requisition</button> <a class="btn ghost" href="/innovative-games/">More games</a> </div> </div> </div> <script> (() => { const $ = id => document.getElementById(id); const TOWERS = [ { id:'ats', e:'📋', label:"ATS keyword filter", cost:50, blocks:['noKeywords'], why:"Cheap, catches missing keywords. Easy to fool with résumé padding." }, { id:'phone', e:'📞', label:"Phone screen", cost:80, blocks:['noKeywords','overstatedSkills'], why:"Catches inflated claims. 20–30 min/call." }, { id:'work', e:'🛠️', label:"Work-sample test", cost:140, blocks:['overstatedSkills','wrongRole'], why:"r ≈ .54 validity. Real predictor of performance." }, { id:'panel', e:'🧑‍🤝‍🧑', label:"Panel interview", cost:120, blocks:['cultureMismatch','overstatedSkills'],why:"Multiple raters reduce bias. Expensive in calendar time." }, { id:'ref', e:'✉️', label:"Reference check", cost:60, blocks:['fakedExperience'], why:"Catches fabrications. Limited if references are friends." }, { id:'bg', e:'🛡️', label:"Background check", cost:90, blocks:['fakedExperience','credentialFraud'], why:"Verifies credentials. Mandatory for regulated roles." }, ]; const TYPES = [ { t:'noKeywords', label:"Off-target résumé", av:'📄', good:false }, { t:'overstatedSkills', label:"Skills inflated", av:'🎈', good:false }, { t:'wrongRole', label:"Wrong role fit", av:'🧩', good:false }, { t:'cultureMismatch', label:"Culture mismatch", av:'⚠️', good:false }, { t:'fakedExperience', label:"Faked tenure", av:'🎭', good:false }, { t:'credentialFraud', label:"Fake credential", av:'❌', good:false }, { t:'genuine', label:"Strong fit", av:'⭐', good:true }, ]; const state = { wave:0, waveTot:5, budget:300, good:0, bad:0, lanes:[ {slots:[null,null,null], cands:[]}, {slots:[null,null,null], cands:[]}, {slots:[null,null,null], cands:[]} ], selectedTower: null, raf:null, spawnTimer:null, waveSpawnsRemaining:0, }; $('waveTot').textContent = state.waveTot; function start(){ $('intro').classList.add('hidden'); $('over').classList.add('hidden'); state.wave=0; state.budget=300; state.good=0; state.bad=0; state.lanes.forEach(L => { L.slots=[null,null,null]; L.cands=[]; }); renderLanes(); renderTools(); refresh(); nextWave(); if (!state.raf) state.raf = requestAnimationFrame(tick); } function refresh(){ $('wave').textContent = Math.min(state.wave, state.waveTot); $('budget').textContent = '$' + state.budget; $('good').textContent = state.good; $('bad').textContent = state.bad; } function renderLanes(){ const ll = $('lanes'); ll.innerHTML=''; state.lanes.forEach((L, li) => { const lane = document.createElement('div'); lane.className = 'lane'; lane.innerHTML = `<div class="slots"></div><div class="seat">💺</div>`; const slots = lane.querySelector('.slots'); L.slots.forEach((t, si) => { const s = document.createElement('div'); s.className = 'slot' + (t ? ' filled' : ''); s.textContent = t ? TOWERS.find(x=>x.id===t).e : '+'; s.onclick = () => placeTower(li, si); slots.appendChild(s); }); ll.appendChild(lane); }); } function renderTools(){ const tt = $('tools'); tt.innerHTML=''; TOWERS.forEach(t => { const el = document.createElement('button'); el.className = 'tool' + (state.selectedTower === t.id ? ' selected' : ''); el.innerHTML = `<span class="e">${t.e}</span>${esc(t.label)}<span class="c">$${t.cost}</span>`; el.onclick = () => { state.selectedTower = (state.selectedTower===t.id ? null : t.id); renderTools(); }; tt.appendChild(el); }); } function placeTower(li, si){ if (!state.selectedTower) return; const t = TOWERS.find(x=>x.id===state.selectedTower); if (state.budget < t.cost) return; if (state.lanes[li].slots[si]) return; state.budget -= t.cost; state.lanes[li].slots[si] = t.id; state.selectedTower = null; renderLanes(); renderTools(); refresh(); } function spawnCandidate(li){ const L = state.lanes[li]; const type = TYPES[Math.floor(Math.random()*TYPES.length)]; const el = document.createElement('div'); el.className = 'candidate ' + (type.good ? 'qualified' : 'unqualified'); el.innerHTML = `<div class="av">${type.av}</div>${esc(type.label)}`; const laneEl = document.querySelectorAll('.lane')[li]; laneEl.appendChild(el); const c = { el, type, x: -180, lane: li, alive:true }; L.cands.push(c); el.style.left = c.x + 'px'; } function tick(){ state.raf = requestAnimationFrame(tick); const laneEls = document.querySelectorAll('.lane'); state.lanes.forEach((L, li) => { const laneEl = laneEls[li]; if (!laneEl) return; const laneW = laneEl.clientWidth; // slot x positions: ~50, 90, 130 (where slot icons sit) const slotXs = [16, 56, 96]; L.cands.forEach(c => { if (!c.alive) return; c.x += 0.6 + state.wave * 0.08; c.el.style.left = c.x + 'px'; // check screening encounters slotXs.forEach((sx, si) => { const tower = L.slots[si]; if (!tower) return; if (c.checked && c.checked[si]) return; if (c.x > sx && c.x < sx + 40) { c.checked = c.checked || {}; c.checked[si] = true; const tw = TOWERS.find(x=>x.id===tower); if (tw.blocks.includes(c.type.t)) { c.alive=false; c.el.classList.add('pop'); setTimeout(()=>c.el.remove(), 350); if (!c.type.good) { // bad caught → small refund 5% state.budget += Math.round(tw.cost*0.05); refresh(); } else { // genuine wrongly screened — small penalty state.bad++; // false reject costs reputation a bit refresh(); } } } }); if (c.x > laneW - 56) { c.alive = false; c.el.remove(); if (c.type.good) { state.good++; state.budget += 50; } else { state.bad++; } refresh(); if (state.bad >= 5) return end(false); } }); L.cands = L.cands.filter(c => c.alive); }); } function nextWave(){ state.wave++; if (state.wave > state.waveTot) { // wait for last cands to clear then end setTimeout(()=> { if (state.lanes.every(L=>L.cands.length===0)) return end(true); setTimeout(arguments.callee, 600); }, 800); return; } refresh(); const spawns = 5 + state.wave*2; state.waveSpawnsRemaining = spawns; clearInterval(state.spawnTimer); state.spawnTimer = setInterval(()=>{ if (state.waveSpawnsRemaining <= 0) { clearInterval(state.spawnTimer); setTimeout(nextWave, 3000); return; } const li = Math.floor(Math.random()*3); spawnCandidate(li); state.waveSpawnsRemaining--; }, Math.max(450, 1200 - state.wave*120)); } function end(won){ clearInterval(state.spawnTimer); cancelAnimationFrame(state.raf); state.raf=null; $('finGood').textContent = state.good; $('finBad').textContent = state.bad; let rank='Junior Recruiter'; if (state.good>=18 && state.bad<=1) rank='🏆 Head of Talent'; else if (state.good>=12) rank='🥇 Senior Recruiter'; else if (state.good>=6) rank='🥈 Recruiter'; else rank='🥉 Coordinator'; $('finRank').textContent = rank; $('overTitle').textContent = won ? '🏆 Requisitions filled' : '⚠️ Five bad hires — you\'re fired'; $('overSub').textContent = `${state.good} good hires, ${state.bad} bad. Budget left: $${state.budget}.`; $('overNote').innerHTML = 'Real hiring funnels work the same way — each screening tool costs time and money, and the trick is layering CHEAPER filters first (ATS, phone) and EXPENSIVE filters (work sample, panel) only on candidates worth that investment. The 14-week HR Planning sim goes deep on workforce planning, talent pipelines, and screening design. <a href="/games/hr-planning-talent-management/" style="color:#7dd3fc">Play the full sim →</a>'; $('over').classList.remove('hidden'); } function esc(s){return String(s).replace(/[&<>"']/g,c=>({'&':'&','<':'<','>':'>','"':'"',"'":'''}[c]))} $('start').onclick=start; $('again').onclick=start; })(); </script> </body></html>