Tower Defense Patterns

Keep the three towers stationary at hand-picked positions beside the path so the three timing models are visible side-by-side as enemies walk past. Use {...TOWER_TYPES[type]} spread-copy in the Tower constructor to avoid sharing per-tower stats with the type definition. For the leading-shot prediction, compute distance from tower-to-target, derive timeToImpact = distance / projectileSpeed, then advance the target position by targetSpeed * timeToImpact along the direction toward PATH[target.pathIndex + 1]. The PATH-swap demonstration is most striking when the routes diverge after the spawn point so enemies in flight visibly turn at the moment R is pressed.

// Three Pillars of Tower Defense Architecture — Snapshot-vs-Live-vs-AOE Targeting + PATH-Waypoint-List + WAVES-Composition-Record-List
const c = document.createElement('canvas'); c.width = 900; c.height = 420; document.body.appendChild(c);
const ctx = c.getContext('2d');
// (b) PATH-waypoint-list data-driven externalization — ROUTES dict + active PATH array
const ROUTES = {
  A: [{x:30,y:80}, {x:300,y:80}, {x:300,y:340}, {x:600,y:340}, {x:870,y:340}],
  B: [{x:30,y:80}, {x:200,y:80}, {x:200,y:200}, {x:700,y:200}, {x:870,y:340}]
};
let route = 'A'; let PATH = ROUTES[route];
// (c) WAVES-composition-record-list — declarative per-group spawn cadence
const WAVES = [
  { enemies: [{type:'basic', count:6, spacing:600}] },
  { enemies: [{type:'fast', count:8, spacing:400}, {type:'basic', count:3, spacing:700}] },
  { enemies: [{type:'tank', count:2, spacing:1200}, {type:'basic', count:6, spacing:500}] }
];
const ENEMY_TYPES = { basic:{hp:30,speed:60,size:8,color:'#ff6b6b'}, fast:{hp:18,speed:120,size:6,color:'#ffd93d'}, tank:{hp:90,speed:35,size:11,color:'#6bcb77'} };
class Enemy {
  constructor(type){ Object.assign(this, ENEMY_TYPES[type]); this.maxHp=this.hp; this.pathIndex=0; this.x=PATH[0].x; this.y=PATH[0].y; this.dead=false; }
  update(dt){ if(this.pathIndex>=PATH.length-1){ this.dead=true; return; } const t=PATH[this.pathIndex+1], dx=t.x-this.x, dy=t.y-this.y, d=Math.hypot(dx,dy); if(d<4){ this.pathIndex++; } else { const m=this.speed*dt; this.x+=dx/d*m; this.y+=dy/d*m; } }
  draw(){ ctx.fillStyle=this.color; ctx.beginPath(); ctx.arc(this.x,this.y,this.size,0,Math.PI*2); ctx.fill(); ctx.fillStyle='#0f0'; ctx.fillRect(this.x-12,this.y-this.size-6,24*this.hp/this.maxHp,3); }
}
// (a) Snapshot-vs-live-vs-AOE — three tower modes demonstrating TARGETING-EFFECT-TIMING
const TOWER_TYPES = {
  proj:{range:140,fireRate:1.2,dmg:14,col:'#9bd1ff',pcol:'#ffd700'},
  laser:{range:150,fireRate:3,dmg:6,col:'#ffafaf',pcol:'#00ffff',instant:true},
  cannon:{range:130,fireRate:0.7,dmg:18,col:'#c0a878',pcol:'#ff4500',splash:42}
};
class Projectile {
  constructor(t,target,dmg,sp,col,splash){
    this.x=t.x; this.y=t.y; this.dmg=dmg; this.sp=sp; this.col=col; this.splash=splash; this.dead=false; this.target=target;
    // Leading-shot prediction: snapshot future target position at fire moment
    const dist=Math.hypot(target.x-t.x,target.y-t.y), tti=dist/sp;
    const next=PATH[Math.min(target.pathIndex+1,PATH.length-1)];
    const dx=next.x-target.x, dy=next.y-target.y, d=Math.hypot(dx,dy)||1;
    this.tx=target.x+dx/d*target.speed*tti; this.ty=target.y+dy/d*target.speed*tti;
  }
  update(dt){
    if(this.dead) return;
    const dx=this.tx-this.x, dy=this.ty-this.y, d=Math.hypot(dx,dy);
    if(d<6){
      this.dead=true;
      if(this.splash){ enemies.forEach(e=>{ if(e.dead) return; const ed=Math.hypot(e.x-this.tx,e.y-this.ty); if(ed<=this.splash){ e.hp-=this.dmg*(1-ed/this.splash); if(e.hp<=0) e.dead=true; } }); }
      else if(this.target&&!this.target.dead){ this.target.hp-=this.dmg; if(this.target.hp<=0) this.target.dead=true; }
    } else { this.x+=dx/d*this.sp*dt; this.y+=dy/d*this.sp*dt; }
  }
  draw(){ ctx.fillStyle=this.col; ctx.beginPath(); ctx.arc(this.x,this.y,4,0,Math.PI*2); ctx.fill(); }
}
const beams=[];
class Tower {
  constructor(x,y,type){ this.x=x; this.y=y; this.type=type; Object.assign(this, {...TOWER_TYPES[type]}); this.cd=0; }
  update(dt){
    this.cd-=dt; if(this.cd>0) return;
    const t=enemies.find(e=>!e.dead&&Math.hypot(e.x-this.x,e.y-this.y)<=this.range); if(!t) return;
    this.cd=1/this.fireRate;
    if(this.instant){ t.hp-=this.dmg; if(t.hp<=0) t.dead=true; beams.push({x1:this.x,y1:this.y,x2:t.x,y2:t.y,age:0,col:this.pcol}); }
    else { projectiles.push(new Projectile(this, t, this.dmg, 280, this.pcol, this.splash)); }
  }
  draw(){ ctx.fillStyle=this.col; ctx.fillRect(this.x-12,this.y-12,24,24); ctx.strokeStyle='rgba(255,255,255,0.25)'; ctx.beginPath(); ctx.arc(this.x,this.y,this.range,0,Math.PI*2); ctx.stroke(); ctx.fillStyle='#000'; ctx.font='bold 12px monospace'; ctx.fillText(this.type[0].toUpperCase(),this.x-3,this.y+4); }
}
const towers=[ new Tower(160,180,'proj'), new Tower(450,250,'laser'), new Tower(720,180,'cannon') ];
let enemies=[], projectiles=[], waveIdx=-1, queue=[], lastSpawn=0;
function startWave(){ if(waveIdx>=WAVES.length-1) return; waveIdx++; queue=[]; WAVES[waveIdx].enemies.forEach(g=>{ for(let i=0;i<g.count;i++) queue.push({type:g.type, delay:g.spacing}); }); lastSpawn=performance.now(); }
addEventListener('keydown', e=>{
  if(e.key==='w'||e.key==='W') startWave();
  if(e.key==='r'||e.key==='R'){ route=route==='A'?'B':'A'; PATH=ROUTES[route]; enemies.forEach(en=>{ const i=Math.min(en.pathIndex,PATH.length-1); en.x=PATH[i].x; en.y=PATH[i].y; }); }
});
let last=performance.now();
function loop(now){
  const dt=Math.min((now-last)/1000,0.1); last=now;
  if(queue.length>0 && now-lastSpawn>queue[0].delay){ enemies.push(new Enemy(queue.shift().type)); lastSpawn=now; }
  enemies.forEach(e=>e.update(dt)); enemies=enemies.filter(e=>!e.dead);
  towers.forEach(t=>t.update(dt)); projectiles.forEach(p=>p.update(dt)); projectiles=projectiles.filter(p=>!p.dead); beams.forEach(b=>b.age+=dt);
  ctx.fillStyle='#1a2e1a'; ctx.fillRect(0,0,c.width,c.height);
  ctx.strokeStyle='#8b7355'; ctx.lineWidth=22; ctx.lineCap='round'; ctx.beginPath(); ctx.moveTo(PATH[0].x,PATH[0].y); for(let i=1;i<PATH.length;i++) ctx.lineTo(PATH[i].x,PATH[i].y); ctx.stroke();
  beams.filter(b=>b.age<0.08).forEach(b=>{ ctx.strokeStyle=b.col; ctx.lineWidth=2; ctx.beginPath(); ctx.moveTo(b.x1,b.y1); ctx.lineTo(b.x2,b.y2); ctx.stroke(); });
  towers.forEach(t=>t.draw()); enemies.forEach(e=>e.draw()); projectiles.forEach(p=>p.draw());
  ctx.fillStyle='#fff'; ctx.font='12px monospace';
  ctx.fillText(`Wave ${waveIdx+1}/${WAVES.length}  Enemies left: ${enemies.length+queue.length}  Route: ${route}`, 10, 16);
  ctx.fillText('Towers: P=projectile snapshot, L=laser live, A=cannon AOE   Keys: W next wave, R swap route', 10, 410);
  requestAnimationFrame(loop);
}
requestAnimationFrame(loop);