TypeScriptやオブジェクト指向の勉強としてチンチロリンっぽいものを作っています。
MVCモデルを参考にして、Modelクラス・Viewクラス・Controllerクラスを定義しました。
これまで作ったプログラムは以下のようになっています。
html
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>チンチロ</title> 8 <script src="bundle.js"></script> 9</head> 10<body> 11 <button class="btn">サイコロを振る</button> 12 <p class="result"></p> 13</body> 14</html>
typescript
1// サイコロクラス 2class Dice { 3 pips: number | null = null; 4} 5 6// プレイヤークラス 7class Player { 8 dices: Dice[] = []; 9 roll: string | null = null; 10 11 constructor() { 12 for (let i = 0; i < 3; i++) { 13 this.dices.push(new Dice()); 14 } 15 } 16} 17 18// Modelクラス 19class Model { 20 player = new Player; 21 22 // サイコロを振る 23 rollDice() { 24 for (let dice of this.player.dices) { 25 dice.pips = Math.floor(Math.random() * 6) + 1; 26 } 27 } 28 29 // 出目を判定 30 analyzeRoll() { 31 const pips = []; 32 for (let dice of this.player.dices) { 33 pips.push(dice.pips); 34 } 35 pips.sort(); 36 37 const dice0 = pips[0]; 38 const dice1 = pips[1]; 39 const dice2 = pips[2]; 40 41 const joinStr = [dice0, dice1, dice2].join('') 42 43 const flag1 = dice0 === dice1; 44 const flag2 = dice1 === dice2; 45 46 const result = 47 flag1 && flag2 ? dice1 + 'ゾロ' : 48 flag1 && !flag2 ? dice2 + '' : 49 !flag1 && flag2 ? dice0 + '' : 50 joinStr === '456' ? 'シゴロ' : 51 joinStr === '123' ? 'ヒフミ' : 52 '目無し'; 53 54 this.player.roll = result; 55 } 56} 57 58// Viewクラス 59class View { 60 constructor(public model: Model) { 61 } 62 63 // 結果を表示 64 showResult() { 65 const pips = []; 66 for (let dice of this.model.player.dices) { 67 pips.push(dice.pips); 68 } 69 $('.result').html(`${pips[0]} ${pips[1]} ${pips[2]}: ${this.model.player.roll}`); 70 } 71} 72 73// Controllerクラス 74class Controller { 75 constructor(public model: Model, public view: View) { 76 $('.btn').on('click', () => { 77 this.clickBtn(); 78 }); 79 } 80 81 // 「サイコロを振る」ボタンをクリックした際の動作 82 clickBtn() { 83 this.model.rollDice(); 84 this.model.analyzeRoll(); 85 this.view.showResult(); 86 } 87} 88 89// チンチロクラス 90class Chinchiro { 91 model = new Model(); 92 view = new View(this.model); 93 controller = new Controller(this.model, this.view); 94} 95 96// メイン処理 97$(() => { 98 new Chinchiro(); 99});
ModelクラスはPlayerクラスのインスタンスをプロパティに持ち、
PlayerクラスはDiceクラスのインスタンスをプロパティに持つ、という風に入れ子のような状態になっています。
このとき、rollDiceメソッドやanalyzeRollメソッドはPlayerクラスやDiceクラスのメソッドとして定義すべきなのでしょうか?
他にもおかしな部分があればご教授いただけたら幸いです。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/11/22 03:22
2019/11/22 03:52
2019/11/22 04:01
2019/11/22 04:03