{"id":25832,"date":"2025-02-01T05:11:16","date_gmt":"2025-01-31T20:11:16","guid":{"rendered":"http:\/\/www.tyosuke20xx.com\/blog\/?p=25832"},"modified":"2025-02-01T05:11:18","modified_gmt":"2025-01-31T20:11:18","slug":"%e3%83%96%e3%83%ad%e3%83%83%e3%82%af%e5%b4%a9%e3%81%97","status":"publish","type":"post","link":"http:\/\/www.tyosuke20xx.com\/blog\/?p=25832","title":{"rendered":"\u30d6\u30ed\u30c3\u30af\u5d29\u3057"},"content":{"rendered":"\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html>\n&lt;html>\n&lt;head>\n  &lt;meta charset=\"utf-8\">\n  &lt;title>Breakout Game&lt;\/title>\n  &lt;style>\n    \/* \u753b\u9762\u4e2d\u592e\u306b\u30ad\u30e3\u30f3\u30d0\u30b9\u3092\u8868\u793a *\/\n    canvas {\n      background: #eee;\n      display: block;\n      margin: 30px auto;\n      border: 1px solid #333;\n    }\n  &lt;\/style>\n&lt;\/head>\n&lt;body>\n  &lt;canvas id=\"myCanvas\" width=\"480\" height=\"320\">&lt;\/canvas>\n  &lt;script>\n    \/\/ \u30ad\u30e3\u30f3\u30d0\u30b9\u3068\u30b3\u30f3\u30c6\u30ad\u30b9\u30c8\u3092\u53d6\u5f97\n    const canvas = document.getElementById(\"myCanvas\");\n    const ctx = canvas.getContext(\"2d\");\n\n    \/\/ \u30dc\u30fc\u30eb\u306e\u8a2d\u5b9a\n    let x = canvas.width \/ 2;     \/\/ \u30dc\u30fc\u30eb\u306e\u521d\u671f\u4f4d\u7f6e X\n    let y = canvas.height - 30;   \/\/ \u30dc\u30fc\u30eb\u306e\u521d\u671f\u4f4d\u7f6e Y\n    const ballRadius = 8;        \/\/ \u30dc\u30fc\u30eb\u306e\u534a\u5f84\n    let dx = 2;                  \/\/ \u30dc\u30fc\u30eb\u306e\u79fb\u52d5\u901f\u5ea6 X\u65b9\u5411\n    let dy = -2;                 \/\/ \u30dc\u30fc\u30eb\u306e\u79fb\u52d5\u901f\u5ea6 Y\u65b9\u5411\n\n    \/\/ \u30d1\u30c9\u30eb\u306e\u8a2d\u5b9a\n    const paddleHeight = 10;\n    const paddleWidth = 75;\n    let paddleX = (canvas.width - paddleWidth) \/ 2; \/\/ \u30d1\u30c9\u30eb\u306e\u521d\u671f\u4f4d\u7f6e\n    let rightPressed = false;    \/\/ \u53f3\u30ad\u30fc\u304c\u62bc\u3055\u308c\u3066\u3044\u308b\u304b\n    let leftPressed = false;     \/\/ \u5de6\u30ad\u30fc\u304c\u62bc\u3055\u308c\u3066\u3044\u308b\u304b\n\n    \/\/ \u30d6\u30ed\u30c3\u30af\uff08\u30ec\u30f3\u30ac\uff09\u306e\u8a2d\u5b9a\n    const brickRowCount = 5;     \/\/ \u884c\u6570\n    const brickColumnCount = 7;  \/\/ \u5217\u6570\n    const brickWidth = 50;       \/\/ \u5e45\n    const brickHeight = 20;      \/\/ \u9ad8\u3055\n    const brickPadding = 10;     \/\/ \u30d6\u30ed\u30c3\u30af\u9593\u306e\u4f59\u767d\n    const brickOffsetTop = 30;   \/\/ \u753b\u9762\u4e0a\u7aef\u304b\u3089\u306e\u30aa\u30d5\u30bb\u30c3\u30c8\n    const brickOffsetLeft = 30;  \/\/ \u753b\u9762\u5de6\u7aef\u304b\u3089\u306e\u30aa\u30d5\u30bb\u30c3\u30c8\n\n    \/\/ \u30b9\u30b3\u30a2\u3084\u30e9\u30a4\u30d5\n    let score = 0;\n    let lives = 3; \/\/ \u6b8b\u6a5f\n\n    \/\/ \u30d6\u30ed\u30c3\u30af\u3092\u683c\u7d0d\u3059\u308b2\u6b21\u5143\u914d\u5217\n    let bricks = &#91;];\n    for(let c = 0; c &lt; brickColumnCount; c++) {\n      bricks&#91;c] = &#91;];\n      for(let r = 0; r &lt; brickRowCount; r++) {\n        \/\/ x, y\u306f\u5f8c\u3067\u8a08\u7b97\u3059\u308b\u306e\u3067\u3001\u3068\u308a\u3042\u3048\u305a\u30b9\u30c6\u30fc\u30bf\u30b9\u3060\u3051\u6301\u305f\u305b\u3066\u304a\u304f\n        bricks&#91;c]&#91;r] = { x: 0, y: 0, status: 1 }; \n      }\n    }\n\n    \/\/ \u30ad\u30fc\u30dc\u30fc\u30c9\u30a4\u30d9\u30f3\u30c8\u306e\u30ea\u30b9\u30ca\u30fc\u767b\u9332\n    document.addEventListener(\"keydown\", keyDownHandler, false);\n    document.addEventListener(\"keyup\", keyUpHandler, false);\n\n    function keyDownHandler(e) {\n      if(e.key === \"Right\" || e.key === \"ArrowRight\") {\n        rightPressed = true;\n      }\n      else if(e.key === \"Left\" || e.key === \"ArrowLeft\") {\n        leftPressed = true;\n      }\n    }\n\n    function keyUpHandler(e) {\n      if(e.key === \"Right\" || e.key === \"ArrowRight\") {\n        rightPressed = false;\n      }\n      else if(e.key === \"Left\" || e.key === \"ArrowLeft\") {\n        leftPressed = false;\n      }\n    }\n\n    \/\/ \u30d6\u30ed\u30c3\u30af\u3068\u30dc\u30fc\u30eb\u306e\u5f53\u305f\u308a\u5224\u5b9a\n    function collisionDetection() {\n      for(let c = 0; c &lt; brickColumnCount; c++) {\n        for(let r = 0; r &lt; brickRowCount; r++) {\n          let b = bricks&#91;c]&#91;r];\n          \/\/ status=1 \u306e\u30d6\u30ed\u30c3\u30af\u3060\u3051\u5f53\u305f\u308a\u5224\u5b9a\u3092\u3059\u308b\n          if(b.status === 1) {\n            if(\n              x > b.x &amp;&amp; \n              x &lt; b.x + brickWidth &amp;&amp; \n              y > b.y &amp;&amp; \n              y &lt; b.y + brickHeight\n            ) {\n              dy = -dy;\n              b.status = 0;  \/\/ \u30d6\u30ed\u30c3\u30af\u3092\u6d88\u3059\n              score++;\n              \/\/ \u5168\u30d6\u30ed\u30c3\u30af\u7834\u58ca \u2192 \u30af\u30ea\u30a2\n              if(score === brickRowCount * brickColumnCount) {\n                alert(\"YOU WIN, CONGRATS!\");\n                document.location.reload(); \/\/ \u30da\u30fc\u30b8\u3092\u30ea\u30ed\u30fc\u30c9\u3057\u3066\u518d\u958b\n              }\n            }\n          }\n        }\n      }\n    }\n\n    \/\/ \u30dc\u30fc\u30eb\u3092\u63cf\u753b\n    function drawBall() {\n      ctx.beginPath();\n      ctx.arc(x, y, ballRadius, 0, Math.PI * 2);\n      ctx.fillStyle = \"#0095DD\";\n      ctx.fill();\n      ctx.closePath();\n    }\n\n    \/\/ \u30d1\u30c9\u30eb\u3092\u63cf\u753b\n    function drawPaddle() {\n      ctx.beginPath();\n      ctx.rect(paddleX, canvas.height - paddleHeight - 5, paddleWidth, paddleHeight);\n      ctx.fillStyle = \"#0095DD\";\n      ctx.fill();\n      ctx.closePath();\n    }\n\n    \/\/ \u30d6\u30ed\u30c3\u30af\u3092\u63cf\u753b\n    function drawBricks() {\n      for(let c = 0; c &lt; brickColumnCount; c++) {\n        for(let r = 0; r &lt; brickRowCount; r++) {\n          if(bricks&#91;c]&#91;r].status === 1) {\n            let brickX = (c * (brickWidth + brickPadding)) + brickOffsetLeft;\n            let brickY = (r * (brickHeight + brickPadding)) + brickOffsetTop;\n            bricks&#91;c]&#91;r].x = brickX;\n            bricks&#91;c]&#91;r].y = brickY;\n            ctx.beginPath();\n            ctx.rect(brickX, brickY, brickWidth, brickHeight);\n            ctx.fillStyle = \"#6CBE47\";\n            ctx.fill();\n            ctx.closePath();\n          }\n        }\n      }\n    }\n\n    \/\/ \u30b9\u30b3\u30a2\u3092\u63cf\u753b\n    function drawScore() {\n      ctx.font = \"16px Arial\";\n      ctx.fillStyle = \"#333\";\n      ctx.fillText(\"Score: \" + score, 8, 20);\n    }\n\n    \/\/ \u30e9\u30a4\u30d5\u3092\u63cf\u753b\n    function drawLives() {\n      ctx.font = \"16px Arial\";\n      ctx.fillStyle = \"#333\";\n      ctx.fillText(\"Lives: \" + lives, canvas.width - 65, 20);\n    }\n\n    \/\/ \u6bce\u30d5\u30ec\u30fc\u30e0\u547c\u3073\u51fa\u3057\u3066\u63cf\u753b\uff06\u66f4\u65b0\u3059\u308b\u30e1\u30a4\u30f3\u95a2\u6570\n    function draw() {\n      ctx.clearRect(0, 0, canvas.width, canvas.height);\n\n      \/\/ \u5404\u30d1\u30fc\u30c4\u306e\u63cf\u753b\n      drawBricks();\n      drawBall();\n      drawPaddle();\n      drawScore();\n      drawLives();\n      collisionDetection();\n\n      \/\/ \u30dc\u30fc\u30eb\u3092\u5de6\u53f3\u306e\u58c1\u3067\u53cd\u5c04\n      if(x + dx > canvas.width - ballRadius || x + dx &lt; ballRadius) {\n        dx = -dx;\n      }\n      \/\/ \u4e0a\u58c1\u3067\u53cd\u5c04\n      if(y + dy &lt; ballRadius) {\n        dy = -dy;\n      }\n      \/\/ \u4e0b\u306b\u843d\u3061\u305f\u3089\u30e9\u30a4\u30d5\u30921\u6e1b\u3089\u3057\u3066\u30ea\u30bb\u30c3\u30c8\n      else if(y + dy > canvas.height - ballRadius) {\n        \/\/ \u30d1\u30c9\u30eb\u306e\u7bc4\u56f2\u5185\u304b\u3069\u3046\u304b\n        if(x > paddleX &amp;&amp; x &lt; paddleX + paddleWidth) {\n          \/\/ \u30d1\u30c9\u30eb\u306b\u5f53\u305f\u3063\u305f\u3089\u306f\u306d\u8fd4\u3059\n          dy = -dy;\n        } else {\n          \/\/ \u30df\u30b9 \u2192 \u30e9\u30a4\u30d5\u6e1b\u5c11\n          lives--;\n          if(!lives) {\n            \/\/ \u30e9\u30a4\u30d50 \u2192 \u30b2\u30fc\u30e0\u30aa\u30fc\u30d0\u30fc\n            alert(\"GAME OVER\");\n            document.location.reload();\n          } else {\n            \/\/ \u30dc\u30fc\u30eb\u3068\u30d1\u30c9\u30eb\u3092\u521d\u671f\u4f4d\u7f6e\u3078\n            x = canvas.width \/ 2;\n            y = canvas.height - 30;\n            dx = 2;\n            dy = -2;\n            paddleX = (canvas.width - paddleWidth) \/ 2;\n          }\n        }\n      }\n\n      \/\/ \u30dc\u30fc\u30eb\u4f4d\u7f6e\u306e\u66f4\u65b0\n      x += dx;\n      y += dy;\n\n      \/\/ \u30d1\u30c9\u30eb\u306e\u64cd\u4f5c\n      if(rightPressed &amp;&amp; paddleX &lt; canvas.width - paddleWidth) {\n        paddleX += 7;\n      } else if(leftPressed &amp;&amp; paddleX > 0) {\n        paddleX -= 7;\n      }\n\n      requestAnimationFrame(draw);\n    }\n\n    \/\/ \u30b2\u30fc\u30e0\u958b\u59cb\n    draw();\n  &lt;\/script>\n&lt;\/body>\n&lt;\/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":[44],"tags":[3],"class_list":["post-25832","post","type-post","status-publish","format-standard","hentry","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\/25832","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=25832"}],"version-history":[{"count":1,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/25832\/revisions"}],"predecessor-version":[{"id":25833,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/25832\/revisions\/25833"}],"wp:attachment":[{"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=25832"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=25832"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=25832"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}