実現したいこと
JavaScriptでオセロアプリのコードを書いています。
ソースコードの処理をクラスに分割し、それぞれを独立したファイルにリファクタリングしたいと考えております。
オセロの盤が表示されないため正しいリファクトリングする方法を教えて頂きたいです。
発生している問題・分からないこと
下記コードで盤面が定義されていると思うのですが、画面に盤面が表示されません。
HTML
1 <table id="board"></table> 2
該当のソースコード
javascript
1class GameBoard {2 constructor() {3 this.board = this.createBoard();4 }5 6 createBoard() {7 const board = [];8 for (let i = 0; i < 8; i++) {9 const row = [];10 for (let j = 0; j < 8; j++) {11 row.push(new OthelloPiece(0));12 }13 board.push(row);14 }15 // 初期配置16 board[3][3] = new OthelloPiece(1);17 board[3][4] = new OthelloPiece(-1);18 board[4][3] = new OthelloPiece(-1);19 board[4][4] = new OthelloPiece(1);20 return board;21 }22 23 getPiece(row, col) {24 return this.board[row][col];25 }26 27 setPiece(row, col, piece) {28 this.board[row][col] = piece;29 }30
javascript
1class OthelloGame {2 constructor() {3 this.board = new GameBoard();4 this.players = {5 black: new Player(1),6 white: new Player(-1)7 };8 this.currentPlayer = this.players.black;9 }10}
javascript
1class GameController {2 constructor(game) {3 this.game = game;4 }5}
HTML
1<!DOCTYPE html> 2<html> 3<head> 4 <link rel="stylesheet" type="text/css" href="styles.css"> 5 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> 6 <script src="GameBoard.js"></script> 7 <script src="GameController.js"></script> 8 <script src="Move.js"></script> 9 <script src="OthelloGame.js"></script> 10 <script src="OthelloPiece.js"></script> 11 <script src="Player.js"></script> 12 13</head> 14<body> 15 <table id="board"> 16 </table> 17 <div id="status">黒の番</div> 18 <input id="back" type="button" value="戻す"> 19 <input id="go" type="button" value="進める"> 20</body> 21</html>
CSS
12 table#board {3 4 background-color: black;5 6 }7 8 9 table#board td {10 11 width: 30px;12 13 height: 30px;14 15 background-color: green;16 17 padding: 5px;18 19 }20 21 22 div.black {23 24 background-color: black;25 26 width: 30px;27 28 height: 30px;29 30 border-radius: 50%;31 32 }33 34 35 div.white {36 37 background-color: white;38 39 width: 30px;40 41 height: 30px;42 43 border-radius: 50%;44 45 }
試したこと・調べたこと
上記の詳細・結果
HTML側で関連するクラスが呼び出されている事を確認しました。
HTML
1 <script src="GameBoard.js"></script> 2 <script src="GameController.js"></script> 3 <script src="Move.js"></script> 4 <script src="OthelloGame.js"></script> 5 <script src="OthelloPiece.js"></script> 6 <script src="Player.js"></script>
補足
参考にさせていただいたサイト
https://biochemistry.isc.chubu.ac.jp/labo/suzuki/archives/1045
0 コメント