Attack on Titan

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Attack on Titan</title>
<style>
*{box-sizing:border-box}
body{
 margin:0;
 background:#17232c;
 color:white;
 font-family:Arial;
 overflow:hidden;
}
canvas{
 display:block;
 width:100vw;
 height:100vh;
 background:linear-gradient(#87b5c5,#d2d1a2);
}
#ui{
 position:absolute;
 top:15px;
 left:15px;
 font-size:17px;
 text-shadow:2px 2px 3px black;
}
#controls{
 position:absolute;
 bottom:20px;
 width:100%;
 display:flex;
 justify-content:space-around;
}
button{
 background:#263c49;
 color:white;
 border:2px solid white;
 border-radius:12px;
 padding:16px;
 font-size:17px;
}
</style>
</head>
<body>

<div id="ui">
 ❤️ Здоровье: <span id="hp">100</span><br>
 ⚔ Уничтожено титанов: <span id="score">0</span>
</div>

<canvas id="game"></canvas>

<div id="controls">
<button id="left">⬅</button>
<button id="attack">⚔ АТАКА</button>
<button id="right">➡</button>
<button id="jump">⬆</button>
</div>

<script>
const canvas=document.getElementById("game");
const ctx=canvas.getContext("2d");

function resize(){
 canvas.width=innerWidth;
 canvas.height=innerHeight;
}
resize();
addEventListener("resize",resize);

let player={
 x:canvas.width/2,
 y:canvas.height-100,
 hp:100,
 jump:0,
 attack:false
};

let titans=[];
let score=0;
let keys={};

function spawnTitan(){
 titans.push({
  x:Math.random()*(canvas.width-100)+50,
  y:canvas.height-100,
  size:65+Math.random()*35,
  hp:3,
  speed:0.4+Math.random()*0.7
 });
}

for(let i=0;i<4;i++)spawnTitan();

function drawPlayer(){
 ctx.fillStyle="#263e52";
 ctx.fillRect(player.x-12,player.y-35-player.jump,24,35);

 ctx.fillStyle="#e4b99a";
 ctx.beginPath();
 ctx.arc(player.x,player.y-43-player.jump,10,0,Math.PI*2);
 ctx.fill();

 ctx.fillStyle="#444";
 ctx.fillRect(player.x-19,player.y-10-player.jump,12,10);
 ctx.fillRect(player.x+7,player.y-10-player.jump,12,10);

 if(player.attack){
  ctx.strokeStyle="#fff";
  ctx.lineWidth=4;
  ctx.beginPath();
  ctx.arc(player.x,player.y-25-player.jump,45,0,Math.PI);
  ctx.stroke();
 }
}

function drawTitan(t){
 let s=t.size;

 ctx.fillStyle="#c58e76";
 ctx.fillRect(t.x-s*.22,t.y-s*.85,s*.44,s*.85);

 ctx.fillStyle="#b97865";
 ctx.beginPath();
 ctx.arc(t.x,t.y-s*.95,s*.3,0,Math.PI*2);
 ctx.fill();

 ctx.fillStyle="#fff";
 ctx.fillRect(t.x-s*.17,t.y-s*.99,9,6);
 ctx.fillRect(t.x+s*.08,t.y-s*.99,9,6);

 ctx.fillStyle="#694b42";
 ctx.fillRect(t.x-s*.4,t.y-s*.65,s*.18,s*.55);
 ctx.fillRect(t.x+s*.22,t.y-s*.65,s*.18,s*.55);

 ctx.fillStyle="#292929";
 ctx.fillRect(t.x-s*.2,t.y-s*.35,s*.15,s*.35);
 ctx.fillRect(t.x+s*.05,t.y-s*.35,s*.15,s*.35);

 ctx.fillStyle="red";
 ctx.fillRect(t.x-s*.25,t.y-s*1.2,s*.5,5);
 ctx.fillStyle="lime";
 ctx.fillRect(t.x-s*.25,t.y-s*1.2,s*.5*(t.hp/3),5);
}

function update(){
 ctx.clearRect(0,0,canvas.width,canvas.height);

 // Ground
 ctx.fillStyle="#657d48";
 ctx.fillRect(0,canvas.height-70,canvas.width,70);

 // Buildings
 for(let i=0;i<canvas.width;i+=130){
  ctx.fillStyle="#8c806c";
  ctx.fillRect(i,canvas.height-160,90,90);
  ctx.fillStyle="#d7bd8c";
  ctx.fillRect(i+15,canvas.height-140,15,20);
 }

 if(keys.left)player.x-=4;
 if(keys.right)player.x+=4;

 player.x=Math.max(20,Math.min(canvas.width-20,player.x));

 if(player.jump>0)player.jump-=5;

 titans.forEach((t)=>{
  let dx=player.x-t.x;
  if(Math.abs(dx)>35)t.x+=Math.sign(dx)*t.speed;

  drawTitan(t);
 });

 drawPlayer();

 titans=titans.filter(t=>t.hp>0);

 document.getElementById("hp").textContent=player.hp;
 document.getElementById("score").textContent=score;

 if(player.hp<=0){
  ctx.fillStyle="black";
  ctx.fillRect(0,0,canvas.width,canvas.height);
  ctx.fillStyle="red";
  ctx.font="40px Arial";
  ctx.textAlign="center";
  ctx.fillText("GAME OVER",canvas.width/2,canvas.height/2);
  return;
 }

 if(titans.length===0){
  spawnTitan();
  spawnTitan();
 }

 requestAnimationFrame(update);
}

function attack(){
 player.attack=true;

 titans.forEach(t=>{
  if(Math.abs(t.x-player.x)<100){
   t.hp--;
   if(t.hp<=0)score++;
  }
 });

 setTimeout(()=>player.attack=false,250);
}

document.getElementById("left").ontouchstart=()=>keys.left=true;
document.getElementById("left").ontouchend=()=>keys.left=false;
document.getElementById("right").ontouchstart=()=>keys.right=true;
document.getElementById("right").ontouchend=()=>keys.right=false;

document.getElementById("left").onmousedown=()=>keys.left=true;
document.getElementById("left").onmouseup=()=>keys.left=false;
document.getElementById("right").onmousedown=()=>keys.right=true;
document.getElementById("right").onmouseup=()=>keys.right=false;

document.getElementById("attack").onclick=attack;

document.getElementById("jump").onclick=()=>{
 if(player.jump===0)player.jump=100;
};

document.addEventListener("keydown",e=>{
 if(e.key==="ArrowLeft")keys.left=true;
 if(e.key==="ArrowRight")keys.right=true;
 if(e.key===" "){
  if(player.jump===0)player.jump=100;
 }
 if(e.key==="x")attack();
});

document.addEventListener("keyup",e=>{
 if(e.key==="ArrowLeft")keys.left=false;
 if(e.key==="ArrowRight")keys.right=false;
});

update();
</script>
</body>
</html>