抗战大刀 - 建模

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>抗战大刀 - 建模</title>
<style>
  body { margin: 0; background: #1a1a1a; display: flex; justify-content: center; align-items: center; height: 100vh; overflow: hidden; font-family: sans-serif; }
  canvas { background: #111; border-radius: 8px; cursor: grab; }
  canvas:active { cursor: grabbing; }
</style>
</head>
<body>
<canvas id="game" width="900" height="600"></canvas>
<script>
const canvas = document.getElementById('game');
const ctx = canvas.getContext('2d');

const camera = { x: 450, y: 300, zoom: 1.2, rotation: 0, isDragging: false, lastX: 0, lastY: 0 };

function drawDadao(ctx) {
  // 刀身（主体）
  ctx.fillStyle = '#C0C8D0';
  ctx.beginPath();
  ctx.moveTo(0, -10);       // 刀尖底部
  ctx.lineTo(0, 10);        // 刀尖顶部
  ctx.lineTo(300, 30);      // 刀身下弧线
  ctx.lineTo(300, -30);     // 刀身上弧线
  ctx.closePath();
  ctx.fill();

  // 刀刃高光
  ctx.strokeStyle = '#E8EEF5';
  ctx.lineWidth = 2;
  ctx.beginPath();
  ctx.moveTo(5, -8);
  ctx.lineTo(295, -28);
  ctx.stroke();

  // 血槽（两条）
  ctx.strokeStyle = '#8A9AAA';
  ctx.lineWidth = 3;
  ctx.beginPath();
  ctx.moveTo(15, -5);
  ctx.lineTo(280, -22);
  ctx.stroke();
  ctx.beginPath();
  ctx.moveTo(15, 5);
  ctx.lineTo(280, 22);
  ctx.stroke();

  // 刀背（粗线）
  ctx.strokeStyle = '#5A6A7A';
  ctx.lineWidth = 6;
  ctx.beginPath();
  ctx.moveTo(5, 12);
  ctx.lineTo(295, 33);
  ctx.stroke();

  // 护手（元宝形）
  ctx.fillStyle = '#8A7A5A';
  ctx.beginPath();
  ctx.moveTo(-10, -35);
  ctx.lineTo(10, -35);
  ctx.lineTo(15, 0);
  ctx.lineTo(10, 35);
  ctx.lineTo(-10, 35);
  ctx.lineTo(-15, 0);
  ctx.closePath();
  ctx.fill();

  // 刀柄
  ctx.fillStyle = '#4A3A2A';
  ctx.fillRect(-75, -10, 60, 20);

  // 刀柄缠绕纹路
  ctx.strokeStyle = '#2A1A0A';
  ctx.lineWidth = 1.5;
  for (let i = 0; i < 12; i++) {
    const x = -70 + i * 5;
    ctx.beginPath();
    ctx.moveTo(x, -10);
    ctx.lineTo(x + 3, 10);
    ctx.stroke();
  }

  // 刀环
  ctx.strokeStyle = '#8A7A5A';
  ctx.lineWidth = 5;
  ctx.beginPath();
  ctx.arc(-88, 0, 12, 0, Math.PI * 2);
  ctx.stroke();
}

function animate() {
  ctx.clearRect(0, 0, 900, 600);
  ctx.save();
  ctx.translate(camera.x, camera.y);
  ctx.rotate(camera.rotation);
  ctx.scale(camera.zoom, camera.zoom);
  ctx.translate(-camera.x, -camera.y);

  drawDadao(ctx);

  ctx.restore();
  requestAnimationFrame(animate);
}

canvas.addEventListener('contextmenu', e => e.preventDefault());
canvas.addEventListener('mousedown', (e) => {
  camera.isDragging = true; camera.lastX = e.clientX; camera.lastY = e.clientY;
  camera.button = e.button;
});
canvas.addEventListener('mousemove', (e) => {
  if (!camera.isDragging) return;
  const dx = e.clientX - camera.lastX, dy = e.clientY - camera.lastY;
  if (camera.button === 0) { camera.x += dx; camera.y += dy; }
  else camera.rotation += dx * 0.005;
  camera.lastX = e.clientX; camera.lastY = e.clientY;
});
canvas.addEventListener('mouseup', () => camera.isDragging = false);
canvas.addEventListener('wheel', (e) => {
  e.preventDefault();
  camera.zoom *= e.deltaY > 0 ? 0.9 : 1.1;
  camera.zoom = Math.max(0.3, Math.min(5, camera.zoom));
}, { passive: false });

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