{"id":13,"date":"2026-06-10T12:04:33","date_gmt":"2026-06-10T12:04:33","guid":{"rendered":"https:\/\/game.moo-bow.com\/?page_id=13"},"modified":"2026-06-10T12:04:33","modified_gmt":"2026-06-10T12:04:33","slug":"%e5%8d%93%e7%90%83","status":"publish","type":"page","link":"https:\/\/game.moo-bow.com\/?page_id=13","title":{"rendered":"\u5353\u7403"},"content":{"rendered":"<style>\n  .mbpong-wrap{\n    --pbg:#1b2440; --pink:#fff; --pacc:#ff8a3d; --pacc2:#46c2a8; --ppink:#ff6f91;\n    --pline:#2e3a5e; --pcard:#222d4d;\n    max-width:680px; margin:0 auto; color:var(--pink);\n    font-family:\"Hiragino Maru Gothic ProN\",\"Rounded Mplus 1c\",\"Segoe UI\",system-ui,sans-serif;\n  }\n  .mbpong-wrap *{box-sizing:border-box;}\n  .mbpong-wrap h2.mbpong-h{font-size:1.4rem; text-align:center; margin:.2em 0; color:var(--pink); border:none; padding:0; background:none;}\n  .mbpong-lead{text-align:center; color:#aeb8d8; font-size:.9rem; margin:0 0 16px;}\n\n  .mbpong-panel{background:var(--pcard); border:2px solid var(--pline); border-radius:18px; padding:18px; margin:0 0 16px;}\n  .mbpong-row{display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin:0 0 12px; justify-content:center;}\n  .mbpong-label{font-weight:700; font-size:.95rem;}\n  .mbpong-seg{display:flex; gap:6px; flex-wrap:wrap;}\n  .mbpong-seg button{border:2px solid var(--pline); background:#1b2440; color:var(--pink);\n    border-radius:999px; padding:8px 16px; font-size:.95rem; font-weight:700; cursor:pointer;}\n  .mbpong-seg button.mbpong-active{background:var(--pacc2); border-color:var(--pacc2); color:#0c1226;}\n  .mbpong-start{display:block; width:100%; margin-top:6px; background:var(--pacc); color:#fff;\n    border:none; border-radius:14px; padding:16px; font-size:1.2rem; font-weight:800; cursor:pointer; box-shadow:0 5px 0 #d9701f;}\n  .mbpong-start:active{transform:translateY(3px); box-shadow:0 2px 0 #d9701f;}\n  .mbpong-hint{text-align:center; color:#aeb8d8; font-size:.82rem; margin-top:10px;}\n\n  .mbpong-stage{display:none; text-align:center;}\n  .mbpong-scorebar{display:flex; justify-content:space-between; align-items:center; margin:0 0 10px; font-weight:800; font-size:1.1rem;}\n  .mbpong-scorebar .you{color:var(--pacc2);}\n  .mbpong-scorebar .cpu{color:var(--ppink);}\n  canvas.mbpong-canvas{width:100%; max-width:640px; height:auto; background:#0c1226; border:2px solid var(--pline);\n    border-radius:14px; touch-action:none; display:block; margin:0 auto;}\n  .mbpong-msg{min-height:1.5em; font-weight:800; font-size:1.1rem; margin:10px 0; color:var(--pacc);}\n  .mbpong-quit{display:block; margin:8px auto 0; background:#1b2440; color:#aeb8d8;\n    border:2px solid var(--pline); border-radius:999px; padding:8px 22px; font-size:.9rem; font-weight:700; cursor:pointer;}\n\n  .mbpong-result{display:none; text-align:center;}\n  .mbpong-rtitle{font-size:1.6rem; font-weight:900; margin:.3em 0;}\n  .mbpong-win{color:var(--pacc2);} .mbpong-lose{color:var(--ppink);}\n  .mbpong-again{display:block; width:100%; margin-top:16px; background:var(--pacc2); color:#0c1226;\n    border:none; border-radius:14px; padding:14px; font-size:1.1rem; font-weight:800; cursor:pointer; box-shadow:0 5px 0 #2f9d86;}\n  .mbpong-again:active{transform:translateY(3px); box-shadow:0 2px 0 #2f9d86;}\n  .mbpong-foot{text-align:center; color:#7e89ab; font-size:.75rem; margin-top:18px;}\n<\/style>\n\n<div class=\"mbpong-wrap\" id=\"mbpongApp\">\n  <h2 class=\"mbpong-h\">\ud83c\udfd3 \u305f\u3063\u304d\u3085\u3046\u30b2\u30fc\u30e0<\/h2>\n  <p class=\"mbpong-lead\">\u30de\u30a6\u30b9\uff08\u3086\u3073\uff09\u3067 \u30d0\u30fc \u3092 \u3046\u3054\u304b\u3057\u3066\u30015\u3066\u3093 \u3055\u304d\u306b \u3068\u3063\u305f\u3089 \u304b\u3061\uff01<\/p>\n\n  <div class=\"mbpong-panel\" id=\"mbpongSetting\">\n    <div class=\"mbpong-row\">\n      <span class=\"mbpong-label\">\u3080\u305a\u304b\u3057\u3055<\/span>\n      <div class=\"mbpong-seg\" id=\"mbpongLevelSeg\">\n        <button class=\"mbpong-lv mbpong-active\" data-level=\"easy\">\u3084\u3055\u3057\u3044<\/button>\n        <button class=\"mbpong-lv\" data-level=\"normal\">\u3075\u3064\u3046<\/button>\n        <button class=\"mbpong-lv\" data-level=\"hard\">\u3080\u305a\u304b\u3057\u3044<\/button>\n      <\/div>\n    <\/div>\n    <button class=\"mbpong-start\" id=\"mbpongStart\">\u30b9\u30bf\u30fc\u30c8\uff01<\/button>\n    <p class=\"mbpong-hint\">\u30d0\u30fc \u3092 \u3046\u3054\u304b\u3057\u3066 \u30dc\u30fc\u30eb \u3092 \u3046\u3061\u304b\u3048\u305d\u3046<\/p>\n  <\/div>\n\n  <div class=\"mbpong-panel mbpong-stage\" id=\"mbpongStage\">\n    <div class=\"mbpong-scorebar\">\n      <span class=\"you\">\u3042\u306a\u305f <span id=\"mbpongYou\">0<\/span><\/span>\n      <span class=\"cpu\"><span id=\"mbpongCpu\">0<\/span> \u30b7\u30fc\u30d4\u30fc\u30e6\u30fc<\/span>\n    <\/div>\n    <canvas class=\"mbpong-canvas\" id=\"mbpongCanvas\" width=\"640\" height=\"400\"><\/canvas>\n    <div class=\"mbpong-msg\" id=\"mbpongMsg\">\u30af\u30ea\u30c3\u30af\uff08\u30bf\u30c3\u30d7\uff09\u3067 \u306f\u3058\u3081\u308b<\/div>\n    <button class=\"mbpong-quit\" id=\"mbpongQuit\">\u3084\u3081\u308b<\/button>\n  <\/div>\n\n  <div class=\"mbpong-panel mbpong-result\" id=\"mbpongResult\">\n    <div class=\"mbpong-rtitle\" id=\"mbpongRTitle\">\u304b\u3061\uff01 \ud83c\udf89<\/div>\n    <div id=\"mbpongRScore\" style=\"color:#aeb8d8; margin-bottom:6px;\"><\/div>\n    <button class=\"mbpong-again\" id=\"mbpongAgain\">\u3082\u3046\u3044\u3061\u3069 \u3042\u305d\u3076<\/button>\n  <\/div>\n\n  <p class=\"mbpong-foot\">\u3080\u30fc\u307c\u30fc\u30b2\u30fc\u30e0<\/p>\n<\/div>\n\n<script>\n(function(){\n  var root=document.getElementById(\"mbpongApp\");\n  if(!root) return;\n  function $(id){return document.getElementById(id);}\n\n  var canvas=$(\"mbpongCanvas\"), ctx=canvas.getContext(\"2d\");\n  var W=640, H=400;\n  var level=\"easy\";\n  var WIN=5;\n\n  \/\/ \u30d1\u30c9\u30eb\n  var padW=12, padH=80;\n  var playerY=H\/2-padH\/2, cpuY=H\/2-padH\/2;\n  var playerX=16, cpuX=W-16-padW;\n  \/\/ \u30dc\u30fc\u30eb\n  var ball, youScore=0, cpuScore=0;\n  var running=false, waiting=true, rafId=null;\n\n  \/\/ \u96e3\u6613\u5ea6\u30d1\u30e9\u30e1\u30fc\u30bf\n  var LEVELS={\n    easy:  {ballSpeed:4.0, cpuSpeed:3.2},\n    normal:{ballSpeed:5.5, cpuSpeed:4.6},\n    hard:  {ballSpeed:7.0, cpuSpeed:6.0}\n  };\n\n  var lvBtns=$(\"mbpongLevelSeg\").getElementsByClassName(\"mbpong-lv\");\n  for(var i=0;i<lvBtns.length;i++){\n    (function(b){\n      b.addEventListener(\"click\",function(){\n        for(var k=0;k<lvBtns.length;k++){lvBtns[k].classList.remove(\"mbpong-active\");}\n        b.classList.add(\"mbpong-active\"); level=b.getAttribute(\"data-level\");\n      });\n    })(lvBtns[i]);\n  }\n\n  $(\"mbpongStart\").addEventListener(\"click\",startMatch);\n  $(\"mbpongAgain\").addEventListener(\"click\",function(){$(\"mbpongResult\").style.display=\"none\";$(\"mbpongSetting\").style.display=\"block\";});\n  $(\"mbpongQuit\").addEventListener(\"click\",function(){ stopLoop(); showSetting(); });\n\n  function getActiveLevel(){\n    var bs=$(\"mbpongLevelSeg\").getElementsByClassName(\"mbpong-lv\");\n    for(var i=0;i<bs.length;i++){ if(bs[i].classList.contains(\"mbpong-active\")) return bs[i].getAttribute(\"data-level\"); }\n    return \"easy\";\n  }\n    $(\"mbpongStage\").style.display=\"none\";\n    $(\"mbpongResult\").style.display=\"none\";\n    $(\"mbpongSetting\").style.display=\"block\";\n  }\n\n  function resetBall(dir){\n    var sp=LEVELS[level].ballSpeed;\n    var angle=(Math.random()*0.6-0.3); \/\/ -0.3\u301c0.3\u30e9\u30b8\u30a2\u30f3\n    ball={\n      x:W\/2, y:H\/2,\n      vx:(dir||1)*sp*Math.cos(angle),\n      vy:sp*Math.sin(angle),\n      r:8, speed:sp\n    };\n  }\n\n  function startMatch(){\n    level=getActiveLevel();\n    youScore=0; cpuScore=0;\n    $(\"mbpongYou\").textContent=\"0\"; $(\"mbpongCpu\").textContent=\"0\";\n    playerY=H\/2-padH\/2; cpuY=H\/2-padH\/2;\n    $(\"mbpongSetting\").style.display=\"none\";\n    $(\"mbpongResult\").style.display=\"none\";\n    $(\"mbpongStage\").style.display=\"block\";\n    resetBall(Math.random()<0.5?1:-1);\n    waiting=true; running=false;\n    $(\"mbpongMsg\").textContent=\"\u30af\u30ea\u30c3\u30af\uff08\u30bf\u30c3\u30d7\uff09\u3067 \u306f\u3058\u3081\u308b\";\n    draw();\n  }\n\n  \/\/ \u30de\u30a6\u30b9\u30fb\u30bf\u30c3\u30c1\u3067\u30d1\u30c9\u30eb\u79fb\u52d5\n  function moveTo(clientY){\n    var rect=canvas.getBoundingClientRect();\n    var scale=H\/rect.height;\n    var y=(clientY-rect.top)*scale;\n    playerY=y-padH\/2;\n    if(playerY<0)playerY=0;\n    if(playerY>H-padH)playerY=H-padH;\n  }\n  canvas.addEventListener(\"mousemove\",function(e){ moveTo(e.clientY); });\n  canvas.addEventListener(\"touchmove\",function(e){ if(e.touches[0]){moveTo(e.touches[0].clientY); e.preventDefault();} },{passive:false});\n  canvas.addEventListener(\"click\",function(){ if(waiting){ waiting=false; running=true; $(\"mbpongMsg\").textContent=\"\"; loop(); } });\n  canvas.addEventListener(\"touchstart\",function(e){ if(waiting){ waiting=false; running=true; $(\"mbpongMsg\").textContent=\"\"; loop(); } });\n\n  function loop(){\n    if(!running) return;\n    update();\n    draw();\n    rafId=requestAnimationFrame(loop);\n  }\n  function stopLoop(){ running=false; if(rafId) cancelAnimationFrame(rafId); }\n\n  function update(){\n    \/\/ \u30dc\u30fc\u30eb\u79fb\u52d5\n    ball.x+=ball.vx; ball.y+=ball.vy;\n    \/\/ \u4e0a\u4e0b\u306e\u58c1\n    if(ball.y-ball.r<0){ ball.y=ball.r; ball.vy*=-1; }\n    if(ball.y+ball.r>H){ ball.y=H-ball.r; ball.vy*=-1; }\n\n    \/\/ \u30d7\u30ec\u30a4\u30e4\u30fc\u306e\u30d1\u30c9\u30eb\uff08\u5de6\uff09\n    if(ball.vx<0 && ball.x-ball.r < playerX+padW && ball.x-ball.r > playerX-6){\n      if(ball.y>playerY && ball.y<playerY+padH){\n        ball.x=playerX+padW+ball.r;\n        ball.vx*=-1;\n        var hit=(ball.y-(playerY+padH\/2))\/(padH\/2); \/\/ -1\u301c1\n        ball.vy=hit*ball.speed*0.8;\n        ball.vx*=1.03; \/\/ \u5c11\u3057\u305a\u3064\u901f\u304f\n      }\n    }\n    \/\/ CPU\u306e\u30d1\u30c9\u30eb\uff08\u53f3\uff09\n    if(ball.vx>0 && ball.x+ball.r > cpuX && ball.x+ball.r < cpuX+padW+6){\n      if(ball.y>cpuY && ball.y<cpuY+padH){\n        ball.x=cpuX-ball.r;\n        ball.vx*=-1;\n        var hit2=(ball.y-(cpuY+padH\/2))\/(padH\/2);\n        ball.vy=hit2*ball.speed*0.8;\n        ball.vx*=1.03;\n      }\n    }\n\n    \/\/ CPU AI\uff08\u30dc\u30fc\u30eb\u3092\u8ffd\u3046\u30fb\u96e3\u6613\u5ea6\u3067\u901f\u3055\u5909\u5316\uff09\n    var cpuSp=LEVELS[level].cpuSpeed;\n    var target=ball.y-padH\/2;\n    if(cpuY+padH\/2 < ball.y-6) cpuY+=cpuSp;\n    else if(cpuY+padH\/2 > ball.y+6) cpuY-=cpuSp;\n    if(cpuY<0)cpuY=0; if(cpuY>H-padH)cpuY=H-padH;\n\n    \/\/ \u5f97\u70b9\n    if(ball.x<0){ cpuScore++; point(\"cpu\"); }\n    else if(ball.x>W){ youScore++; point(\"you\"); }\n  }\n\n  function point(who){\n    $(\"mbpongYou\").textContent=youScore;\n    $(\"mbpongCpu\").textContent=cpuScore;\n    if(youScore>=WIN || cpuScore>=WIN){ endMatch(); return; }\n    running=false;\n    resetBall(who===\"you\"?1:-1);\n    waiting=true;\n    $(\"mbpongMsg\").textContent=\"\u30af\u30ea\u30c3\u30af\uff08\u30bf\u30c3\u30d7\uff09\u3067 \u3064\u304e\u3078\";\n    draw();\n  }\n\n  function endMatch(){\n    stopLoop();\n    var win=youScore>cpuScore;\n    $(\"mbpongRTitle\").textContent= win ? \"\u304b\u3061\uff01 \ud83c\udf89\" : \"\u307e\u3051\u2026 \ud83d\udca6\";\n    $(\"mbpongRTitle\").className=\"mbpong-rtitle \"+(win?\"mbpong-win\":\"mbpong-lose\");\n    $(\"mbpongRScore\").textContent=\"\u3042\u306a\u305f \"+youScore+\" - \"+cpuScore+\" \u30b7\u30fc\u30d4\u30fc\u30e6\u30fc\";\n    $(\"mbpongStage\").style.display=\"none\";\n    $(\"mbpongResult\").style.display=\"block\";\n  }\n\n  function draw(){\n    ctx.clearRect(0,0,W,H);\n    \/\/ \u30bb\u30f3\u30bf\u30fc\u30e9\u30a4\u30f3\n    ctx.strokeStyle=\"rgb(46,58,94)\"; ctx.lineWidth=3; ctx.setLineDash([10,12]);\n    ctx.beginPath(); ctx.moveTo(W\/2,0); ctx.lineTo(W\/2,H); ctx.stroke(); ctx.setLineDash([]);\n    \/\/ \u30d1\u30c9\u30eb\n    ctx.fillStyle=\"rgb(70,194,168)\"; ctx.fillRect(playerX,playerY,padW,padH);\n    ctx.fillStyle=\"rgb(255,111,145)\"; ctx.fillRect(cpuX,cpuY,padW,padH);\n    \/\/ \u30dc\u30fc\u30eb\n    ctx.fillStyle=\"rgb(255,138,61)\"; ctx.beginPath(); ctx.arc(ball.x,ball.y,ball.r,0,Math.PI*2); ctx.fill();\n  }\n})();\n<\/script>\n    \n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-13","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/game.moo-bow.com\/index.php?rest_route=\/wp\/v2\/pages\/13","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/game.moo-bow.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/game.moo-bow.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/game.moo-bow.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/game.moo-bow.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=13"}],"version-history":[{"count":1,"href":"https:\/\/game.moo-bow.com\/index.php?rest_route=\/wp\/v2\/pages\/13\/revisions"}],"predecessor-version":[{"id":14,"href":"https:\/\/game.moo-bow.com\/index.php?rest_route=\/wp\/v2\/pages\/13\/revisions\/14"}],"wp:attachment":[{"href":"https:\/\/game.moo-bow.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=13"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}