Shadow Strike

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shadow Strike</title>
<style>
:root {
  --blue: #168cff;
  --dark: #101827;
  --panel: rgba(8, 18, 35, .78);
}
* { box-sizing: border-box; }
body {
  margin: 0;
  overflow: hidden;
  background: #07111f;
  color: white;
  font-family: Arial, Helvetica, sans-serif;
  user-select: none;
}
canvas {
  display: block;
  cursor: crosshair;
}
#hud {
  position: fixed;
  top: 18px;
  left: 18px;
  min-width: 220px;
  padding: 14px 16px;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 12px;
  background: var(--panel);
  box-shadow: 0 8px 25px rgba(0,0,0,.35);
  font-size: 17px;
  line-height: 1.55;
  text-shadow: 2px 2px 3px #000;
  backdrop-filter: blur(8px);
}
#title {
  color: #ffd84d;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: 1px;
}
#healthBar {
  width: 180px;
  height: 10px;
  margin-top: 4px;
  overflow: hidden;
  border-radius: 8px;
  background: #3b1720;
}
#healthFill {
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #ff3d3d, #ffb52e);
  transition: width .15s;
}
#help {
  position: fixed;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  padding: 9px 15px;
  border-radius: 10px;
  background: rgba(8,18,35,.72);
  color: #eaf4ff;
  font-size: 14px;
  text-shadow: 1px 1px 2px #000;
  backdrop-filter: blur(6px);
}
#crosshair {
  position: fixed;
  width: 22px;
  height: 22px;
  pointer-events: none;
  transform: translate(-50%, -50%);
}
#crosshair::before,
#crosshair::after {
  content: "";
  position: absolute;
  background: white;
  box-shadow: 0 0 4px #000;
}
#crosshair::before {
  width: 2px;
  height: 22px;
  left: 10px;
}
#crosshair::after {
  width: 22px;
  height: 2px;
  top: 10px;
}
</style>
</head>
<body>
<div id="hud">
  <div id="title">SHADOW STRIKE</div>
  <div>❤️ Health: <span id="hp">100</span></div>
  <div id="healthBar"><div id="healthFill"></div></div>
  <div>🎯 Eliminations: <span id="kills">0</span></div>
  <div>🌪️ Storm: <span id="stormText">100%</span></div>
</div>
<div id="help">Move: WASD / Arrow Keys &nbsp; • &nbsp; Aim: Mouse &nbsp; • &nbsp; Shoot: Click</div>
<div id="crosshair"></div>
<canvas id="game"></canvas>
<script>
const canvas = document.getElementById("game");
const ctx = canvas.getContext("2d");
let width = innerWidth;
let height = innerHeight;
function resize() {
  width = canvas.width = innerWidth;
  height = canvas.height = innerHeight;
  if (!started) {
    player.x = width / 2;
    player.y = height / 2;
  }
}
addEventListener("resize", resize);
const player = {
  x: width / 2,
  y: height / 2,
  speed: 4.2,
  hp: 100,
  radius: 22
};
const keys = {};
const bullets = [];
const enemies = [];
let kills = 0;
let started = false;
let gameOver = false;
let storm = 900;
let lastTime = performance.now();
const mouse = { x: width / 2, y: height / 2 };
function randomEdgePosition() {
  const side = Math.floor(Math.random() * 4);
  if (side === 0) return { x: Math.random() * width, y: -40 };
  if (side === 1) return { x: width + 40, y: Math.random() * height };
  if (side === 2) return { x: Math.random() * width, y: height + 40 };
  return { x: -40, y: Math.random() * height };
}
function spawnEnemy() {
  const position = randomEdgePosition();
  enemies.push({
    x: position.x,
    y: position.y,
    hp: 3,
    speed: 0.65 + Math.random() * 0.65,
    radius: 20,
    wobble: Math.random() * Math.PI * 2
  });
}
for (let i = 0; i < 8; i++) spawnEnemy();
addEventListener("keydown", event => {
  keys[event.key.toLowerCase()] = true;
});
addEventListener("keyup", event => {
  keys[event.key.toLowerCase()] = false;
});
canvas.addEventListener("mousemove", event => {
  mouse.x = event.clientX;
  mouse.y = event.clientY;
  document.getElementById("crosshair").style.left = `${mouse.x}px`;
  document.getElementById("crosshair").style.top = `${mouse.y}px`;
});
canvas.addEventListener("click", () => {
  if (gameOver) return;
  const angle = Math.atan2(mouse.y - player.y, mouse.x - player.x);
  bullets.push({
    x: player.x + Math.cos(angle) * 25,
    y: player.y + Math.sin(angle) * 25,
    vx: Math.cos(angle) * 11,
    vy: Math.sin(angle) * 11,
    life: 70
  });
});
function roundedRect(x, y, w, h, r, fill, stroke) {
  ctx.beginPath();
  ctx.roundRect(x, y, w, h, r);
  if (fill) {
    ctx.fillStyle = fill;
    ctx.fill();
  }
  if (stroke) {
    ctx.strokeStyle = stroke;
    ctx.stroke();
  }
}
function drawBackground(time) {
  const sky = ctx.createLinearGradient(0, 0, 0, height);
  sky.addColorStop(0, "#4b9ed1");
  sky.addColorStop(.48, "#8ed0d0");
  sky.addColorStop(1, "#4d9b62");
  ctx.fillStyle = sky;
  ctx.fillRect(0, 0, width, height);
  ctx.fillStyle = "rgba(255,255,255,.18)";
  for (let i = 0; i < 7; i++) {
    const x = (i * 260 + time * .012) % (width + 300) - 150;
    const y = 90 + (i % 3) * 75;
    ctx.beginPath();
    ctx.ellipse(x, y, 90, 24, 0, 0, Math.PI * 2);
    ctx.ellipse(x + 55, y - 12, 65, 28, 0, 0, Math.PI * 2);
    ctx.fill();
  }
  ctx.fillStyle = "#3f8b58";
  ctx.beginPath();
  ctx.moveTo(0, height * .48);
  ctx.lineTo(width * .18, height * .32);
  ctx.lineTo(width * .35, height * .48);
  ctx.lineTo(width * .55, height * .28);
  ctx.lineTo(width * .78, height * .48);
  ctx.lineTo(width, height * .34);
  ctx.lineTo(width, height);
  ctx.lineTo(0, height);
  ctx.closePath();
  ctx.fill();
  ctx.fillStyle = "#6dbb68";
  ctx.fillRect(0, height * .48, width, height * .52);
  ctx.strokeStyle = "rgba(255,255,255,.13)";
  ctx.lineWidth = 1;
  const grid = 70;
  for (let x = 0; x < width; x += grid) {
    ctx.beginPath();
    ctx.moveTo(x, height * .48);
    ctx.lineTo(x, height);
    ctx.stroke();
  }
  for (let y = height * .48; y < height; y += grid) {
    ctx.beginPath();
    ctx.moveTo(0, y);
    ctx.lineTo(width, y);
    ctx.stroke();
  }
  for (let i = 0; i < 18; i++) {
    const x = (i * 173) % width;
    const y = height * .55 + ((i * 97) % Math.max(1, height * .4));
    ctx.fillStyle = i % 2 ? "#2f7d4b" : "#4b9b55";
    ctx.beginPath();
    ctx.arc(x, y, 8 + (i % 4) * 3, 0, Math.PI * 2);
    ctx.fill();
  }
}
function drawStorm() {
  const centerX = width / 2;
  const centerY = height / 2;
  ctx.save();
  ctx.fillStyle = "rgba(91, 35, 170, .22)";
  ctx.beginPath();
  ctx.rect(0, 0, width, height);
  ctx.arc(centerX, centerY, storm, 0, Math.PI * 2, true);
  ctx.fill("evenodd");
  ctx.strokeStyle = "#b66cff";
  ctx.shadowColor = "#8d3cff";
  ctx.shadowBlur = 18;
  ctx.lineWidth = 8;
  ctx.beginPath();
  ctx.arc(centerX, centerY, storm, 0, Math.PI * 2);
  ctx.stroke();
  ctx.restore();
}
function drawDefaultSkin(x, y, angle) {
  ctx.save();
  ctx.translate(x, y);
  ctx.rotate(angle);
  ctx.shadowColor = "rgba(0,0,0,.35)";
  ctx.shadowBlur = 12;
  ctx.shadowOffsetY = 8;
  // Legs
  roundedRect(-13, 12, 10, 22, 4, "#26364d");
  roundedRect(3, 12, 10, 22, 4, "#26364d");
  // Boots
  roundedRect(-16, 29, 14, 7, 3, "#111827");
  roundedRect(2, 29, 14, 7, 3, "#111827");
  // Default-style blue shirt
  roundedRect(-18, -8, 36, 28, 9, "#2f80ed", "#b9e5ff");
  // Belt
  ctx.fillStyle = "#202b3d";
  ctx.fillRect(-17, 10, 34, 6);
  ctx.fillStyle = "#f4c542";
  ctx.fillRect(-4, 9, 8, 8);
  // Arms
  roundedRect(-27, -5, 10, 25, 5, "#2f80ed");
  roundedRect(17, -5, 10, 25, 5, "#2f80ed");
  // Hands
  ctx.fillStyle = "#f0b27a";
  ctx.beginPath();
  ctx.arc(-22, 21, 6, 0, Math.PI * 2);
  ctx.arc(22, 21, 6, 0, Math.PI * 2);
  ctx.fill();
  // Neck
  ctx.fillStyle = "#e7a66f";
  ctx.fillRect(-6, -17, 12, 8);
  // Head
  ctx.fillStyle = "#f0b27a";
  ctx.beginPath();
  ctx.arc(0, -25, 14, 0, Math.PI * 2);
  ctx.fill();
  // Hair
  ctx.fillStyle = "#5a321f";
  ctx.beginPath();
  ctx.arc(0, -30, 14, Math.PI, Math.PI * 2);
  ctx.fill();
  ctx.fillRect(-13, -31, 26, 7);
  // Face detail
  ctx.fillStyle = "#2b1b16";
  ctx.beginPath();
  ctx.arc(5, -25, 1.5, 0, Math.PI * 2);
  ctx.fill();
  // Weapon
  ctx.shadowColor = "transparent";
  roundedRect(17, -2, 30, 7, 3, "#202936");
  roundedRect(39, -4, 12, 5, 2, "#111827");
  ctx.fillStyle = "#6b7280";
  ctx.fillRect(25, -4, 8, 3);
  ctx.restore();
}
function drawEnemy(enemy) {
  const angle = Math.atan2(player.y - enemy.y, player.x - enemy.x);
  const bob = Math.sin(enemy.wobble) * 2;
  ctx.save();
  ctx.translate(enemy.x, enemy.y + bob);
  ctx.rotate(angle);
  ctx.shadowColor = "rgba(0,0,0,.4)";
  ctx.shadowBlur = 10;
  ctx.shadowOffsetY = 6;
  roundedRect(-15, 4, 30, 25, 8, "#b91c3c", "#ff9a9a");
  roundedRect(-10, -22, 20, 22, 8, "#f0445d");
  ctx.fillStyle = "#ffd0a8";
  ctx.beginPath();
  ctx.arc(0, -12, 8, 0, Math.PI * 2);
  ctx.fill();
  ctx.fillStyle = "#35152a";
  ctx.fillRect(-9, -20, 18, 6);
  roundedRect(-23, 7, 9, 20, 4, "#8f1734");
  roundedRect(14, 7, 9, 20, 4, "#8f1734");
  ctx.restore();
  const barWidth = 42;
  ctx.fillStyle = "rgba(0,0,0,.55)";
  ctx.fillRect(enemy.x - barWidth / 2, enemy.y - 38, barWidth, 5);
  ctx.fillStyle = "#ff4d5e";
  ctx.fillRect(enemy.x - barWidth / 2, enemy.y - 38, barWidth * (enemy.hp / 3), 5);
}
function update(delta) {
  const movementX =
    (keys.d || keys.arrowright ? 1 : 0) -
    (keys.a || keys.arrowleft ? 1 : 0);
  const movementY =
    (keys.s || keys.arrowdown ? 1 : 0) -
    (keys.w || keys.arrowup ? 1 : 0);
  const length = Math.hypot(movementX, movementY) || 1;
  player.x += movementX / length * player.speed * delta;
  player.y += movementY / length * player.speed * delta;
  player.x = Math.max(30, Math.min(width - 30, player.x));
  player.y = Math.max(45, Math.min(height - 35, player.y));
  storm = Math.max(150, storm - .035 * delta);
  if (Math.hypot(player.x - width / 2, player.y - height / 2) > storm) {
    player.hp -= .08 * delta;
  }
  for (let i = bullets.length - 1; i >= 0; i--) {
    const bullet = bullets[i];
    bullet.x += bullet.vx * delta;
    bullet.y += bullet.vy * delta;
    bullet.life -= delta;
    if (
      bullet.life <= 0 ||
      bullet.x < -20 || bullet.x > width + 20 ||
      bullet.y < -20 || bullet.y > height + 20
    ) {
      bullets.splice(i, 1);
      continue;
    }
    for (let j = enemies.length - 1; j >= 0; j--) {
      const enemy = enemies[j];
      if (Math.hypot(bullet.x - enemy.x, bullet.y - enemy.y) < enemy.radius + 7) {
        enemy.hp--;
        bullets.splice(i, 1);
        if (enemy.hp <= 0) {
          enemies.splice(j, 1);
          kills++;
          spawnEnemy();
        }
        break;
      }
    }
  }
  for (const enemy of enemies) {
    const angle = Math.atan2(player.y - enemy.y, player.x - enemy.x);
    enemy.x += Math.cos(angle) * enemy.speed * delta;
    enemy.y += Math.sin(angle) * enemy.speed * delta;
    enemy.wobble += .08 * delta;
    if (Math.hypot(player.x - enemy.x, player.y - enemy.y) < 35) {
      player.hp -= .12 * delta;
    }
  }
}
function draw(time) {
  drawBackground(time);
  drawStorm();
  for (const bullet of bullets) {
    ctx.save();
    ctx.shadowColor = "#ffe45e";
    ctx.shadowBlur = 14;
    ctx.fillStyle = "#fff3a1";
    ctx.beginPath();
    ctx.arc(bullet.x, bullet.y, 5, 0, Math.PI * 2);
    ctx.fill();
    ctx.restore();
  }
  for (const enemy of enemies) drawEnemy(enemy);
  const playerAngle = Math.atan2(mouse.y - player.y, mouse.x - player.x);
  drawDefaultSkin(player.x, player.y, playerAngle);
  document.getElementById("hp").textContent = Math.max(0, Math.floor(player.hp));
  document.getElementById("kills").textContent = kills;
  document.getElementById("healthFill").style.width =
    `${Math.max(0, player.hp)}%`;
  document.getElementById("stormText").textContent =
    `${Math.max(0, Math.floor((storm / 900) * 100))}%`;
}
function endGame() {
  gameOver = true;
  ctx.fillStyle = "rgba(3, 8, 18, .82)";
  ctx.fillRect(0, 0, width, height);
  ctx.textAlign = "center";
  ctx.fillStyle = "#ffdf5d";
  ctx.font = "900 58px Arial";
  ctx.fillText("ELIMINATED", width / 2, height / 2 - 15);
  ctx.fillStyle = "white";
  ctx.font = "20px Arial";
  ctx.fillText(`Eliminations: ${kills}`, width / 2, height / 2 + 30);
  ctx.fillText("Refresh the page to play again", width / 2, height / 2 + 65);
}
function loop(time) {
  const delta = Math.min(2.5, (time - lastTime) / 16.67);
  lastTime = time;
  if (!gameOver) {
    update(delta);
    draw(time);
    if (player.hp <= 0) endGame();
  }
  requestAnimationFrame(loop);
}
resize();
started = true;
requestAnimationFrame(loop);
</script>
</body>
</html>