#わからないこと
TypeScriptで資料を写経してまるばつゲームを実装したのですが、分からない箇所があります。(ページ下)
参考資料:TypeScript リファレンス 著:わかめまさひろ
#まるばつゲームの仕様
2人が対戦するゲームで3×3のマス目に○(先手)と×(後手)を交互においていき、縦・横・斜めのどれか一列に同じマークを先揃えた方が勝ち
#ソース
typescript
1module MaruBatsu { 2 // 先手・後手を表す 3 export enum Piece { 4 Maru, 5 Batsu 6 } 7 8 // ゲーム盤の管理・進行を行うクラス 9 export class GameLogic { 10 SIDE = 3; 11 board: Piece[][]; 12 turn: Piece; 13 14 constructor(public el: HTMLElement) { 15 } 16 17 // ゲームの初期設定を行いゲームを開始する 18 start(): void { 19 // ゲーム画面用のHTMLElementの中身を消している。 20 this.el.innerHTML = ''; 21 // 最初の手番を○に設定する 22 this.turn = Piece.Maru; 23 // 盤面の状態を初期化する (3×3) 24 // 各マスはnullで初期化する 25 // 画面の状態を盤面の状態に合わせる 26 // この後に追加してある addPiece メソッドで1マスごとに作成する。 27 this.board = []; 28 for (var i = 0; i < this.SIDE; i++) { 29 this.board.push([]); 30 } 31 for (var y = 0; y < this.SIDE; y++) { 32 for (var x = 0; x < this.SIDE; x++) { 33 this.board[x][y] = null; 34 this.addPiece(x, y); 35 } 36 } 37 } 38 39 // 勝敗をチェックする 40 isWinner(turn: Piece): boolean { 41 // 縦横の判定 42 for (var i = 0; i < this.SIDE; i++) { 43 var v = true; 44 var h = true; 45 for (var j = 0; j < this.SIDE; j++) { 46 if (this.board[i][j] !== turn) { 47 v = false 48 } 49 if (this.board[j][i] !== turn) { 50 h = false 51 } 52 } 53 if (v || h) { 54 return true; 55 } 56 } 57 58 // 斜めの判定 59 var c = true; 60 var r = true; 61 for (var i = 0; i < this.SIDE; i++) { 62 if (this.board[i][i] !== turn) { 63 c = false; 64 } 65 if (this.board[i][this.SIDE - i - 1] !== turn) { 66 r = false; 67 } 68 } 69 if (c || r) { 70 return true; 71 } 72 73 return false; 74 } 75 76 // 1手指す 77 put(x: number, y: number, el: HTMLElement): void { 78 if (this.board[x][y] !== null) { 79 // 既に何か置かれていたら無視する 80 return; 81 } 82 var current = this.turn; 83 this.board[x][y] = this.turn; 84 // 表示の変更と指し手の交代 85 if (this.turn === Piece.Maru) { 86 el.innerText = '○'; 87 this.turn = Piece.Batsu 88 } else { 89 el.innerText = '×'; 90 this.turn = Piece.Maru; 91 } 92 // 勝者になったのかチェックと結果表示 93 if (this.isWinner(current)) { 94 alert('○の勝ち!'); 95 } else { 96 alert('×の勝ち!'); 97 } 98 } 99 100 // 1マスに相当するHTML要素を作成し追加する。 101 addPiece(x: number, y: number): void { 102 var div = document.createElement('div'); 103 div.addEventListener('click', () => { 104 this.put(x, y, div); 105 }); 106 div.className = 'piece'; 107 if (x === 0) { 108 div.className += ' head'; 109 } 110 this.el.appendChild(div); 111 } 112 } 113} 114 115window.onload = () => { 116 var el = document.getElementById('game'); 117 var logic = new MaruBatsu.GameLogic(el); 118 logic.start(); 119}; 120 121console.log(this);
HTML
1<!DOCTYPE html> 2<html> 3<head> 4 <title>まるばつゲーム</title> 5 <link rel="stylesheet" type="text/css" href="main.css" charset="utf-8"> 6</head> 7<body> 8 <h1>まるばつゲーム</h1> 9 10 <div id="game">Javacript is not running?</div> 11 12 <script type"text/javascript" src="main.js" charset="utf-8"></script> 13</body> 14</html> 15
CSS
1@charset "utf-8"; 2 3.head { 4 clear: both; 5} 6 7.piece { 8 display: block; 9 float: left; 10 width: 30px; 11 height: 30px; 12 border-width: 1px; 13 border-style: solid 14} 15 16
#分からない箇所
typescript
1/** GameLogic クラスのメンバ変数です。 */ 2board: Piece[][]; 3 4/** 省略 */ 5 6/** startメソッドのスコープ内です。 */ 7this.board = []; 8for (var i = 0; i < this.SIDE; i++) { 9this.board.push([]); 10}
######Q1.メンバ変数 boad になぜ enum を型定義しているのか?
enum は別の関数に number を渡すメソッドだと理解しています。
2つの要素しかない enum がどうして盤面(3×3)のプロパティの型となるのか理解できませんでした。
######Q2.start内ので行われている処理は筆者の解釈は合っていますか?
まず、board に大枠の配列を一つ代入し、その後、その配列の中に更に3つの配列を代入し二次元配列を完成させている。つまり、boardの中身はこうなっている。
board = [ [], [] , [], ]
もしこれで合っているとすれば、board に大枠の配列を代入した時のエラーが出ないのか不思議です。
なぜなら、メンバ変数 board の型は二次元配列のはずだからです。二次元配列型のオブジェクトに一次配列が代入できるのは矛盾していませんか?
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/07/19 23:38