2017-12-01 4 views
-1

問題JSダイスローラー - どのようにすべてのダイスを集めることができますか?

私はプログラミングして以来長い時間がかかりました。私はゲームをデザインしています。最初にJS/HTML/CSSでプログラミングしています。それは私が慣れ親しんでいるからです。ここに私が造っているダイスローラーがあります。それは今までサイコロを適切にロールしていますが、ロールスルされたときにはサイコロの合計を掴むことができません。私は、totalの変数が不適切に定義されているか、範囲外であると仮定しています。

HTML

<body> 
    <div id="dice" class="dice"> 
    </div> 
    <div id="diceTotal"></div> 
    <button id="button">Roll Die</button> 
</body> 

CSS

* { 
    font-family: Helvetica, Arial, sans-serif; 
    text-align: center; 
    font-size: 8 vw; 
} 

button { 
    background-color: #000; 
    border-radius: 1vw; 
    border: none; 
    color: #fff; 
    padding: 1vw; 
    text-transform: uppercase; 
    font-size: 6vw; 
    width: 40vw; 
    cursor: pointer; 
    margin-top: .5vw; 
} 

.die { 
    height: 10vw; 
    width: 10vw; 
    padding: 0vw; 
    margin: .5vw; 
    border: .1vw solid gray; 
    border-radius: 2vw; 
    font-size: 9vw; 
    display: inline-block; 
} 

JS

var tot; 
do { 
    var sides = parseInt(prompt("How many sides are on your die? ", "6"), 10); 
} while (isNaN(sides) || sides < 1); 
var dice = { 
    sides: sides, 
    roll: function() { 
    var randomNumber = Math.floor(Math.random() * this.sides) + 1; 
    return randomNumber; 
    } 
} 

//Prints dice roll to the page 

function printNumber(number) { 
    var span = document.createElement("span"); 
    span.className = "die"; 
    var diceroll = document.createTextNode(number); 
    span.appendChild(diceroll); 
    document.getElementById('dice').appendChild(span); 
} 

var button = document.getElementById('button'); 

button.onclick = function() { 
    var result = dice.roll(); 
    printNumber(result); 
    var tot = result + tot; 
    var printDiceTotal = "Total: " + tot; 
    document.getElementById('diceTotal').innerHTML = printDiceTotal; 
}; 

ここJSFiddleです。

https://jsfiddle.net/itmadsen/pkgej3uh/2/

私は基本的な何かが欠けている、と誰かが解決策を思い付くした後、私はその上に自分自身を蹴ることでしょうね。

+1

'VARのTOT =結果+ TOT;' TOTの初期値とは何ですか? 'var'はその名前で新しい変数を作成しています。グローバルな 'tot'を使いたい場合は、varを外してください。 – Taplar

+0

0にする必要があります。 –

+0

"should be"。私が尋ねたものではありません:) – Taplar

答えて

1

まず、あなたが二回

var tot = result + tot; 

はここで働いているフィドル

tot = result + tot; 

になる必要があるTOTを定義している、第二に

var tot = 0; 

をTOTに初期値としてゼロを割り当てる必要があります:

+0

私は同じ解決策を思いついた。 –

1

ありがとうございました!

私はそれを修正しました。完璧!

https://jsfiddle.net/itmadsen/pkgej3uh/7/

JS

var tot = 0; 
do { 
    var sides = parseInt(prompt("How many sides are on your die? ", "6"), 10); 
} while (isNaN(sides) || sides < 1); 
var dice = { 
    sides: sides, 
    roll: function() { 
    var randomNumber = Math.floor(Math.random() * this.sides) + 1; 
    return randomNumber; 
    } 
} 

//Prints dice roll to the page 

function printNumber(number) { 
    var span = document.createElement("span"); 
    span.className = "die"; 
    var diceroll = document.createTextNode(number); 
    span.appendChild(diceroll); 
    document.getElementById('dice').appendChild(span); 
} 

var button = document.getElementById('button'); 

button.onclick = function() { 
    var result = dice.roll(); 
    printNumber(result); 
    tot = result + tot; 
    var printDiceTotal = "Total: " + tot; 
    document.getElementById('diceTotal').innerHTML = printDiceTotal; 
}; 
関連する問題