{"id":26134,"date":"2025-08-15T04:40:59","date_gmt":"2025-08-14T19:40:59","guid":{"rendered":"http:\/\/www.tyosuke20xx.com\/blog\/?p=26134"},"modified":"2025-08-15T04:41:01","modified_gmt":"2025-08-14T19:41:01","slug":"vrmmorpg%ce%b2%e7%89%88","status":"publish","type":"post","link":"http:\/\/www.tyosuke20xx.com\/blog\/?p=26134","title":{"rendered":"VRMMORPG\u03b2\u7248"},"content":{"rendered":"\n
<!DOCTYPE html>\n<html lang=\"ja\">\n<head>\n  <meta charset=\"UTF-8\">\n  <title>\u30a8\u30eb\u30c0\u30fc\u30af\u30ed\u30cb\u30af\u30eb\uff1aVR\u8d85\u5b8c\u5168\u7248 \u2013 \u30ed\u30fc\u30c9\u306a\u3057\uff08\u62fe\u3046\/\u88c5\u5099\u4fee\u6b63\uff09<\/title>\n  <script src=\"https:\/\/aframe.io\/releases\/1.4.2\/aframe.min.js\"><\/script>\n  <style>\n    body, html { margin:0; padding:0; overflow:hidden; font-family:'Yu Gothic',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; background:#000;}\n    #ui {\n      position:absolute; top:20px; left:20px; z-index:10; width:400px; color:#fff;\n      background:linear-gradient(180deg,rgba(0,0,0,.92),rgba(0,10,30,.85));\n      border-radius:16px; padding:14px 16px; box-shadow:0 0 25px #0ff,0 0 18px #33f4; font-size:15px;\n    }\n    h2 { margin:0 0 8px 0; font-size:22px; letter-spacing:1px;}\n    .row { display:flex; gap:8px; align-items:center; flex-wrap:wrap;}\n    .row > * { flex: 1 1 auto; }\n    input, select { width:100%; padding:6px 8px; border-radius:8px; border:1px solid #024; background:#00131f; color:#cfe9ff; }\n    button {\n      background:linear-gradient(90deg,#555,#222 80%);\n      color:#fff; padding:10px; margin:5px 0; border:none; cursor:pointer; width:100%;\n      border-radius:8px; font-weight:bold; letter-spacing:1px; box-shadow:0 1px 8px #0cf5; transition:background .25s;\n    }\n    button:hover { background:linear-gradient(90deg,#888 40%,#3cf); }\n    .section-title { font-weight:bold; font-size:17px; margin-top:10px; border-bottom:2px solid #5ef; letter-spacing:1.2px; }\n    .bar { height:14px; background:#13202a; border-radius:7px; overflow:hidden; margin:6px 0; box-shadow:0 1px 6px #0ff6 inset; }\n    .bar-inner { height:100%; background:linear-gradient(90deg,#0f0,#3af); transition:width .25s; }\n    .mana-bar .bar-inner { background:linear-gradient(90deg,#33d,#6ff); }\n    .enemyhp-bar .bar-inner { background:linear-gradient(90deg,#f55,#fdd); }\n    #scenario { margin:10px 0 6px 0; background:rgba(0,10,32,0.7); padding:8px 12px; border-radius:8px; min-height:44px; }\n    .kbd { display:inline-block; padding:1px 6px; border-radius:6px; background:#0a2636; border:1px solid #124; font-family:monospace; }\n    #hint {\n      position:absolute; bottom:18px; left:50%; transform:translateX(-50%);\n      color:#eaffff; background:rgba(0,20,35,.72); border:1px solid #0af; padding:8px 12px; border-radius:10px;\n      box-shadow:0 0 18px #08f5; font-size:14px; z-index:10;\n    }\n    #pickupPrompt {\n      position:absolute; bottom:70px; left:50%; transform:translateX(-50%);\n      color:#fff; background:rgba(0,0,0,.7); border:1px solid #38f; padding:8px 12px; border-radius:10px;\n      display:none; z-index:10;\n    }\n    .tag { display:inline-block; padding:2px 6px; border-radius:6px; background:#012233; border:1px solid #1a4e6c; margin-left:6px; font-size:12px; color:#bfe6ff;}\n    .on { background:#0b3754; border-color:#3db3ff; color:#fff; }\n  <\/style>\n<\/head>\n<body>\n  <div id=\"ui\">\n    <h2>\u30a8\u30eb\u30c0\u30fc\u30af\u30ed\u30cb\u30af\u30ebVR<\/h2>\n    <div class=\"row\">\n      <span>\u30d7\u30ec\u30a4\u30e4\u30fc\u540d:<\/span>\n      <input id=\"playerName\" placeholder=\"\u540d\u524d\u3092\u5165\u529b\">\n    <\/div>\n\n    <div class=\"row\"><span>\u30ec\u30d9\u30eb:<\/span><span id=\"level\" class=\"tag on\">1<\/span>\n      <span>\u88c5\u5099:<\/span><span id=\"equipment\" class=\"tag\">\u306a\u3057<\/span>\n    <\/div>\n\n    <div>HP: <span id=\"hpText\">100<\/span><\/div>\n    <div class=\"bar\"><div id=\"hpBar\" class=\"bar-inner\" style=\"width:100%\"><\/div><\/div>\n    <div>\u9b54\u529b: <span id=\"manaText\">100<\/span><\/div>\n    <div class=\"bar mana-bar\"><div id=\"manaBar\" class=\"bar-inner\" style=\"width:100%\"><\/div><\/div>\n\n    <div>\u6575HP: <span id=\"enemyHpText\">120<\/span><\/div>\n    <div class=\"bar enemyhp-bar\"><div id=\"enemyHpBar\" class=\"bar-inner\" style=\"width:100%\"><\/div><\/div>\n\n    <div class=\"section-title\">\u30b7\u30ca\u30ea\u30aa<\/div>\n    <div id=\"scenario\"><\/div>\n\n    <div class=\"section-title\">\u884c\u52d5<\/div>\n    <button onclick=\"levelUp()\">\ud83c\udf89 \u30ec\u30d9\u30eb\u30a2\u30c3\u30d7<\/button>\n    <button onclick=\"castSpell()\">\ud83e\ude84 \u9b54\u6cd5\u767a\u52d5<\/button>\n    <button onclick=\"choosePath('wizard')\">\ud83e\uddd9\u200d\u2642\ufe0f \u9b54\u5c0e\u58eb\u306b\u8a71\u3059<\/button>\n    <button onclick=\"choosePath('knight')\">\ud83d\udee1\ufe0f \u9a0e\u58eb\u306b\u8a71\u3059<\/button>\n    <button onclick=\"receiveQuest()\">\ud83d\udcdc \u30af\u30a8\u30b9\u30c8\u53d7\u6ce8<\/button>\n    <button onclick=\"toggleEnvironment()\">\ud83c\udf04 \u663c\u591c\u5207\u66ff<\/button>\n\n    <div class=\"section-title\">\u79fb\u52d5<\/div>\n    <div class=\"row\">\n      <button onclick=\"changeField('town')\">\ud83c\udfd8\ufe0f \u8857<\/button>\n      <button onclick=\"changeField('castle')\">\ud83c\udff0 \u57ce<\/button>\n    <\/div>\n    <div class=\"row\">\n      <button onclick=\"changeField('cave')\">\ud83d\udd73\ufe0f \u6d1e\u7a9f<\/button>\n      <button onclick=\"changeField('ruins')\">\ud83c\udfdb\ufe0f \u907a\u8de1<\/button>\n    <\/div>\n    <div class=\"row\">\n      <button onclick=\"changeField('dungeon')\">\ud83e\udde9 \u30c0\u30f3\u30b8\u30e7\u30f3<\/button>\n    <\/div>\n\n    <div class=\"section-title\">\u64cd\u4f5c<\/div>\n    <div style=\"line-height:1.6\">\n      <span class=\"kbd\">WASD<\/span> \u79fb\u52d5\u3000\n      <span class=\"kbd\">\u30de\u30a6\u30b9<\/span> \u8996\u70b9\u3000\n      <span class=\"kbd\">E<\/span> \u62fe\u3046\u3000\n      <span class=\"kbd\">1<\/span> \u5263\u88c5\u5099\u3000\n      <span class=\"kbd\">2<\/span> \u9283\u88c5\u5099\u3000\n      <span class=\"kbd\">\u30af\u30ea\u30c3\u30af<\/span> \u653b\u6483\n    <\/div>\n  <\/div>\n\n  <div id=\"pickupPrompt\">E\u3067\u62fe\u3046<\/div>\n  <div id=\"hint\">\u8fd1\u304f\u306e\u6b66\u5668\u306b\u8fd1\u3065\u3044\u3066 <span class=\"kbd\">E<\/span> \u3067\u62fe\u3044\u3001<span class=\"kbd\">1\/2<\/span> \u3067\u88c5\u5099\u3001\u30af\u30ea\u30c3\u30af\u3067\u653b\u6483\uff01<\/div>\n\n  <a-scene loading-screen=\"enabled:false\" renderer=\"colorManagement:true\" shadow=\"true\">\n    <a-sky id=\"sky\" color=\"#0e163e\"><\/a-sky>\n\n    <a-entity id=\"starParticles\" position=\"0 25 -40\" visible=\"false\">\n      <a-entity geometry=\"primitive:sphere; radius:0.18\" material=\"color:#fff; opacity:0.6\" position=\"-10 3 0\"><\/a-entity>\n      <a-entity geometry=\"primitive:sphere; radius:0.12\" material=\"color:#fff; opacity:0.8\" position=\"7 2 -2\"><\/a-entity>\n      <a-entity geometry=\"primitive:sphere; radius:0.11\" material=\"color:#eaf6ff; opacity:0.9\" position=\"3 5 2\"><\/a-entity>\n      <a-entity geometry=\"primitive:sphere; radius:0.10\" material=\"color:#ffe; opacity:0.7\" position=\"13 3 5\"><\/a-entity>\n    <\/a-entity>\n    <a-entity id=\"cloudParticles\" position=\"0 30 -35\" visible=\"true\">\n      <a-sphere radius=\"5\" position=\"8 2 -8\" color=\"#f6fbff\" opacity=\"0.18\"><\/a-sphere>\n      <a-sphere radius=\"6\" position=\"-7 3 5\" color=\"#eefbff\" opacity=\"0.14\"><\/a-sphere>\n    <\/a-entity>\n\n    <a-light type=\"ambient\" color=\"#fff\" intensity=\"1\"><\/a-light>\n    <a-light id=\"sunlight\" type=\"directional\" intensity=\"1.6\" position=\"20 25 -8\" castShadow=\"true\" shadow-mapWidth=\"1024\" shadow-mapHeight=\"1024\"><\/a-light>\n    <a-light type=\"point\" color=\"#cff\" intensity=\"2.2\" distance=\"50\" position=\"2 9 -3\"><\/a-light>\n    <a-light type=\"spot\" color=\"#55aaff\" position=\"0 15 -10\" intensity=\"1.2\" angle=\"30\" penumbra=\"0.7\"><\/a-light>\n\n    <a-plane id=\"ground\" position=\"0 0 0\" rotation=\"-90 0 0\" width=\"120\" height=\"120\" color=\"#375047\" shadow=\"receive:true\"><\/a-plane>\n\n    <a-entity id=\"field-town\" visible=\"true\">\n      <a-circle position=\"0 0 -6\" radius=\"4\" color=\"#7d7d7d\" material=\"roughness:.9; metalness:.05; opacity:.84; transparent:true\"><\/a-circle>\n      <a-entity position=\"-2 0 -7\">\n        <a-box width=\"3.6\" height=\"2.6\" depth=\"2.4\" color=\"#c0a47b\" material=\"roughness:0.3; metalness:0.05\" position=\"0 1.3 0\"><\/a-box>\n        <a-cone position=\"0 3 -0.1\" radius-bottom=\"2.1\" height=\"1.4\" color=\"#7b5322\"><\/a-cone>\n        <a-text value=\"\u8857\u306e\u5bb6\" position=\"0 3.7 0\" color=\"#fff\" width=\"5\" align=\"center\"><\/a-text>\n      <\/a-entity>\n      <a-entity position=\"2 0 -9\">\n        <a-box width=\"2.2\" height=\"2.2\" depth=\"2.4\" color=\"#a86f23\" position=\"0 1.1 0\"><\/a-box>\n        <a-cone position=\"0 2.6 0\" radius-bottom=\"1.4\" height=\"1.0\" color=\"#5c3a12\"><\/a-cone>\n      <\/a-entity>\n      <a-entity position=\"5 0 -5\">\n        <a-cylinder radius=\"0.25\" height=\"4\" color=\"#3a2a1a\" position=\"0 2 0\"><\/a-cylinder>\n        <a-sphere radius=\"1.2\" color=\"#174d1f\" position=\"0 3.2 0\"><\/a-sphere>\n      <\/a-entity>\n    <\/a-entity>\n\n    <a-entity id=\"field-castle\" visible=\"false\">\n      <a-box position=\"0 2.8 -12\" depth=\"6\" height=\"6\" width=\"10\" color=\"#ccd2df\" material=\"roughness:0.25; metalness:0.12\"><\/a-box>\n      <a-cylinder position=\"-4 1.2 -13\" radius=\"1.1\" height=\"3.8\" color=\"#858ca3\"><\/a-cylinder>\n      <a-cylinder position=\"4 1.2 -13\" radius=\"1.1\" height=\"3.8\" color=\"#858ca3\"><\/a-cylinder>\n      <a-cone position=\"0 6.4 -12\" radius-bottom=\"3.2\" height=\"2\" color=\"#dba\"><\/a-cone>\n      <a-entity geometry=\"primitive:torus; radius:2.5; tube:0.07\" material=\"color:#66aaff; opacity:.25; transparent:true\" position=\"0 4.5 -12\"><\/a-entity>\n      <a-text value=\"\u738b\u306e\u57ce\" position=\"0 6.3 -12\" color=\"#0bf\" width=\"6\" align=\"center\"><\/a-text>\n    <\/a-entity>\n\n    <a-entity id=\"field-cave\" visible=\"false\">\n      <a-torus position=\"2 1.1 -10\" radius=\"1.8\" tube=\"0.8\" arc=\"230\" color=\"#363636\" rotation=\"40 0 90\"><\/a-torus>\n      <a-sphere position=\"2 0.4 -10\" radius=\"1.1\" color=\"#151515\"><\/a-sphere>\n      <a-entity position=\"-2 0 -8\">\n        <a-cone radius-bottom=\"0.8\" height=\"2.2\" color=\"#2a2a2a\"><\/a-cone>\n        <a-cone radius-bottom=\"0.5\" height=\"1.4\" color=\"#393939\" position=\"0.7 0 0.4\"><\/a-cone>\n      <\/a-entity>\n      <a-text value=\"\u6d1e\u7a9f\u306e\u5165\u53e3\" position=\"2 2.9 -10\" color=\"#fff\" width=\"6\" align=\"center\"><\/a-text>\n    <\/a-entity>\n\n    <a-entity id=\"field-ruins\" visible=\"false\">\n      <a-cylinder position=\"-2 1.1 -9\" radius=\"0.8\" height=\"2.6\" color=\"#babbb2\"><\/a-cylinder>\n      <a-box position=\"-3.1 1.8 -9\" width=\"3.5\" height=\"0.32\" depth=\"0.7\" color=\"#e0dfc7\"><\/a-box>\n      <a-torus position=\"-2 2.3 -9\" radius=\"0.6\" tube=\"0.09\" arc=\"340\" color=\"#fffeee\"><\/a-torus>\n      <a-entity geometry=\"primitive:torusKnot; p:2; q:7; radius:0.7; tube:0.07\" position=\"2 1.8 -8\" material=\"color:#bcd; opacity:.7; transparent:true\"><\/a-entity>\n      <a-text value=\"\u53e4\u4ee3\u306e\u907a\u69cb\" position=\"0 3.3 -8.5\" color=\"#fff\" width=\"6\" align=\"center\"><\/a-text>\n    <\/a-entity>\n\n    <a-entity id=\"field-dungeon\" visible=\"false\">\n      <a-box position=\"2 1.2 -8.8\" depth=\"3.3\" height=\"2.3\" width=\"3.6\" color=\"#161651\"><\/a-box>\n      <a-torus-knot position=\"-1.5 2.7 -8.2\" radius=\"0.9\" tube=\"0.12\" p=\"3\" q=\"7\" color=\"#64eaff\"><\/a-torus-knot>\n      <a-cylinder position=\"-3 0.7 -9.6\" radius=\"0.8\" height=\"1.2\" color=\"#333\"><\/a-cylinder>\n      <a-entity geometry=\"primitive:torus; radius:1.4; tube:0.05\" material=\"color:#aaeeff; opacity:.18; transparent:true\" position=\"0 2.1 -8.6\" rotation=\"90 0 0\"><\/a-entity>\n      <a-text value=\"\u30c0\u30f3\u30b8\u30e7\u30f3\u5165\u53e3\" position=\"0 3.1 -8.4\" color=\"#fff\" width=\"6\" align=\"center\"><\/a-text>\n    <\/a-entity>\n\n    <!-- \u6b66\u5668\u30d4\u30c3\u30af\u30a2\u30c3\u30d7 -->\n    <a-entity id=\"swordPickup\" class=\"pickup\" data-weapon=\"sword\" position=\"-1 0 -5\">\n      <a-box width=\"0.16\" height=\"1.3\" depth=\"0.08\" color=\"#cfe7ff\" material=\"metalness:0.8; roughness:0.15\" position=\"0 0.75 0\"><\/a-box>\n      <a-box width=\"0.5\" height=\"0.08\" depth=\"0.08\" color=\"#333\" position=\"0 0.1 0\"><\/a-box>\n      <a-cylinder radius=\"0.06\" height=\"0.42\" color=\"#7c5a2b\" position=\"0 -0.1 0\"><\/a-cylinder>\n      <a-entity geometry=\"primitive:ring; radiusInner:0.45; radiusOuter:0.5\" rotation=\"-90 0 0\" position=\"0 0 0\" material=\"color:#44d; opacity:.35; transparent:true\"><\/a-entity>\n      <a-text value=\"\u5263\" color=\"#fff\" position=\"0 1.7 0\" align=\"center\"><\/a-text>\n    <\/a-entity>\n\n    <a-entity id=\"gunPickup\" class=\"pickup\" data-weapon=\"gun\" position=\"2 0 -5.5\">\n      <a-box width=\"0.7\" height=\"0.18\" depth=\"0.18\" color=\"#222\" position=\"0 0.4 0\"><\/a-box>\n      <a-box width=\"0.3\" height=\"0.28\" depth=\"0.18\" color=\"#444\" position=\"-0.2 0.2 0\"><\/a-box>\n      <a-box width=\"0.12\" height=\"0.40\" depth=\"0.16\" color=\"#333\" position=\"0.2 0.15 0\"><\/a-box>\n      <a-cylinder radius=\"0.06\" height=\"0.28\" color=\"#555\" position=\"0.34 0.46 0\" rotation=\"0 0 90\"><\/a-cylinder>\n      <a-entity geometry=\"primitive:ring; radiusInner:0.45; radiusOuter:0.5\" rotation=\"-90 0 0\" position=\"0 0 0\" material=\"color:#0aa; opacity:.35; transparent:true\"><\/a-entity>\n      <a-text value=\"\u9283\" color=\"#fff\" position=\"0 1.0 0\" align=\"center\"><\/a-text>\n    <\/a-entity>\n\n    <!-- \u30d7\u30ec\u30a4\u30e4\u30fc\uff08\u30ea\u30b0\u304c\u79fb\u52d5\u3059\u308b\uff1a\u2605\u4fee\u6b63\uff09 -->\n    <a-entity id=\"rig\" position=\"0 0 0\" wasd-controls=\"acceleration:30\">\n      <a-entity id=\"cam\" camera look-controls=\"pointerLockEnabled:true\" position=\"0 1.6 3\"><\/a-entity>\n      <a-entity id=\"player\" position=\"0 0 -1.5\" rotation=\"0 180 0\" shadow=\"cast:true\">\n        <a-sphere radius=\"0.18\" color=\"#ffd7f0\" position=\"0 1.58 0\"><\/a-sphere>\n        <a-cylinder radius=\"0.23\" height=\"0.9\" color=\"#9ad\" position=\"0 1.02 0\"><\/a-cylinder>\n        <a-cylinder radius=\"0.08\" height=\"0.55\" color=\"#9ad\" position=\"-0.16 0.74 0\" rotation=\"0 0 18\"><\/a-cylinder>\n        <a-cylinder radius=\"0.08\" height=\"0.55\" color=\"#9ad\" position=\"0.16 0.74 0\" rotation=\"0 0 -18\"><\/a-cylinder>\n        <a-cylinder radius=\"0.09\" height=\"0.7\" color=\"#79b\" position=\"-0.10 0.35 0\"><\/a-cylinder>\n        <a-cylinder radius=\"0.09\" height=\"0.7\" color=\"#79b\" position=\"0.10 0.35 0\"><\/a-cylinder>\n      <\/a-entity>\n    <\/a-entity>\n\n    <!-- \u6575 -->\n    <a-entity id=\"enemy\" position=\"0 0 -9\" visible=\"true\">\n      <a-sphere id=\"enemyBody\" radius=\"1.25\" color=\"#9b1e1e\" material=\"metalness:0.35; roughness:.25; emissive:#330000\"><\/a-sphere>\n      <a-entity geometry=\"primitive:torus; radius:1.4; tube:0.05\" material=\"color:#ffeeaa; opacity:.18; transparent:true\" position=\"0 0.3 0\" rotation=\"90 0 0\"><\/a-entity>\n      <a-entity geometry=\"primitive:torusKnot; radius:0.45; tube:0.05; p:2; q:5\" material=\"color:#ffa033; opacity:.22; transparent:true\" position=\"0 1.0 0\"><\/a-entity>\n      <a-sphere position=\"-0.38 0.42 0.95\" radius=\"0.14\" color=\"#fff\" material=\"metalness:.9; roughness:.05; emissive:#a0f\"><\/a-sphere>\n      <a-sphere position=\"0.38 0.42 0.95\" radius=\"0.14\" color=\"#fff\" material=\"metalness:.9; roughness:.05; emissive:#a0f\"><\/a-sphere>\n      <a-cone position=\"-0.45 1.35 0.15\" radius-bottom=\"0.16\" height=\"0.62\" color=\"#f5f3ff\" rotation=\"15 0 60\"><\/a-cone>\n      <a-cone position=\"0.45 1.35 0.15\" radius-bottom=\"0.16\" height=\"0.62\" color=\"#f5f3ff\" rotation=\"15 0 -60\"><\/a-cone>\n      <a-text value=\"\u6575\u30e2\u30f3\u30b9\u30bf\u30fc\" position=\"0 2.15 0\" align=\"center\" color=\"#fff\"><\/a-text>\n    <\/a-entity>\n\n    <a-entity id=\"spellEffect\" geometry=\"primitive:sphere; radius:0.55\"\n              material=\"color:#72f3ff; opacity:.86; emissive:#88f; transparent:true\"\n              position=\"0 1.7 -3\" visible=\"false\"\n              animation__move=\"property: position; to: 0 3.1 -6; dur:500; dir:alternate; loop:false\">\n      <a-entity geometry=\"primitive:torus; radius:0.7; tube:0.08\" material=\"color:#fff; opacity:.3; transparent:true\"><\/a-entity>\n    <\/a-entity>\n\n    <a-entity id=\"game\" game-manager><\/a-entity>\n  <\/a-scene>\n\n<script>\nlet isDay=false, hp=100, mana=100, level=1;\nlet enemyHP=120, enemyHPMax=120;\nfunction updateBars(){\n  document.getElementById(\"hpText\").innerText = Math.max(0,Math.floor(hp));\n  document.getElementById(\"manaText\").innerText = Math.max(0,Math.floor(mana));\n  document.getElementById(\"hpBar\").style.width = Math.max(0,Math.min(100,hp))+\"%\";\n  document.getElementById(\"manaBar\").style.width = Math.max(0,Math.min(100,mana))+\"%\";\n  document.getElementById(\"level\").innerText = level;\n  document.getElementById(\"enemyHpText\").innerText = Math.max(0,enemyHP);\n  const w = Math.max(0, Math.min(100, enemyHP*100\/enemyHPMax));\n  document.getElementById(\"enemyHpBar\").style.width = w+\"%\";\n}\nfunction levelUp(){ level++; hp=Math.min(100,hp+20); mana+=30; showScenario(\"\ud83c\udf89 \u30ec\u30d9\u30eb\u30a2\u30c3\u30d7\uff01\u65b0\u3057\u3044\u529b\u304c\u6e67\u3044\u3066\u304f\u308b\uff01\"); updateBars(); }\nfunction castSpell(){\n  if(mana<20){ showScenario(\"\ud83d\udca4 \u9b54\u529b\u304c\u8db3\u308a\u306a\u3044\uff01\"); return; }\n  mana-=20; updateBars();\n  const effect=document.getElementById(\"spellEffect\");\n  effect.setAttribute(\"visible\",\"true\");\n  setTimeout(()=>{ effect.setAttribute(\"visible\",\"false\"); applyDamageToEnemy(30,\"\u9b54\u6cd5\u30d2\u30c3\u30c8\"); },700);\n}\nfunction choosePath(choice){\n  if(choice===\"wizard\"){ document.getElementById(\"equipment\").innerText=\"\u9b54\u5c0e\u58eb\u306e\u30ed\u30fc\u30d6\"; mana+=50; showScenario(\"\ud83e\uddd9\u200d\u2642\ufe0f \u9b54\u5c0e\u58eb\u306e\u8a66\u7df4\u304c\u59cb\u307e\u308b\u2026\"); }\n  else{ document.getElementById(\"equipment\").innerText=\"\u9a0e\u58eb\u306e\u5263\"; hp+=30; showScenario(\"\u2694\ufe0f \u9a0e\u58eb\u3068\u5171\u306b\u9b54\u738b\u57ce\u3078\u5411\u304b\u3046\uff01\"); }\n  updateBars();\n}\nfunction toggleEnvironment(){\n  const sky=document.getElementById(\"sky\");\n  const star=document.getElementById(\"starParticles\");\n  const cloud=document.getElementById(\"cloudParticles\");\n  const ground=document.getElementById(\"ground\");\n  const sunlight=document.getElementById(\"sunlight\");\n  if(isDay){\n    sky.setAttribute(\"color\",\"#0e163e\"); star.setAttribute(\"visible\",\"false\"); cloud.setAttribute(\"visible\",\"true\");\n    ground.setAttribute(\"color\",\"#375047\"); sunlight.setAttribute(\"intensity\",\"1.6\"); showScenario(\"\ud83c\udf0c \u591c\u306e\u4e16\u754c\u3078\u2026\");\n  }else{\n    sky.setAttribute(\"color\",\"#7ddfff\"); star.setAttribute(\"visible\",\"true\"); cloud.setAttribute(\"visible\",\"false\");\n    ground.setAttribute(\"color\",\"#b8ffcc\"); sunlight.setAttribute(\"intensity\",\"2.1\"); showScenario(\"\ud83c\udf1e \u663c\u306e\u4e16\u754c\u3078\u2026\");\n  }\n  isDay=!isDay;\n}\nfunction changeField(fieldName){\n  const fields=['town','castle','cave','ruins','dungeon'];\n  fields.forEach(name=>{\n    const el=document.getElementById(`field-${name}`);\n    el.setAttribute('visible', name===fieldName);\n  });\n  showScenario(`\ud83d\udccd ${fieldName} \u306b\u79fb\u52d5\u3057\u307e\u3057\u305f`);\n}\nfunction receiveQuest(){\n  const quests=[\n    \"\u9b54\u5c0e\u58eb\u306e\u5854\u3067\u5931\u308f\u308c\u305f\u66f8\u3092\u63a2\u305b\uff01\",\"\u9a0e\u58eb\u56e3\u306e\u65d7\u3092\u53d6\u308a\u623b\u305b\uff01\",\"\u6d1e\u7a9f\u306e\u5965\u306b\u7720\u308b\u9b54\u77f3\u3092\u767a\u898b\u305b\u3088\uff01\",\n    \"\u907a\u8de1\u306b\u96a0\u3055\u308c\u305f\u5c01\u5370\u3092\u89e3\u3051\uff01\",\"\u30c0\u30f3\u30b8\u30e7\u30f3\u306e\u9b54\u738b\u3092\u8a0e\u4f10\u305b\u3088\uff01\"\n  ];\n  const index=Math.floor(Math.random()*quests.length);\n  showScenario(\"\ud83d\udcdc \u30af\u30a8\u30b9\u30c8\u53d7\u6ce8: \"+quests[index]);\n}\n\nconst scenarioList=[\n  \"\u76ee\u899a\u3081\u305f\u3042\u306a\u305f\u306f\u4e0d\u601d\u8b70\u306a\u4e16\u754c\u306b\u3044\u305f\u3002\",\"\u6700\u521d\u306e\u30af\u30a8\u30b9\u30c8\u3092\u53d7\u6ce8\u3057\u3088\u3046\u3002\",\"\u30d5\u30a3\u30fc\u30eb\u30c9\u79fb\u52d5\u3067\u5192\u967a\u306e\u6249\u304c\u958b\u304f\u3002\",\n  \"\u884c\u52d5\u3084\u9b54\u6cd5\u3067\u30b9\u30c8\u30fc\u30ea\u30fc\u304c\u52d5\u304f\u3002\",\"\u8857\u3067\u60c5\u5831\u3092\u96c6\u3081\u3001\u4ef2\u9593\u3068\u51fa\u4f1a\u304a\u3046\u3002\",\"\u30af\u30a8\u30b9\u30c8\u3092\u9032\u3081\u3001\u9b54\u738b\u306b\u7acb\u3061\u5411\u304b\u3048\uff01\"\n];\nlet scenarioIndex=0;\nfunction showScenario(text){ document.getElementById('scenario').innerHTML=text; }\nfunction advanceScenario(){ if(scenarioIndex<scenarioList.length){ showScenario(scenarioList[scenarioIndex]); scenarioIndex++; } }\n['levelUp','castSpell','choosePath','changeField','receiveQuest'].forEach(fn=>{\n  const orig=window[fn]; window[fn]=function(){ orig.apply(this, arguments); advanceScenario(); }\n});\n\n\/* ---- \u3053\u3053\u304c\u62fe\u3046\/\u88c5\u5099\u306e\u4e2d\u6838 ---- *\/\nconst rigEl=()=>document.getElementById('rig');\nconst camEl=()=>document.getElementById('cam');\nconst enemyEl=()=>document.getElementById('enemy');\nconst enemyBodyEl=()=>document.getElementById('enemyBody');\n\nlet hasSword=false, hasGun=false, equipped='none';\nlet attackCooldown=false;\nconst bullets=[];\n\nfunction setEquipmentLabel(){\n  let label=\"\u306a\u3057\";\n  if(equipped==='sword') label=\"\u5263\";\n  if(equipped==='gun') label=\"\u9283\";\n  document.getElementById('equipment').innerText=label;\n}\n\nfunction tryPickup(){\n  const rpos=rigEl().object3D.position; \/\/ \u2605\u30ea\u30b0\u304c\u79fb\u52d5\u3059\u308b\u306e\u3067OK\n  const items=[document.getElementById('swordPickup'),document.getElementById('gunPickup')];\n  for(const it of items){\n    if(!it.getAttribute('visible')) continue;\n    const wpos=it.object3D.position;\n    const d=rpos.distanceTo(wpos);\n    if(d<2.0){\n      const w=it.getAttribute('data-weapon');\n      it.setAttribute('visible','false');\n      if(w==='sword'){ hasSword=true; if(equipped==='none') equipped='sword'; showScenario(\"\ud83d\udde1\ufe0f \u5263\u3092\u62fe\u3063\u305f\uff01 1\u3067\u88c5\u5099\u3002\"); }\n      if(w==='gun'){ hasGun=true; if(equipped==='none') equipped='gun'; showScenario(\"\ud83d\udd2b \u9283\u3092\u62fe\u3063\u305f\uff01 2\u3067\u88c5\u5099\u3002\"); }\n      setEquipmentLabel();\n      return;\n    }\n  }\n  showScenario(\"\u8fd1\u304f\u306b\u62fe\u3048\u308b\u3082\u306e\u306f\u306a\u3044\u3002\");\n}\n\nfunction equipSword(){ if(hasSword){ equipped='sword'; setEquipmentLabel(); showScenario(\"\ud83d\udde1\ufe0f \u5263\u3092\u88c5\u5099\u3057\u305f\u3002\"); } else { showScenario(\"\u5263\u3092\u307e\u3060\u62fe\u3063\u3066\u3044\u306a\u3044\u3002\"); } }\nfunction equipGun(){ if(hasGun){ equipped='gun'; setEquipmentLabel(); showScenario(\"\ud83d\udd2b \u9283\u3092\u88c5\u5099\u3057\u305f\u3002\"); } else { showScenario(\"\u9283\u3092\u307e\u3060\u62fe\u3063\u3066\u3044\u306a\u3044\u3002\"); } }\n\nfunction attack(){\n  if(attackCooldown) return;\n  if(equipped==='sword'){ swordSlash(); }\n  else if(equipped==='gun'){ shootBullet(); }\n  else{ showScenario(\"\u88c5\u5099\u304c\u3042\u308a\u307e\u305b\u3093\u3002\u5263\u3084\u9283\u3092\u62fe\u3063\u3066\u304f\u3060\u3055\u3044\u3002\"); }\n}\n\nfunction swordSlash(){\n  attackCooldown=true;\n  const slash=document.createElement('a-entity');\n  slash.setAttribute('geometry','primitive: torus; radius:0.9; tube:0.08; arc:200');\n  slash.setAttribute('material','color:#fff; opacity:.6; transparent:true');\n  const dir=new AFRAME.THREE.Vector3(); camEl().object3D.getWorldDirection(dir); dir.y=0; dir.normalize();\n  const base=rigEl().object3D.position.clone().add(new AFRAME.THREE.Vector3(0,1.2,0)).add(dir.clone().multiplyScalar(0.8));\n  slash.setAttribute('position',`${base.x} ${base.y} ${base.z}`);\n  const rotY=Math.atan2(dir.x,dir.z)*AFRAME.THREE.MathUtils.RAD2DEG;\n  slash.setAttribute('rotation',`0 ${rotY} 0`);\n  slash.setAttribute('animation__fade','property: material.opacity; to:0; dur:200; easing:easeOutQuad');\n  document.querySelector('a-scene').appendChild(slash);\n  setTimeout(()=>slash.parentNode && slash.parentNode.removeChild(slash),220);\n\n  const enemyPos=enemyEl().object3D.position.clone();\n  const toEnemy=enemyPos.clone().sub(rigEl().object3D.position.clone().add(new AFRAME.THREE.Vector3(0,1.0,0)));\n  const dist=toEnemy.length();\n  toEnemy.y=0; toEnemy.normalize();\n  const forward=dir.clone();\n  const angle=forward.dot(toEnemy);\n  if(dist<2.6 && angle>0.5 && enemyEl().getAttribute('visible')){\n    applyDamageToEnemy(25,\"\u65ac\u6483\");\n  } else {\n    showScenario(\"\u7a7a\u632f\u308a\u2026\");\n  }\n  setTimeout(()=>attackCooldown=false,280);\n}\n\nfunction shootBullet(){\n  attackCooldown=true;\n  const bullet=document.createElement('a-sphere');\n  bullet.setAttribute('radius','0.07');\n  bullet.setAttribute('color','#e6f7ff');\n  bullet.setAttribute('material','emissive:#88d; metalness:.6; roughness:.2');\n  const dir=new AFRAME.THREE.Vector3(); camEl().object3D.getWorldDirection(dir); dir.normalize();\n  const start=rigEl().object3D.position.clone().add(new AFRAME.THREE.Vector3(0,1.3,0)).add(dir.clone().multiplyScalar(0.9));\n  bullet.setAttribute('position',`${start.x} ${start.y} ${start.z}`);\n  document.querySelector('a-scene').appendChild(bullet);\n  bullets.push({el:bullet, dir:dir.clone(), life:1800, speed:24});\n  setTimeout(()=>attackCooldown=false,120);\n}\n\nfunction applyDamageToEnemy(dmg,label){\n  if(!enemyEl().getAttribute('visible')) return;\n  enemyHP=Math.max(0, enemyHP - dmg);\n  updateBars();\n  const origColor=enemyBodyEl().getAttribute('color');\n  enemyBodyEl().setAttribute('color','#ffffff');\n  setTimeout(()=>enemyBodyEl().setAttribute('color', origColor), 80);\n  spawnDamageText(dmg,label);\n  if(enemyHP<=0){ killEnemy(); }\n}\n\nfunction spawnDamageText(dmg,label){\n  const t=document.createElement('a-text');\n  t.setAttribute('value',`${label} -${dmg}`);\n  t.setAttribute('color','#ffe6e6');\n  t.setAttribute('align','center');\n  const p=enemyEl().object3D.position.clone();\n  t.setAttribute('position',`${p.x} ${p.y+2.4} ${p.z}`);\n  t.setAttribute('animation__rise','property: position; to: '+`${p.x} ${p.y+3.2} ${p.z}`+'; dur:650; easing:easeOutQuad');\n  t.setAttribute('animation__fade','property: opacity; to:0; dur:650; easing:easeOutQuad');\n  document.querySelector('a-scene').appendChild(t);\n  setTimeout(()=>t.parentNode && t.parentNode.removeChild(t),700);\n}\n\nfunction killEnemy(){\n  enemyEl().setAttribute('visible','false');\n  showScenario(\"\u2705 \u6575\u3092\u5012\u3057\u305f\uff01 5\u79d2\u5f8c\u306b\u518d\u51fa\u73fe\u3059\u308b\u2026\");\n  setTimeout(()=>respawnEnemy(), 5000);\n}\nfunction respawnEnemy(){\n  enemyHP=enemyHPMax; updateBars();\n  const e=enemyEl();\n  const x = (Math.random()*6 - 3);\n  const z = -8.5 + (Math.random()*3 - 1.5);\n  e.setAttribute('position',`${x} 0 ${z}`);\n  e.setAttribute('visible','true');\n  showScenario(\"\u26a0\ufe0f \u65b0\u305f\u306a\u6575\u304c\u73fe\u308c\u305f\uff01\");\n}\n\n\/* \u5165\u529b\uff08E\/1\/2 \u306e\u4e92\u63db\u5f37\u5316\uff1a\u2605\u4fee\u6b63\uff09 *\/\nAFRAME.registerComponent('game-manager',{\n  init:function(){\n    window.addEventListener('keydown',(e)=>{\n      const k=e.key;\n      const c=e.code;\n      if(c==='KeyE' || k==='e' || k==='E') tryPickup();\n      if(c==='Digit1' || c==='Numpad1' || k==='1') equipSword();\n      if(c==='Digit2' || c==='Numpad2' || k==='2') equipGun();\n    });\n    window.addEventListener('mousedown',()=>attack());\n    updateBars(); advanceScenario(); setEquipmentLabel();\n  },\n  tick:function(time,dt){\n    const delta=dt\/1000;\n    const prompt=document.getElementById('pickupPrompt');\n    const rpos=rigEl().object3D.position;\n    let near=false;\n    ['swordPickup','gunPickup'].forEach(id=>{\n      const el=document.getElementById(id);\n      if(el.getAttribute('visible')){\n        const d=rpos.distanceTo(el.object3D.position);\n        if(d<2.0) near=true;\n      }\n    });\n    prompt.style.display = near?'block':'none';\n\n    \/\/ \u5f3e\n    for(let i=bullets.length-1;i>=0;i--){\n      const b=bullets[i];\n      if(!b.el.parentNode){ bullets.splice(i,1); continue; }\n      b.life -= dt;\n      const pos=b.el.object3D.position;\n      pos.add(b.dir.clone().multiplyScalar(24*delta));\n      if(b.life<=0){ b.el.parentNode.removeChild(b.el); bullets.splice(i,1); continue; }\n      if(enemyEl().getAttribute('visible')){\n        const d=pos.distanceTo(enemyEl().object3D.position);\n        if(d<1.35){\n          applyDamageToEnemy(15,\"\u5c04\u6483\");\n          b.el.parentNode.removeChild(b.el);\n          bullets.splice(i,1);\n        }\n      }\n    }\n    enemyEl().object3D.rotation.y += delta*0.3;\n  }\n});\n\nupdateBars();\nadvanceScenario();\n<\/script>\n<\/body>\n<\/html>\n<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_uf_show_specific_survey":0,"_uf_disable_surveys":false,"footnotes":""},"categories":[54,44],"tags":[3],"class_list":["post-26134","post","type-post","status-publish","format-standard","hentry","category-vr","category-44","tag-programming"],"aioseo_notices":[],"jetpack_featured_media_url":"","_links":{"self":[{"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/26134","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=26134"}],"version-history":[{"count":1,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/26134\/revisions"}],"predecessor-version":[{"id":26135,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/26134\/revisions\/26135"}],"wp:attachment":[{"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=26134"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=26134"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=26134"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}