{"id":25945,"date":"2025-03-31T09:19:55","date_gmt":"2025-03-31T00:19:55","guid":{"rendered":"http:\/\/www.tyosuke20xx.com\/blog\/?p=25945"},"modified":"2025-03-31T09:19:57","modified_gmt":"2025-03-31T00:19:57","slug":"rpg","status":"publish","type":"post","link":"http:\/\/www.tyosuke20xx.com\/blog\/?p=25945","title":{"rendered":"RPG"},"content":{"rendered":"\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html>\n&lt;html lang=\"ja\">\n&lt;head>\n  &lt;meta charset=\"UTF-8\">\n  &lt;title>\u30ec\u30c8\u30edRPG&lt;\/title>\n  &lt;style>\n    body {\n      background: black;\n      color: white;\n      text-align: center;\n      font-family: monospace;\n    }\n    canvas {\n      border: 2px solid white;\n      background: #202020;\n      image-rendering: pixelated;\n    }\n    #ui {\n      margin-top: 10px;\n    }\n  &lt;\/style>\n&lt;\/head>\n&lt;body>\n  &lt;h1>\u30ec\u30c8\u30ed\u98a8RPG&lt;\/h1>\n  &lt;canvas id=\"game\" width=\"160\" height=\"160\">&lt;\/canvas>\n  &lt;div id=\"ui\">\n    &lt;p id=\"status\">HP: 10&lt;\/p>\n    &lt;p id=\"log\">&lt;\/p>\n  &lt;\/div>\n\n  &lt;script>\n    const canvas = document.getElementById(\"game\");\n    const ctx = canvas.getContext(\"2d\");\n    const statusEl = document.getElementById(\"status\");\n    const logEl = document.getElementById(\"log\");\n\n    const tileSize = 16;\n\n    const map = &#91;\n      &#91;0, 0, 1, 0, 0, 0, 0, 0, 1, 0],\n      &#91;1, 0, 1, 0, 1, 1, 0, 0, 1, 0],\n      &#91;1, 0, 0, 0, 0, 0, 0, 1, 0, 0],\n      &#91;1, 1, 1, 1, 1, 0, 1, 1, 0, 1],\n      &#91;0, 0, 0, 0, 1, 0, 0, 0, 0, 1],\n      &#91;0, 1, 1, 0, 0, 0, 1, 1, 0, 0],\n      &#91;0, 0, 1, 1, 1, 1, 0, 1, 1, 0],\n      &#91;1, 0, 0, 0, 0, 0, 0, 0, 0, 0],\n      &#91;1, 1, 1, 1, 1, 1, 1, 1, 1, 0],\n      &#91;0, 0, 0, 0, 0, 0, 0, 0, 0, 0],\n    ];\n\n    const player = {\n      x: 0,\n      y: 0,\n      hp: 10,\n      color: \"#ff0000\"\n    };\n\n    const enemies = &#91;\n      { x: 4, y: 2, hp: 5, alive: true },\n      { x: 8, y: 7, hp: 7, alive: true },\n    ];\n\n    function drawMap() {\n      for (let y = 0; y &lt; map.length; y++) {\n        for (let x = 0; x &lt; map&#91;0].length; x++) {\n          ctx.fillStyle = map&#91;y]&#91;x] === 1 ? \"#444\" : \"#88cc88\";\n          ctx.fillRect(x * tileSize, y * tileSize, tileSize, tileSize);\n        }\n      }\n    }\n\n    function drawPlayer() {\n      ctx.fillStyle = player.color;\n      ctx.fillRect(player.x * tileSize, player.y * tileSize, tileSize, tileSize);\n    }\n\n    function drawEnemies() {\n      ctx.fillStyle = \"#ffcc00\";\n      enemies.forEach(enemy => {\n        if (enemy.alive) {\n          ctx.fillRect(enemy.x * tileSize, enemy.y * tileSize, tileSize, tileSize);\n        }\n      });\n    }\n\n    function canMove(x, y) {\n      return map&#91;y] &amp;&amp; map&#91;y]&#91;x] === 0;\n    }\n\n    function updateUI() {\n      statusEl.textContent = `HP: ${player.hp}`;\n    }\n\n    function showLog(text) {\n      logEl.textContent = text;\n    }\n\n    function battle(enemy) {\n      showLog(\"\u6226\u95d8\u958b\u59cb\uff01\");\n      const battleInterval = setInterval(() => {\n        \/\/ \u30d7\u30ec\u30a4\u30e4\u30fc\u306e\u653b\u6483\n        let playerDmg = Math.floor(Math.random() * 3) + 1;\n        enemy.hp -= playerDmg;\n        showLog(`\u3042\u306a\u305f\u306e\u653b\u6483\uff01 \u6575\u306b${playerDmg}\u30c0\u30e1\u30fc\u30b8\uff01`);\n        \n        if (enemy.hp &lt;= 0) {\n          showLog(\"\u6575\u3092\u5012\u3057\u305f\uff01\");\n          enemy.alive = false;\n          clearInterval(battleInterval);\n          gameLoop();\n          return;\n        }\n\n        \/\/ \u6575\u306e\u653b\u6483\n        let enemyDmg = Math.floor(Math.random() * 3) + 1;\n        player.hp -= enemyDmg;\n        updateUI();\n        showLog(`\u6575\u306e\u53cd\u6483\uff01 \u3042\u306a\u305f\u306f${enemyDmg}\u30c0\u30e1\u30fc\u30b8\u3092\u53d7\u3051\u305f\uff01`);\n\n        if (player.hp &lt;= 0) {\n          showLog(\"\u3042\u306a\u305f\u306f\u5012\u308c\u305f\u2026 GAME OVER\");\n          clearInterval(battleInterval);\n          document.removeEventListener(\"keydown\", handleKey);\n        }\n\n      }, 1000);\n    }\n\n    function checkEnemy(x, y) {\n      for (let enemy of enemies) {\n        if (enemy.x === x &amp;&amp; enemy.y === y &amp;&amp; enemy.alive) {\n          battle(enemy);\n          return true;\n        }\n      }\n      return false;\n    }\n\n    function gameLoop() {\n      ctx.clearRect(0, 0, canvas.width, canvas.height);\n      drawMap();\n      drawEnemies();\n      drawPlayer();\n      updateUI();\n    }\n\n    function handleKey(e) {\n      let nx = player.x;\n      let ny = player.y;\n\n      if (e.key === \"ArrowUp\") ny--;\n      if (e.key === \"ArrowDown\") ny++;\n      if (e.key === \"ArrowLeft\") nx--;\n      if (e.key === \"ArrowRight\") nx++;\n\n      if (canMove(nx, ny)) {\n        player.x = nx;\n        player.y = ny;\n        if (!checkEnemy(nx, ny)) {\n          showLog(\"\"); \/\/ \u6226\u95d8\u4e2d\u3058\u3083\u306a\u3044\u306a\u3089\u30ed\u30b0\u3092\u6d88\u3059\n        }\n      }\n\n      gameLoop();\n    }\n\n    document.addEventListener(\"keydown\", handleKey);\n    gameLoop();\n  &lt;\/script>\n&lt;\/body>\n&lt;\/html><\/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":[],"class_list":["post-25945","post","type-post","status-publish","format-standard","hentry","category-44"],"aioseo_notices":[],"jetpack_featured_media_url":"","_links":{"self":[{"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/25945","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=25945"}],"version-history":[{"count":2,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/25945\/revisions"}],"predecessor-version":[{"id":25947,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/25945\/revisions\/25947"}],"wp:attachment":[{"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=25945"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=25945"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.tyosuke20xx.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=25945"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}