INTEL ART 2027 G

<!doctype html>

<head>

<title>Special Warfare Fixed</title>

<style>

html,body{height:100%;margin:0;font-family:system-ui,Segoe UI,Roboto,Arial;background:#111;color:#eee}

#ui{display:flex;gap:12px;padding:12px;background:#1a1a1a;border-bottom:2px solid #222;align-items:center}

button{background:#2a2a2a;border:1px solid #444;color:#fff;padding:8px;border-radius:6px;cursor:pointer}

button.selected{outline:3px solid #4caf50}

#gameWrap{display:flex;padding:12px;gap:12px}

#canvasWrap{background:#0b0b0b;padding:6px;border-radius:8px}

canvas{background:linear-gradient(#0f1720,#081116);display:block;border:2px solid #222}

#sidebar{width:260px;background:#0f1112;border-radius:8px;padding:12px}

.stat{margin:6px 0}

.small{font-size:13px;color:#bbb}

#message{margin-top:12px;padding:10px;border-radius:6px;background:#121212;color:#f8f8f8}

footer{padding:12px;color:#888;font-size:13px}

</style>

</head>

<body>

<div style=”font-weight:700;font-size:18px”>Special Warfare: European Defense</div>

<div class=”small”>Place bunkers & towers. Protect left edge — red soldiers = lose.</div>

</div>

</div>

<div style=”font-weight:700″>Build</div>

<button id=”btn-small”>Small Bunker (free)</button>

<button id=”btn-bunker”>Bunker (cost 50)</button>

<button id=”btn-tower”>Tower (cost 120)</button>

</div>

<div class=”stat”>Money: <span id=”money”>200</span></div>

<div class=”stat”>Enemies Left: <span id=”enemiesLeft”>0</span></div>

<div class=”stat”>Lives: <span id=”lives”>1</span></div>

</div>

<button id=”startWave”>Start Wave</button>

<button id=”pause”>Pause</button>

<button id=”restart”>Restart</button>

</div>

<ul>

<li>Click build button, then click canvas to place.</li>

<li>Small bunkers free. Buildings shoot enemies automatically.</li>

<li>Red soldiers reaching left = lose.</li>

</ul>

</div>

<footer>HTML-only fixed version</footer>

const canvas=document.getElementById(‘game’);

const ctx=canvas.getContext(‘2d’);

let W=canvas.width,H=canvas.height;

// UI

const btnSmall=document.getElementById(‘btn-small’);

const btnBunker=document.getElementById(‘btn-bunker’);

const btnTower=document.getElementById(‘btn-tower’);

const startWaveBtn=document.getElementById(‘startWave’);

const pauseBtn=document.getElementById(‘pause’);

const restartBtn=document.getElementById(‘restart’);

const moneyEl=document.getElementById(‘money’);

const waveEl=document.getElementById(‘wave’);

const enemiesLeftEl=document.getElementById(‘enemiesLeft’);

let SCALE=0.6;

let selectedBuild=null,paused=false,gameOver=false;

let money=200,currentWave=0,enemies=[],bullets=[],buildings=[],skulls=[],spawnQueue=[],enemiesAlive=0;

const COST={small:0,bunker:50,tower:120};

const LEFT_EDGE=0;

let mouse={x:0,y:0};

// ======= ENTITIES =======

class Building{

constructor(x,y,type){

this.x=x;this.y=y;this.type=type;

this.width=40*SCALE;this.height=40*SCALE;this.fireCooldown=0;

if(type===’small’){this.range=140*SCALE;this.damage=8;this.fireRate=0.35;this.maxHP=30;}

if(type===’bunker’){this.range=200*SCALE;this.damage=18;this.fireRate=0.6;this.maxHP=80;}

if(type===’tower’){this.range=260*SCALE;this.damage=28;this.fireRate=1.1;this.maxHP=100;}

this.hp=this.maxHP;

}

center(){return {x:this.x+this.width/2,y:this.y+this.height/2}}

update(dt){

if(this.hp<=0) return;

this.fireCooldown-=dt;

if(this.fireCooldown<=0){

let c=this.center();let nearest=null,best=1e9;

for(const e of enemies){if(e.hp>0){let d=Math.hypot(c.x-e.x,c.y-e.y);if(d<=this.range&&d<best){best=d;nearest=e;}}}

if(nearest){bullets.push(new Bullet(c.x,c.y,{x:nearest.x,y:nearest.y},this.damage,false));this.fireCooldown=this.fireRate;}

}

draw(ctx){

ctx.save();ctx.translate(this.x,this.y);

let w=this.width,h=this.height;

ctx.fillStyle=this.type===’small’?’#6e6e6e’:this.type===’bunker’?’#505050′:’#a8a8a8′;

ctx.fillRect(0,h*0.25,w,h*0.75);ctx.fillRect(w*0.125,0,w*0.75,h*0.375);

ctx.fillStyle=’#000′;ctx.fillRect(w/2 – w*0.2,h*0.125,w*0.4,h*0.066);

ctx.fillStyle=’#222′;ctx.fillRect(0,-h*0.15,w,h*0.125);

ctx.fillStyle=’#4caf50′;ctx.fillRect(0,-h*0.15,w*(this.hp/this.maxHP),h*0.125);

ctx.restore();

}

class Enemy{

constructor(x,y,type){

this.x=x;this.y=y;this.type=type;

this.speed=(type===’red’?60*SCALE:45*SCALE);

this.hp=(type===’red’?40:60);this.maxHP=this.hp;

this.radius=12*SCALE;this.fireCooldown=0;

}

update(dt){

if(this.hp<=0) return;

if(this.type===’red’){this.x-=this.speed*dt;}

else{

let nearest=null,best=9999;

for(const b of buildings){if(b.hp>0){let d=Math.hypot(this.x-(b.x+b.width/2),this.y-(b.y+b.height/2));if(d<best){best=d;nearest=b;}}}

if(nearest&&best<=180*SCALE){this.fireCooldown-=dt;if(this.fireCooldown<=0){bullets.push(new Bullet(this.x,this.y,{x:nearest.x+nearest.width/2,y:nearest.y+nearest.height/2},12,true));this.fireCooldown=1.0;}}

else this.x-=this.speed*dt;

}

draw(ctx){

ctx.save();ctx.translate(this.x,this.y);

if(this.type===’red’){ctx.fillStyle=’#fff’;ctx.strokeStyle=’#000′;ctx.lineWidth=2*SCALE;ctx.beginPath();ctx.arc(0,0,this.radius,0,2*Math.PI)

;ctx.fill();ctx.stroke();ctx.beginPath();ctx.fillStyle=’#000′;ctx.arc(-4*SCALE,-3*SCALE,2.5*SCALE,0,2*Math.PI);ctx.fill()

;ctx.beginPath();ctx.arc(4*SCALE,-3*SCALE,2.5*SCALE,0,2*Math.PI);ctx.fill();ctx.beginPath();ctx.moveTo(-6*SCALE,6*SCALE);ctx.lineTo(6*SCALE,6*SCALE);ctx.stroke();}

else{ctx.fillStyle=’#111′;ctx.beginPath();ctx.arc(0,0,this.radius,0,2*Math.PI);ctx.fill();ctx.fillStyle=’#222′;ctx.fillRect

(-16*SCALE,-22*SCALE,32*SCALE,6*SCALE);ctx.fillStyle=’#4caf50′;ctx.fillRect(-16*SCALE,-22*SCALE,32*SCALE*(this.hp/this.maxHP),6*SCALE);}

ctx.restore();

}

class Bullet{

constructor(x,y,target,damage,fromEnemy){

this.x=x;this.y=y;this.damage=damage;this.fromEnemy=fromEnemy;

this.speed=420*SCALE;this.radius=4*SCALE;this.active=true;

let dx=target.x-x,dy=target.y-y,L=Math.hypot(dx,dy)||1;

this.vx=dx/L*this.speed;this.vy=dy/L*this.speed;

}

update(dt){

if(!this.active) return;

this.x+=this.vx*dt;this.y+=this.vy*dt;

if(this.fromEnemy){for(const b of buildings){if(b.hp>0&&this.x>=b.x&&this.x<=b.x+b.width&&this.y>=b.y&&this.y<=b.y+b.height){b.hp-=this.damage;this.active=false;}}}

else{for(const e of enemies){if(e.hp>0&&Math.hypot(this.x-e.x,this.y-e.y)<this.radius+e.radius){if(e.type===’red’) e.hp=0; else e.hp-=this.damage;this.active=false;}}}

if(this.x<-50||this.x>W+50||this.y<-50||this.y>H+50) this.active=false;

}

draw(ctx){

ctx.save();ctx.beginPath();ctx.strokeStyle=’yellow’;ctx.lineWidth=3*SCALE;ctx.setLineDash([6,4]);

let len=10*SCALE,nx=this.x-(this.vx/this.speed)*len,ny=this.y-(this.vy/this.speed)*len;

ctx.moveTo(nx,ny);ctx.lineTo(this.x,this.y);ctx.stroke();ctx.setLineDash([]);ctx.restore();

}

// ======= SPAWN & MOUSE =======

function startNextWave(){

if(gameOver) return;

currentWave++;waveEl.textContent=currentWave;

spawnQueue=[];for(let i=0;i<100*currentWave;i++) spawnQueue.push(‘red’);for(let i=0;i<Math.floor(currentWave/2)+1;i++) spawnQueue.push(‘black’);

enemiesAlive+=spawnQueue.length;enemiesLeftEl.textContent=enemiesAlive;

}

canvas.addEventListener(‘mousemove’,e=>{const r=canvas.getBoundingClientRect();mouse.x=e.clientX-r.left;mouse.y=e.clientY-r.top;});

canvas.addEventListener(‘click’,e=>{if(!selectedBuild||gameOver) return;const r=canvas.getBoundingClientRect();let mx=e.clientX-r.left,my=e.clientY-r.top;if(mx<80) return;if(money<COST[selectedBuild]) return;buildings.push(new Building(mx-20*SCALE,my-20*SCALE,selectedBuild));money-=COST[selectedBuild];moneyEl.textContent=money;});

// ======= UI =======

function setSelected(type){selectedBuild=type;[btnSmall,btnBunker,btnTower].forEach(b=>b.classList.remove(‘selected’));if(type===’small’) btnSmall.classList.add(‘selected’);if(type===’bunker’) btnBunker.classList.add(‘selected’);if(type===’tower’) btnTower.classList.add(‘selected’);}

btnSmall.onclick=()=>setSelected(‘small’);btnBunker.onclick=()=>setSelected(‘bunker’);btnTower.onclick=()=>setSelected(‘tower’);

startWaveBtn.onclick=()=>{if(!spawnQueue.length) startNextWave();};

pauseBtn.onclick=()=>{paused=!paused;pauseBtn.textContent=paused?’Unpause’:’Pause’;};

restartBtn.onclick=()=>resetGame();

// ======= GAME =======

function resetGame(){

money=200;currentWave=0;gameOver=false;buildings=[];bullets=[];enemies=[];skulls=[];enemiesAlive=0;spawnQueue=[];

buildings.push(new Building(120*SCALE,H/2-20*SCALE,’bunker’));buildings.push(new Building(200*SCALE,H/2-80*SCALE,’tower’));

moneyEl.textContent=money;enemiesLeftEl.textContent=enemiesAlive;waveEl.textContent=currentWave;

}

resetGame();

let last=performance.now();

function loop(now){

let dt=Math.min(0.05,(now-last)/1000);last=now;if(!paused&&!gameOver) update(dt);draw();requestAnimationFrame(loop);

}

requestAnimationFrame(loop);

function update(dt){

if(spawnQueue.length>0){while(spawnQueue.length){let t=spawnQueue.shift();let y=40*SCALE+Math.random()*(H-80*SCALE);enemies.push(new Enemy(W+30,y,t));}}

buildings.forEach(b=>b.update(dt));enemies.forEach(e=>e.update(dt));bullets.forEach(b=>b.update(dt));

for(let i=enemies.length-1;i>=0;i–){let e=enemies[i];if(e.hp<=0){skulls.push({x:e.x,y:e.y});money+=(e.type===’red’?8:14);enemies.splice(i,1);enemiesAlive–;moneyEl.textContent=money;enemiesLeftEl.textContent=enemiesAlive;}else if(e.type===’red’&&e.x-e.radius<=LEFT_EDGE){gameOver=true;}}

for(let i=buildings.length-1;i>=0;i–) if(buildings[i].hp<=0) buildings.splice(i,1);

bullets=bullets.filter(b=>b.active);

}

function draw(){

ctx.clearRect(0,0,W,H);

ctx.fillStyle=’#2b3a3f’;ctx.fillRect(0,0,6,H);

// skulls under enemies

for(const s of skulls){ctx.save();ctx.fillStyle=’#fff’;ctx.strokeStyle=’#000′;ctx.lineWidth=2*SCALE;ctx.beginPath();ctx.arc

(s.x,s.y,12*SCALE,0,2*Math.PI);ctx.fill();ctx.stroke();ctx.beginPath();ctx.fillStyle=’#000′;ctx.arc(s.x-4*SCALE,s.y-3*SCALE,2.5*SCALE,0,2*Math.PI);ctx.fill();ctx.beginPath();ctx.arc(s.x+4*SCALE,s.y-3*SCALE,2.5*SCALE,0,2*Math.PI);ctx.fill();ctx.beginPath();ctx.moveTo(s.x-6*SCALE,s.y+6*SCALE);ctx.lineTo(s.x+6*SCALE,s.y+6*SCALE);ctx.stroke();ctx.restore();}

buildings.forEach(b=>b.draw(ctx));enemies.forEach(e=>e.draw(ctx));bullets.forEach(b=>b.draw(ctx));

if(selectedBuild&&!gameOver){ctx.save();ctx.globalAlpha=0.6;ctx.fillStyle=selectedBuild===’small’?’rgba(110,110,110,0.6)’:selectedBuild===

‘bunker’?’rgba(80,80,80,0.6)’:’rgba(168,168,168,0.6)’;ctx.fillRect(mouse.x-(40*SCALE)/2,mouse.y-(40*SCALE)/2,40*SCALE,40*SCALE);ctx.restore();}

ctx.save();ctx.fillStyle=’#fff’;ctx.font=`${14*SCALE}px monospace`;ctx.fillText(‘Money: ‘+money,10,20);ctx.fillText(‘Wave: ‘+currentWave,10,40);ctx.restore();

if(gameOver){ctx.save();ctx.fillStyle=’rgba(0,0,0,0.6)’;ctx.fillRect(0,0,W,H);ctx.fillStyle=’#ff6b6b’;ctx.font=

’28px serif’;ctx.textAlign=’center’;ctx.fillText(‘YOU LOSE — A RED SOLDIER MADE IT’,W/2,H/2-10);

ctx.fillStyle=’#fff’;ctx.font=’16px serif’;ctx.fillText(‘Press Restart to try again’,W/2,H/2+30);ctx.restore();}

}

</script>

</body>

</html>