{"id":962,"date":"2024-08-19T15:02:29","date_gmt":"2024-08-19T06:02:29","guid":{"rendered":"https:\/\/route-zero.com\/recruit\/route\/962\/"},"modified":"2025-02-27T10:46:27","modified_gmt":"2025-02-27T01:46:27","slug":"962","status":"publish","type":"route","link":"https:\/\/route-zero.com\/recruit\/route\/962\/","title":{"rendered":"\u30b2\u30fc\u30e0\u3092\u4f5c\u308a\u306a\u304c\u3089\u5b66\u3076\u30d7\u30ed\u30b0\u30e9\u30e0\u306e\u52d5\u304d\u3068\u30ed\u30b8\u30c3\u30af"},"content":{"rendered":"
\n

\u3053\u3093\u306b\u3061\u306f\uff01
\u672c\u8a18\u4e8b\u3067\u306f\u3001HTML5\u306e <canvas> \u8981\u7d20\u3068JavaScript\u3092\u4f7f\u7528\u3057\u3066\u3001\u30b7\u30f3\u30d7\u30eb\u306a\u30aa\u30bb\u30ed\u30b2\u30fc\u30e0\u3092\u4f5c\u6210\u3059\u308b\u65b9\u6cd5\u3092\u89e3\u8aac\u3057\u307e\u3059\u3002
\u30b2\u30fc\u30e0\u306e\u9032\u884c\u3084\u30ed\u30b8\u30c3\u30af\u306e\u51e6\u7406\u3092\u5b66\u3073\u306a\u304c\u3089\u3001\u5b9f\u969b\u306b\u52d5\u304f\u30aa\u30bb\u30ed\u30b2\u30fc\u30e0\u3092\u4f5c\u6210\u3059\u308b\u904e\u7a0b\u3092\u8ffd\u3063\u3066\u3044\u304d\u307e\u3059\u3002<\/p>\n

<\/p>\n

\"\u30aa\u30bb\u30ed\u30b2\u30fc\u30e0\u306e\u30a4\u30e1\u30fc\u30b8\"<\/figure>\n

\u5168\u4f53\u306e\u30b3\u30fc\u30c9\u306f\u3053\u3061\u3089\uff01<\/p>\n

<!DOCTYPE html>\r\n    <html lang="ja">\r\n      <head>\r\n        <meta charset="UTF-8" \/>\r\n        <meta name="viewport" content="width=device-width, initial-scale=1.0" \/>\r\n        <title>\u30aa\u30bb\u30ed\u30b2\u30fc\u30e0<\/title>\r\n        <style>\r\n          body {\r\n            display: flex;\r\n            justify-content: center;\r\n            align-items: center;\r\n            height: 100vh;\r\n            background-color: #2c3e50;\r\n            margin: 0;\r\n          }\r\n          #game-container {\r\n            text-align: center;\r\n          }\r\n          canvas {\r\n            background-color: green;\r\n            display: block;\r\n            margin: 0 auto;\r\n          }\r\n          #controls {\r\n            margin-top: 10px;\r\n          }\r\n          button {\r\n            padding: 10px 20px;\r\n            font-size: 16px;\r\n            border: none;\r\n            background-color: #3498db;\r\n            color: #fff;\r\n            cursor: pointer;\r\n            border-radius: 5px;\r\n          }\r\n          button:hover {\r\n            background-color: #2980b9;\r\n          }\r\n        <\/style>\r\n      <\/head>\r\n      <body>\r\n        <div id="game-container">\r\n          <canvas id="js-canvas"><\/canvas>\r\n          <div id="js-result"><\/div>\r\n          <div id="controls">\r\n            <button id="reset-button">Reset Game<\/button>\r\n          <\/div>\r\n        <\/div>\r\n    \r\n        <script>\r\n          \/\/ \u30ad\u30e3\u30f3\u30d0\u30b9\uff08\u30b2\u30fc\u30e0\u76e4\uff09\u306e\u8981\u7d20\u3092\u53d6\u5f97\u3057\u3001\u63cf\u753b\u306e\u305f\u3081\u306e\u30b3\u30f3\u30c6\u30ad\u30b9\u30c8\u3092\u53d6\u5f97\r\n          const canvas = document.getElementById("js-canvas");\r\n          const ctx = canvas.getContext("2d");\r\n    \r\n          \/\/ \u7d50\u679c\u8868\u793a\u7528\u306e\u8981\u7d20\u3092\u53d6\u5f97\r\n          const result = document.getElementById("js-result");\r\n    \r\n          \/\/ \u30ad\u30e3\u30f3\u30d0\u30b9\u306e\u5e45\u3092\u8a2d\u5b9a\uff08\u6700\u5927480px\u3001\u30a6\u30a3\u30f3\u30c9\u30a6\u306e\u5e45\u306b\u5fdc\u3058\u3066\u8abf\u6574\uff09\r\n          canvas.width = Math.min(480, window.innerWidth - 20);\r\n          canvas.height = canvas.width;\r\n    \r\n          \/\/ \u30b2\u30fc\u30e0\u30dc\u30fc\u30c9\u306e\u30b0\u30ea\u30c3\u30c9\u30b5\u30a4\u30ba\uff088\u00d78\uff09\r\n          const GRID_SIZE = 8;\r\n    \r\n          \/\/ 1\u30de\u30b9\u306e\u5927\u304d\u3055\u3092\u8a08\u7b97\r\n          const CELL_SIZE = canvas.width \/ GRID_SIZE;\r\n    \r\n          \/\/ \u30b2\u30fc\u30e0\u306e\u72b6\u614b\u3092\u7ba1\u7406\u3059\u308b\u5909\u6570\r\n          let board = []; \/\/ 8\u00d78\u306e\u30b2\u30fc\u30e0\u30dc\u30fc\u30c9\uff082\u6b21\u5143\u914d\u5217\uff09\r\n          let currentPlayer = "black"; \/\/ \u73fe\u5728\u306e\u30d7\u30ec\u30a4\u30e4\u30fc\uff08\u9ed2 or \u767d\uff09\r\n          let gameState = "playing"; \/\/ \u30b2\u30fc\u30e0\u306e\u72b6\u614b\uff08"playing"\uff1a\u9032\u884c\u4e2d\u3001"gameover"\uff1a\u7d42\u4e86\uff09\r\n    \r\n          \/\/ \u30b2\u30fc\u30e0\u3092\u521d\u671f\u5316\u3059\u308b\u95a2\u6570\r\n          function initGame() {\r\n            \/\/ 8\u00d78\u306e\u30dc\u30fc\u30c9\u3092\u4f5c\u6210\u3057\u3001\u3059\u3079\u3066\u306e\u30de\u30b9\u3092null\uff08\u7a7a\uff09\u3067\u57cb\u3081\u308b\r\n            board = Array.from({ length: GRID_SIZE }, () => Array(GRID_SIZE).fill(null));\r\n    \r\n            \/\/ \u521d\u671f\u914d\u7f6e\uff08\u30aa\u30bb\u30ed\u306e\u6a19\u6e96\u7684\u306a\u958b\u59cb\u4f4d\u7f6e\uff09\r\n            board[3][3] = board[4][4] = "white";\r\n            board[3][4] = board[4][3] = "black";\r\n    \r\n            \/\/ \u9ed2\u304b\u3089\u30b9\u30bf\u30fc\u30c8\r\n            currentPlayer = "black";\r\n            gameState = "playing";\r\n    \r\n            \/\/ \u30dc\u30fc\u30c9\u3092\u63cf\u753b\r\n            drawBoard();\r\n          }\r\n    \r\n          \/\/ \u30b2\u30fc\u30e0\u30dc\u30fc\u30c9\u3092\u63cf\u753b\u3059\u308b\u95a2\u6570\r\n          function drawBoard() {\r\n            \/\/ \u80cc\u666f\u3092\u7dd1\u8272\u306b\u8a2d\u5b9a\r\n            ctx.fillStyle = "green";\r\n            ctx.fillRect(0, 0, canvas.width, canvas.height);\r\n    \r\n            \/\/ \u30b0\u30ea\u30c3\u30c9\uff08\u7dda\uff09\u3092\u63cf\u753b\r\n            for (let i = 1; i < GRID_SIZE; i++) {\r\n              ctx.beginPath();\r\n              ctx.moveTo(i * CELL_SIZE, 0);\r\n              ctx.lineTo(i * CELL_SIZE, canvas.height);\r\n              ctx.stroke();\r\n    \r\n              ctx.beginPath();\r\n              ctx.moveTo(0, i * CELL_SIZE);\r\n              ctx.lineTo(canvas.width, i * CELL_SIZE);\r\n              ctx.stroke();\r\n            }\r\n    \r\n            \/\/ \u5404\u30de\u30b9\u306b\u77f3\u3092\u63cf\u753b\r\n            for (let i = 0; i < GRID_SIZE; i++) {\r\n              for (let j = 0; j < GRID_SIZE; j++) {\r\n                if (board[i][j]) {\r\n                  ctx.fillStyle = board[i][j]; \/\/ \u77f3\u306e\u8272\u3092\u8a2d\u5b9a\uff08\u9ed2 or \u767d\uff09\r\n                  ctx.beginPath();\r\n                  ctx.arc(j * CELL_SIZE + CELL_SIZE \/ 2, i * CELL_SIZE + CELL_SIZE \/ 2, CELL_SIZE \/ 2 - 2, 0, Math.PI * 2);\r\n                  ctx.fill();\r\n                }\r\n              }\r\n            }\r\n    \r\n            \/\/ \u30b2\u30fc\u30e0\u304c\u7d42\u4e86\u3057\u305f\u5834\u5408\u3001\u7d50\u679c\u3092\u8868\u793a\r\n            if (gameState === "gameover") {\r\n              ctx.fillStyle = "rgba(0, 0, 0, 0.5)"; \/\/ \u534a\u900f\u660e\u306e\u80cc\u666f\r\n              ctx.fillRect(0, 0, canvas.width, canvas.height);\r\n              ctx.fillStyle = "white";\r\n              ctx.font = "30px Arial";\r\n              ctx.fillText(`Game Over! ${getWinner()} wins!`, canvas.width \/ 2 - 100, canvas.height \/ 2);\r\n            }\r\n          }\r\n    \r\n          \/\/ \u77f3\u3092\u7f6e\u304f\u51e6\u7406\r\n          function placeStone(row, col) {\r\n            \/\/ \u3059\u3067\u306b\u77f3\u304c\u7f6e\u304b\u308c\u3066\u3044\u308b or \u30b2\u30fc\u30e0\u7d42\u4e86\u6642\u306f\u4f55\u3082\u3057\u306a\u3044\r\n            if (board[row][col] || gameState === "gameover") return;\r\n    \r\n            \/\/ \u3072\u3063\u304f\u308a\u8fd4\u305b\u308b\u77f3\u304c\u3042\u308b\u304b\u30c1\u30a7\u30c3\u30af\r\n            const flippedStones = getFlippedStones(row, col, currentPlayer);\r\n            if (!flippedStones.length) return;\r\n    \r\n            \/\/ \u77f3\u3092\u7f6e\u304f\r\n            board[row][col] = currentPlayer;\r\n    \r\n            \/\/ \u3072\u3063\u304f\u308a\u8fd4\u3059\r\n            flippedStones.forEach(([r, c]) => (board[r][c] = currentPlayer));\r\n    \r\n            \/\/ \u30d7\u30ec\u30a4\u30e4\u30fc\u4ea4\u4ee3\r\n            currentPlayer = currentPlayer === "black" ? "white" : "black";\r\n    \r\n            \/\/ \u3069\u3061\u3089\u306e\u30d7\u30ec\u30a4\u30e4\u30fc\u3082\u6709\u52b9\u306a\u624b\u304c\u306a\u3044\u5834\u5408\u3001\u30b2\u30fc\u30e0\u7d42\u4e86\r\n            if (!hasValidMove()) {\r\n              currentPlayer = currentPlayer === "black" ? "white" : "black";\r\n              if (!hasValidMove()) gameState = "gameover";\r\n            }\r\n    \r\n            \/\/ \u66f4\u65b0\u5f8c\u306e\u30dc\u30fc\u30c9\u3092\u63cf\u753b\r\n            drawBoard();\r\n          }\r\n    \r\n          \/\/ \u3072\u3063\u304f\u308a\u8fd4\u305b\u308b\u77f3\u3092\u63a2\u3059\u51e6\u7406\r\n          function getFlippedStones(row, col, player) {\r\n            const opponent = player === "black" ? "white" : "black";\r\n    \r\n            \/\/ 8\u65b9\u5411\u306e\u5ea7\u6a19\u5909\u5316\uff08\u4e0a\u3001\u4e0b\u3001\u5de6\u3001\u53f3\u3001\u659c\u30814\u65b9\u5411\uff09\r\n            const directions = [\r\n              [-1, -1],\r\n              [-1, 0],\r\n              [-1, 1],\r\n              [0, -1],\r\n              [0, 1],\r\n              [1, -1],\r\n              [1, 0],\r\n              [1, 1],\r\n            ];\r\n    \r\n            let flippedStones = [];\r\n    \r\n            for (const [dx, dy] of directions) {\r\n              let x = row + dx;\r\n              let y = col + dy;\r\n              let tempFlipped = [];\r\n    \r\n              while (x >= 0 && x < GRID_SIZE && y >= 0 && y < GRID_SIZE && board[x][y] === opponent) {\r\n                tempFlipped.push([x, y]);\r\n                x += dx;\r\n                y += dy;\r\n              }\r\n    \r\n              if (x >= 0 && x < GRID_SIZE && y >= 0 && y < GRID_SIZE && board[x][y] === player) {\r\n                flippedStones = flippedStones.concat(tempFlipped);\r\n              }\r\n            }\r\n    \r\n            return flippedStones;\r\n          }\r\n    \r\n          \/\/ \u6709\u52b9\u306a\u624b\u304c\u3042\u308b\u304b\u30c1\u30a7\u30c3\u30af\r\n          function hasValidMove() {\r\n            return board.some((row, i) => row.some((cell, j) => !cell && getFlippedStones(i, j, currentPlayer).length));\r\n          }\r\n    \r\n          \/\/ \u52dd\u8005\u3092\u5224\u5b9a\u3059\u308b\u95a2\u6570\r\n          function getWinner() {\r\n            let counts = board.flat().reduce(\r\n              (acc, cell) => {\r\n                if (cell) acc[cell]++;\r\n                return acc;\r\n              },\r\n              { black: 0, white: 0 }\r\n            );\r\n    \r\n            if (counts.black > counts.white) return "Black";\r\n            if (counts.white > counts.black) return "White";\r\n            return "Draw";\r\n          }\r\n    \r\n          \/\/ \u30e6\u30fc\u30b6\u30fc\u304c\u30ad\u30e3\u30f3\u30d0\u30b9\u3092\u30af\u30ea\u30c3\u30af\u3057\u305f\u3068\u304d\u306e\u51e6\u7406\r\n          canvas.addEventListener("click", (e) => {\r\n            const rect = canvas.getBoundingClientRect();\r\n            const row = Math.floor((e.clientY - rect.top) \/ CELL_SIZE);\r\n            const col = Math.floor((e.clientX - rect.left) \/ CELL_SIZE);\r\n    \r\n            placeStone(row, col);\r\n          });\r\n    \r\n          \/\/ \u30ea\u30bb\u30c3\u30c8\u30dc\u30bf\u30f3\u306e\u30af\u30ea\u30c3\u30af\u30a4\u30d9\u30f3\u30c8\r\n          document.getElementById("reset-button").addEventListener("click", initGame);\r\n    \r\n          \/\/ \u30b2\u30fc\u30e0\u958b\u59cb\r\n          initGame();\r\n        <\/script>\r\n      <\/body>\r\n    <\/html><\/code><\/pre>\n
\u30b3\u30fc\u30c9\u306e\u5404\u90e8\u5206\u306b\u30b3\u30e1\u30f3\u30c8\u3092\u4ed8\u3051\u3001\u30ed\u30b8\u30c3\u30af\u306e\u51e6\u7406\u5185\u5bb9\u3084\u6ce8\u610f\u3059\u3079\u304d\u70b9\u3092\u9806\u3092\u8ffd\u3063\u3066\u8aac\u660e\u3057\u307e\u3059\u3002<\/p>\n
1. HTML \u3068 CSS\u306e\u30bb\u30c3\u30c8\u30a2\u30c3\u30d7<\/h2>\n
\u307e\u305a\u306f\u3001\u30b2\u30fc\u30e0\u306eUI\u90e8\u5206\u3092\u4f5c\u6210\u3057\u307e\u3059\u3002
<canvas> \u8981\u7d20\u3092\u4f7f\u3063\u3066\u3001\u30b2\u30fc\u30e0\u76e4\u3092\u63cf\u753b\u3057\u3001\u30ea\u30bb\u30c3\u30c8\u30dc\u30bf\u30f3\u3092\u8a2d\u7f6e\u3057\u307e\u3059\u3002\u3053\u308c\u306b\u3088\u308a\u3001\u30b2\u30fc\u30e0\u753b\u9762\u304c\u3069\u306e\u3088\u3046\u306b\u8868\u793a\u3055\u308c\u308b\u306e\u304b\u304c\u308f\u304b\u308a\u307e\u3059\u3002<\/p>\n
HTML\u90e8\u5206<\/h3>\n
<!DOCTYPE html>\r\n    <html lang=\"ja\"<\/span>>\r\n      <head>\r\n        <meta charset=\"UTF-8\"<\/span> \/>\r\n        <meta name=\"viewport\"<\/span> content=\"width=device-width, initial-scale=1.0\"<\/span> \/>\r\n        <title>\u30aa\u30bb\u30ed\u30b2\u30fc\u30e0<\/title>\r\n        <style>\r\n          body {\r\n            display: flex;\r\n            justify-content: center;\r\n            align-items: center;\r\n            height: 100<\/span>vh;\r\n            background-color: #2c3e50;<\/span>\r\n            margin: 0<\/span>;\r\n          }\r\n          #game-container {<\/span>\r\n            text-align: center;\r\n          }\r\n          canvas {\r\n            background-color: green;\r\n            display: block;\r\n            margin: 0<\/span> auto;\r\n          }\r\n          #controls {<\/span>\r\n            margin-top: 10<\/span>px;\r\n          }\r\n          button {\r\n            padding: 10<\/span>px 20<\/span>px;\r\n            font-size: 16<\/span>px;\r\n            border: none;\r\n            background-color: #3498db;<\/span>\r\n            color: #fff;<\/span>\r\n            cursor: pointer;\r\n            border-radius: 5<\/span>px;\r\n          }\r\n          button:hover {\r\n            background-color: #2980b9;<\/span>\r\n          }\r\n        <\/style>\r\n        <script>\r\n          \/\/ \u3053\u3053\u306bJavaScript\u306e\u51e6\u7406\u3092\u66f8\u304d\u307e\u3059\u3002<\/span>\r\n        <\/script>\r\n      <\/head><\/code><\/pre>\n
\u30dd\u30a4\u30f3\u30c8<\/p>\n