大便超人 Doodieman

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>大便超人 Doodieman</title>
<style>
*{margin:0;padding:0;box-sizing:border-box;font-family:Arial}
body{background:#87ceeb;display:flex;flex-direction:column;align-items:center;padding:16px}
#gameBox{position:relative;width:620px;height:460px;background:#90ee90;border:4px solid #333;overflow:hidden}
#nameInput{margin:10px;padding:6px;font-size:18px;width:260px}
#startBtn{padding:6px 12px;font-size:18px;cursor:pointer;background:#c82423;color:white;border:none;border-radius:4px}
#victim{position:absolute;left:220px;top:60px;width:80px;height:180px}
#hero{position:absolute;right:40px;bottom:60px;width:110px;height:140px}
.panel{position:absolute;right:6px;top:10px;display:grid;grid-template-columns:repeat(2,1fr);gap:6px}
.skillBtn{width:44px;height:44px;border-radius:50%;border:2px solid #222;background:#ffd700;font-weight:bold;font-size:17px;cursor:pointer}
.skillBtn:disabled{background:#aaa;cursor:not-allowed}
#tip{margin:8px;font-size:17px;color:#222}
.effect{position:absolute;pointer-events:none;font-size:34px}
</style>
</head>
<body>
<div>
<input id="nameInput" placeholder="输入要折磨的名字">
<button id="startBtn">开始！</button>
</div>
<div id="tip">输入名字点开始，之后点右侧数字释放招式</div>
<div id="gameBox">
<div id="victim"></div>
<div id="hero"></div>
<div class="panel" id="skillPanel"></div>
</div>

<script>
const victimEl = document.getElementById('victim');
const heroEl = document.getElementById('hero');
const skillPanel = document.getElementById('skillPanel');
const nameInput = document.getElementById('nameInput');
const startBtn = document.getElementById('startBtn');
const tipEl = document.getElementById('tip');

const skills = [
  {label:"1",text:"💩",name:"空翻屎"},
  {label:"2",text:"💩",name:"躺屎"},
  {label:"3",text:"💩",name:"命中屎"},
  {label:"4",text:"💩",name:"巨屎"},
  {label:"5",text:"💨",name:"屁冲天撞"},
  {label:"6",text:"💩",name:"上头干屎"},
  {label:"7",text:"💣",name:"屎雷"},
  {label:"8",text:"🔫",name:"大便枪"},
  {label:"9",text:"🎾",name:"弹力屎"},
  {label:"10",text:"💩",name:"连环屎"},
  {label:"11",text:"🔥",name:"综合连击"},
];
let running = false;

function drawPerson(el, isHurt=false){
  const hurt = isHurt ? "filter:hue-rotate(20deg);opacity:0.75" : "";
  if(el === victimEl){
    el.innerHTML = `<svg viewBox="0 0 80 180" style="${hurt}">
      <circle cx="40" cy="22" r="14" fill="#ffd8b1"/>
      <line x1="40" y1="36" x2="40" y2="90" stroke="#222" stroke-width="6"/>
      <line x1="40" y1="50" x2="12" y2="72" stroke="#222" stroke-width="5"/>
      <line x1="40" y1="50" x2="68" y2="72" stroke="#222" stroke-width="5"/>
      <line x1="40" y1="90" x2="20" y2="155" stroke="#222" stroke-width="5"/>
      <line x1="40" y1="90" x2="60" y2="155" stroke="#222" stroke-width="5"/>
      <line x1="40" y1="8" x2="40" y2="0" stroke="#444" stroke-width="3"/>
    </svg>`;
  }else{
    el.innerHTML = `<svg viewBox="0 0 110 140" style="${hurt}">
      <circle cx="55" cy="26" r="18" fill="#e62020"/>
      <circle cx="48" cy="22" r="3" fill="#fff"/>
      <circle cx="64" cy="22" r="3" fill="#fff"/>
      <path d="M 38 44 Q 55 75 74 44" fill="#e62020"/>
      <ellipse cx="55" cy="112" rx="24" ry="18" fill="#e62020"/>
      <path d="M 78 98 Q 102 82 96 118" fill="#8b4513"/>
    </svg>`;
  }
}

function resetGame(){
  running = true;
  tipEl.innerText = `目标：${nameInput.value.trim() || "某人"}`;
  drawPerson(victimEl,false);
  drawPerson(heroEl,false);
  skillPanel.innerHTML = "";
  skills.forEach((sk,idx)=>{
    const btn = document.createElement("button");
    btn.className = "skillBtn";
    btn.innerText = sk.label;
    btn.onclick = ()=> castSkill(sk, btn);
    skillPanel.appendChild(btn);
  })
}

function castSkill(sk, btn){
  if(!running) return;
  btn.disabled = true;
  tipEl.innerText = `释放：${sk.name}`;
  const eff = document.createElement("div");
  eff.className = "effect";
  eff.innerText = sk.text;
  eff.style.left = victimEl.offsetLeft + 10 + "px";
  eff.style.top = victimEl.offsetTop + 30 + "px";
  document.getElementById("gameBox").appendChild(eff);
  drawPerson(victimEl,true);
  setTimeout(()=>{
    drawPerson(victimEl,false);
    eff.remove();
  },750);
  setTimeout(()=> btn.disabled = false, 1100);
}

startBtn.onclick = resetGame;
drawPerson(victimEl);
drawPerson(heroEl);
</script>
</body>
</html>