{"id":9,"date":"2026-04-15T20:28:05","date_gmt":"2026-04-15T12:28:05","guid":{"rendered":"http:\/\/www.longlegmxd.com\/?page_id=9"},"modified":"2026-04-20T21:13:07","modified_gmt":"2026-04-20T13:13:07","slug":"%e6%80%aa%e7%89%a9%e5%9b%be%e9%89%b4","status":"publish","type":"post","link":"https:\/\/www.longlegmxd.com\/index.php\/2026\/04\/15\/%e6%80%aa%e7%89%a9%e5%9b%be%e9%89%b4\/","title":{"rendered":"\u602a\u7269\u56fe\u9274"},"content":{"rendered":"\n<div style=\"max-width:1200px;margin:auto;padding:20px;\">\n  <h2 style=\"margin-bottom:20px;\">\u602a\u7269\u56fe\u9274<\/h2>\n\n  <input \n    id=\"search\" \n    placeholder=\"\u641c\u7d22\u602a\u7269...\" \n    style=\"\n      width:100%;\n      padding:12px;\n      border-radius:8px;\n      border:1px solid #ddd;\n      margin-bottom:20px;\n      font-size:16px;\n      box-sizing:border-box;\n    \"\n  >\n\n  <div style=\"overflow-x:auto;background:#fff;border-radius:10px;box-shadow:0 0 10px rgba(0,0,0,0.08);\">\n    <table style=\"width:100%;border-collapse:collapse;font-size:15px;\">\n      <thead>\n        <tr style=\"background:#f5e7d3;color:#9b4d00;text-align:left;\">\n          <th style=\"padding:12px;\">NAME<\/th>\n          <th style=\"padding:12px;\">LV<\/th>\n          <th style=\"padding:12px;\">HP<\/th>\n          <th style=\"padding:12px;\">MP<\/th>\n          <th style=\"padding:12px;\">EXP<\/th>\n          <th style=\"padding:12px;\">EXP\/HP<\/th>\n          <th style=\"padding:12px;\">P.ATK<\/th>\n          <th style=\"padding:12px;\">P.DEF<\/th>\n          <th style=\"padding:12px;\">M.ATK<\/th>\n          <th style=\"padding:12px;\">M.DEF<\/th>\n          <th style=\"padding:12px;\">ACC<\/th>\n          <th style=\"padding:12px;\">EVA<\/th>\n          <th style=\"padding:12px;\">SPD<\/th>\n          <th style=\"padding:12px;\">UNDEAD<\/th>\n        <\/tr>\n      <\/thead>\n      <tbody id=\"monster-table-body\"><\/tbody>\n    <\/table>\n  <\/div>\n<\/div>\n\n<script>\n\/\/ \u2705 \u81ea\u52a8\u5c55\u5f00\uff1a\u4ece URL \u8bfb\u53d6 ?open=\u602a\u7269ID\nconst url = new URL(window.location.href);\nconst autoOpen = Number(url.searchParams.get(\"open\"));\n\nlet monsters = [];\nlet openMonsterId = autoOpen || null;\nlet currentAnimType = \"move\";\n\nfunction getThumb(monster) {\n  return monster.thumbnail ? `\/data\/${monster.thumbnail}` : '';\n}\n\nfunction getAnimSrc(monster, type) {\n  const gifs = monster.gifs || {};\n  if (type === \"move\") return gifs.move ? `\/data\/${gifs.move}` : \"\";\n  if (type === \"hit\") return gifs.hit1 ? `\/data\/${gifs.hit1}` : (gifs.hit ? `\/data\/${gifs.hit}` : \"\");\n  if (type === \"die\") return gifs.die1 ? `\/data\/${gifs.die1}` : (gifs.die ? `\/data\/${gifs.die}` : \"\");\n  return \"\";\n}\n\nfunction getExpPerHp(monster) {\n  if (!monster.hp || !monster.exp) return \"-\";\n  return (monster.exp \/ monster.hp).toFixed(3);\n}\n\nfunction btnStyle(active) {\n  return `\n    padding:6px 12px;\n    border:1px solid ${active ? '#e28a28' : '#d6c3a6'};\n    background:${active ? '#ffedd5' : '#f4ead7'};\n    color:#9b4d00;\n    border-radius:6px;\n    cursor:pointer;\n    font-size:13px;\n  `;\n}\n\nfunction render(data) {\n  const tbody = document.getElementById('monster-table-body');\n  tbody.innerHTML = '';\n\n  if (!data.length) {\n    tbody.innerHTML = `<tr><td colspan=\"14\" style=\"padding:20px;\">\u6ca1\u6709\u627e\u5230\u602a\u7269\u3002<\/td><\/tr>`;\n    return;\n  }\n\n  data.forEach(monster => {\n    const summaryImg = getAnimSrc(monster, \"move\") || getThumb(monster);\n\n    const row = document.createElement('tr');\n    row.style.cursor = 'pointer';\n    row.style.borderBottom = '1px solid #eee';\n    row.onmouseover = () => row.style.background = '#faf7f2';\n    row.onmouseout = () => row.style.background = '';\n    row.onclick = () => {\n      if (openMonsterId === monster.id) {\n        openMonsterId = null;\n      } else {\n        openMonsterId = monster.id;\n        currentAnimType = \"move\";\n      }\n      renderFiltered();\n    };\n\n    row.innerHTML = `\n      <td style=\"padding:12px;display:flex;align-items:center;gap:10px;min-width:220px;\">\n        <img decoding=\"async\" src=\"${summaryImg}\" \n             style=\"\n               width:44px;\n               height:44px;\n               object-fit:contain;\n               image-rendering:pixelated;\n               background:#fff;\n               border:1px solid #eee;\n               border-radius:4px;\n               padding:2px;\n             \"\n             onerror=\"this.src='${getThumb(monster)}'\">\n        <span>${monster.name}<\/span>\n      <\/td>\n      <td style=\"padding:12px;\">${monster.level ?? '-'}<\/td>\n      <td style=\"padding:12px;\">${monster.hp ?? '-'}<\/td>\n      <td style=\"padding:12px;\">${monster.mp ?? '-'}<\/td>\n      <td style=\"padding:12px;\">${monster.exp ?? '-'}<\/td>\n      <td style=\"padding:12px;\">${getExpPerHp(monster)}<\/td>\n      <td style=\"padding:12px;\">${monster.PADamage ?? '-'}<\/td>\n      <td style=\"padding:12px;\">${monster.PDDamage ?? '-'}<\/td>\n      <td style=\"padding:12px;\">${monster.MADamage ?? '-'}<\/td>\n      <td style=\"padding:12px;\">${monster.MDDamage ?? '-'}<\/td>\n      <td style=\"padding:12px;\">${monster.acc ?? '-'}<\/td>\n      <td style=\"padding:12px;\">${monster.eva ?? '-'}<\/td>\n      <td style=\"padding:12px;\">${monster.speed ?? '-'}<\/td>\n      <td style=\"padding:12px;\">${monster.undead ?? '-'}<\/td>\n    `;\n    tbody.appendChild(row);\n\n    if (openMonsterId === monster.id) {\n      const detailRow = document.createElement('tr');\n      detailRow.style.background = '#f8f3ea';\n\n      const mapsHtml = (monster.maps && monster.maps.length)\n        ? monster.maps.map(map => `\n            <div style=\"display:inline-block;margin:6px 8px 0 0;padding:6px 10px;background:#fff3e0;border:1px solid #e5c08b;border-radius:6px;\">\n              <a href=\"\/index.php\/\u5730\u56fe\u56fe\u9274\/?map=${encodeURIComponent(map.name)}\"\n                 style=\"color:#9b4d00;text-decoration:none;\">\n                ${map.name}${map.count ? ` \u00d7${map.count}` : ''}\n              <\/a>\n            <\/div>\n          `).join('')\n        : '<span>\u6682\u65e0\u6570\u636e<\/span>';\n\n      const moveSrc = getAnimSrc(monster, \"move\");\n      const hitSrc = getAnimSrc(monster, \"hit\");\n      const dieSrc = getAnimSrc(monster, \"die\");\n      const currentSrc = getAnimSrc(monster, currentAnimType) || getThumb(monster);\n\n      detailRow.innerHTML = `\n        <td colspan=\"14\" style=\"padding:0;\">\n          <div style=\"display:grid;grid-template-columns:380px 1fr;gap:0;border-top:1px solid #e7d7bd;\">\n            \n            <div style=\"padding:20px;border-right:1px solid #e7d7bd;\">\n              <div style=\"display:flex;align-items:flex-start;gap:20px;\">\n                <div style=\"min-width:90px;text-align:center;\">\n                  <img decoding=\"async\" src=\"${currentSrc}\"\n                       style=\"max-width:90px;max-height:120px;object-fit:contain;image-rendering:pixelated;\"\n                       onerror=\"this.style.display='none'\">\n                <\/div>\n\n                <div style=\"flex:1;\">\n                  <div style=\"font-size:20px;font-weight:700;margin-bottom:12px;\">${monster.name}<\/div>\n\n                  <div style=\"display:flex;gap:8px;flex-wrap:wrap;\">\n                    ${moveSrc ? `<button class=\"anim-btn\" data-id=\"${monster.id}\" data-type=\"move\" style=\"${btnStyle(currentAnimType === 'move')}\">Move<\/button>` : ''}\n                    ${hitSrc ? `<button class=\"anim-btn\" data-id=\"${monster.id}\" data-type=\"hit\" style=\"${btnStyle(currentAnimType === 'hit')}\">Hit<\/button>` : ''}\n                    ${dieSrc ? `<button class=\"anim-btn\" data-id=\"${monster.id}\" data-type=\"die\" style=\"${btnStyle(currentAnimType === 'die')}\">Die<\/button>` : ''}\n                  <\/div>\n                <\/div>\n              <\/div>\n\n              <div style=\"margin-top:22px;\">\n                <div style=\"font-size:13px;color:#9b4d00;font-weight:700;margin-bottom:10px;\">BASE<\/div>\n                <div style=\"display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;font-size:15px;\">\n                  <div><b>LEVEL<\/b><br>${monster.level ?? '-'}<\/div>\n                  <div><b>HP<\/b><br>${monster.hp ?? '-'}<\/div>\n                  <div><b>MP<\/b><br>${monster.mp ?? '-'}<\/div>\n                  <div><b>EXP<\/b><br>${monster.exp ?? '-'}<\/div>\n                  <div><b>EXP\/HP<\/b><br>${getExpPerHp(monster)}<\/div>\n                <\/div>\n              <\/div>\n\n              <div style=\"margin-top:22px;\">\n                <div style=\"font-size:13px;color:#9b4d00;font-weight:700;margin-bottom:10px;\">COMBAT<\/div>\n                <div style=\"display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;font-size:15px;\">\n                  <div><b>P.ATK<\/b><br>${monster.PADamage ?? '-'}<\/div>\n                  <div><b>P.DEF<\/b><br>${monster.PDDamage ?? '-'}<\/div>\n                  <div><b>M.ATK<\/b><br>${monster.MADamage ?? '-'}<\/div>\n                  <div><b>M.DEF<\/b><br>${monster.MDDamage ?? '-'}<\/div>\n                  <div><b>ACC<\/b><br>${monster.acc ?? '-'}<\/div>\n                  <div><b>EVA<\/b><br>${monster.eva ?? '-'}<\/div>\n                  <div><b>SPEED<\/b><br>${monster.speed ?? '-'}<\/div>\n                  <div><b>UNDEAD<\/b><br>${monster.undead ?? '-'}<\/div>\n                <\/div>\n              <\/div>\n            <\/div>\n\n            <div style=\"padding:20px;\">\n              <div style=\"font-size:13px;color:#9b4d00;font-weight:700;margin-bottom:12px;\">SPAWNS IN<\/div>\n              <div>${mapsHtml}<\/div>\n            <\/div>\n\n          <\/div>\n        <\/td>\n      `;\n      tbody.appendChild(detailRow);\n    }\n  });\n\n  bindAnimButtons();\n\n  \/\/ \u2705 \u81ea\u52a8\u6eda\u52a8\u5230\u5c55\u5f00\u9879\n  setTimeout(() => {\n    if (openMonsterId) {\n      const rows = tbody.querySelectorAll('tr');\n      rows.forEach(r => {\n        if (r.style.background === 'rgb(248, 243, 234)') {\n          r.scrollIntoView({ behavior: 'smooth', block: 'center' });\n        }\n      });\n    }\n  }, 100);\n}\n\nfunction bindAnimButtons() {\n  document.querySelectorAll('.anim-btn').forEach(btn => {\n    btn.onclick = (e) => {\n      e.stopPropagation();\n      const id = Number(btn.dataset.id);\n      const type = btn.dataset.type;\n      openMonsterId = id;\n      currentAnimType = type;\n      renderFiltered();\n    };\n  });\n}\n\nfunction renderFiltered() {\n  const keyword = document.getElementById('search').value.toLowerCase().trim();\n  const filtered = monsters.filter(m => (m.name || '').toLowerCase().includes(keyword));\n  render(filtered);\n}\n\ndocument.getElementById('search').addEventListener('input', () => {\n  openMonsterId = null;\n  renderFiltered();\n});\n\nfetch('\/data\/monsters.json')\n  .then(res => res.json())\n  .then(data => {\n    monsters = data.monsters || [];\n    render(monsters);\n  })\n  .catch(err => {\n    document.getElementById('monster-table-body').innerHTML = `\n      <tr><td colspan=\"14\" style=\"padding:20px;\">\u52a0\u8f7d\u5931\u8d25<\/td><\/tr>\n    `;\n    console.error(err);\n  });\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>\u602a\u7269\u56fe\u9274 NAME LV HP MP EXP EXP\/HP P.ATK P.DEF M.ATK M.DEF A&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"categories":[],"tags":[],"class_list":["post-9","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/www.longlegmxd.com\/index.php\/wp-json\/wp\/v2\/posts\/9","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.longlegmxd.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.longlegmxd.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.longlegmxd.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.longlegmxd.com\/index.php\/wp-json\/wp\/v2\/comments?post=9"}],"version-history":[{"count":14,"href":"https:\/\/www.longlegmxd.com\/index.php\/wp-json\/wp\/v2\/posts\/9\/revisions"}],"predecessor-version":[{"id":33,"href":"https:\/\/www.longlegmxd.com\/index.php\/wp-json\/wp\/v2\/posts\/9\/revisions\/33"}],"wp:attachment":[{"href":"https:\/\/www.longlegmxd.com\/index.php\/wp-json\/wp\/v2\/media?parent=9"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.longlegmxd.com\/index.php\/wp-json\/wp\/v2\/categories?post=9"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.longlegmxd.com\/index.php\/wp-json\/wp\/v2\/tags?post=9"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}