骰子滾動應用打字稿

此刻我正在edx.org關於Typescript2做一個教程。但我需要一些幫助，自我評估實驗室：骰子滾動應用打字稿

「現在你已經學會了如何使用打字稿，你會做一個簡單的擲骰應用以下參數的基礎知識：

使用在應用程序中以下幾種類型：數組，數字，字符串，布爾

使用枚舉聲明可能捲起值（提示：他們不必爲數字）

使用一個類來創建。你的死亡，包括需要的CSS樣式的鍵入屬性（長度，寬度，邊界，顏色）以及骰子中包含的值。

創建一個界面來描述你的骰子的類型。

使用dieRoller類擴展類以創建滾動骰子的方法。

創建一個函數來使用dieRoller類實例化骰子，使用constructor（）函數綁定元素。

創建一個按鈕，一次擲出所有的骰子。

成品應該結束了尋找這樣的事情，而且當按下「擲骰子」按鈕應該隨機生成，從枚舉不同的價值爲每個單獨的芯片。」

應該有四個骰子和然後按一個按鈕（全部在一行）

我的問題是，我無法創建只有一個按鈕或我不能使用rolleDice（）（如果我聲明類之外的按鈕...通常是一個可能會在外面聲明，並創建一個類的實例...但不知道如何做到這一點，因爲類有一個帶參數的構造函數）所以，也許你有一個想法...或者我只是錯過了任務？：/

謝謝！

class diceRoller { 
    span: Element; 
    constructor(span: Element) { 
     this.span = span; 
    } 
    rolleDice(diceValue: number): boolean { 
     (<HTMLElement>this.span).textContent = diceValues[diceValue]; 
     return true; 
    } 
} 
class dice extends diceRoller { 
    button: Element = document.createElement('button'); 
    constructor(span: Element) { 
     super(span); 
     (<HTMLElement>span).style.cssText = "border: 5px solid black; display: inline-block; height: 50px; width: 50px; margin: 2px"; 
     this.button.textContent = "Role Dice";  
     document.body.appendChild(this.button); 
    } 
} 
enum diceValues { 
    one, 
    two, 
    three, 
    four, 
    five, 
    six 
} 
interface diceTypes { 
    span: Element; 
} 
let Elements: Array<diceTypes> = []; 
for (let index: number = 0; index < 5; index++) { 
    Elements.push({ 
     'span': document.createElement('span'), 
    }); 
} 
let getRandomIntInclusive: Function = (min, max) => { 
    min = Math.ceil(min); 
    max = Math.floor(max); 
    return Math.floor(Math.random() * (max - min + 1)) + min; 
} 
Elements.map((elem, index) => { 
    let cube = new dice(elem.span); 
    let button: Element = document.createElement('button'); 
    document.body.appendChild(elem.span); 
});

來源

2017-06-27 Leon_2001

在任務中表示dieRoller擴展die，die不會擴展dieRoller。 Die只是一個立方體，DieRoller是一個有方法的立方體。

另外我爲RollButton創建了一個單獨的類，它有一個方法，它使用所有骰子獲取數組，然後觸發它的rollDice方法。

有一兩件事我不知道是否有更多的美容方式不是使用兩個單獨的陣列 - 爲元素和diceCollection但只是diceCollection。

更idealy依我看大類至極包含骰子實例和RollButton的陣列。

而且它的涼爽爲DiceValues從1

反正它的工作原理，但重構，歡迎啓動。 http://jsbin.com/rahewuhije/edit?js,output

class Dice { 
    span: Element; 
    constructor(span: Element) { 
     this.span = span; 
    } 
} 
class DiceRoller extends Dice { 
    // button: Element = document.createElement('button'); 
    constructor(span: Element) { 
     super(span); 
     (<HTMLElement>span).style.cssText = "border: 5px solid black; display: inline-block; height: 50px; width: 50px; margin: 2px"; 
     // this.button.textContent = "Role Dice";  
     // document.body.appendChild(this.button); 
    } 
    rolleDice(diceValue: number): boolean { 
     (<HTMLElement>this.span).textContent = DiceValues[diceValue]; 
     return true; 
    } 
} 

class DiceRollerButton { 
    button: Element; 
    constructor(button: Element) { 
    this.button = button; 
    (<HTMLElement>this.button).style.cssText = "display: inline-block;"; 
    this.button.textContent = "Roll!"; 
    document.body.appendChild(this.button); 
    } 

    roll(diceCollection: Array<DiceRoller>) { 
    diceCollection.forEach((item) => { 
     item.span.textContent = DiceValues[getRandomIntInclusive(1, 6)]; 
    }); 
    } 
} 

enum DiceValues { 
    one = 1, 
    two, 
    three, 
    four, 
    five, 
    six 
} 
interface DiceTypes { 
    span: Element; 
} 
let Elements: Array<DiceTypes> = []; 

let diceCollection: Array<DiceRoller> = []; 

for (let index: number = 0; index < 5; index++) { 
    Elements.push({ 
     'span': document.createElement('span'), 
    }); 
} 
let getRandomIntInclusive: Function = (min, max) => { 
    min = Math.ceil(min); 
    max = Math.floor(max); 
    return Math.floor(Math.random() * (max - min + 1)) + min; 
} 
Elements.map((elem, index) => { 
    let cube = new DiceRoller(elem.span); 
    // let button: Element = document.createElement('button'); 
    document.body.appendChild(elem.span); 

    diceCollection.push(cube); 
}); 

let diceRollerButton = new DiceRollerButton(document.createElement('button')); 

diceRollerButton.button.onclick = (event): void => { 
    diceRollerButton.roll(diceCollection); 
}

來源

2017-07-07 14:04:16

骰子滾動應用打字稿

回答

相關問題