2016-04-18 12 views
2

サイコロゲームを構築し、3ロールを得る。あなたの順番を終えたら、私は "次の人"がプレイできるように元の場所に戻って値をリセットする "リセット"ボタンを持ってしようとしている。値は私が期待した通りにリセットされましたが、私が "ロール"しても何の機能も起きていないので、私はかなり新しいので、問題は何か分かりません。ここでリセット値問題

var playerScore = document.getElementById('firstPlayerScore'); 
var rollButton = document.getElementById('roll_button'); 
var dice1 = new dice(1); 
var dice2 = new dice(2); 
var dice3 = new dice(3); 
var dice4 = new dice(4); 
var dice5 = new dice(5); 
var diceArray = [dice1, dice2, dice3, dice4, dice5]; 
var cargo = 0; 
var numOfRolls = 0; 
var cargoButton = document.getElementById('cargo'); 
var canHaveCargo = false; 

function restart(){ 
    dice1 = new dice(1); 
    dice2 = new dice(2); 
    dice3 = new dice(3); 
    dice4 = new dice(4); 
    dice5 = new dice(5); 
    diceArray = [dice1, dice2, dice3, dice4, dice5]; 
    cargo = 0; 
    numOfRolls = 0; 
    canHaveCargo = false; 
    addGlow(); 
    updateDiceImageUrl(); 
    document.getElementById("dice1").classList.remove('glowing'); 
    document.getElementById("dice2").classList.remove('glowing'); 
    document.getElementById("dice3").classList.remove('glowing'); 
    document.getElementById("dice4").classList.remove('glowing'); 
    document.getElementById("dice5").classList.remove('glowing'); 
} 


//dice object 
function dice(id){ 
    this.id = id; 
    this.currentRoll = 1; 
    this.previousRoll = 1; 
    this.isSelected = false; 
    this.diceImageUrl = "img/dice/dice1.png"; 
    this.roll = function(){ 
     this.previousRoll = this.currentRoll; 
     this.currentRoll = getRandomRoll(1, 6); 
    } 
} 

//returns an array of all dice that are not currently selected so they can be rolled. 
function getRollableDiceList(){ 
    var tempDiceList = []; 
    for(var i = 0; i < diceArray.length; i++){ 
     if(!diceArray[i].isSelected){ 
      tempDiceList.push(diceArray[i]); 
     } 
    } 
    return tempDiceList; 
} 

// gets a random number between min and max (including min and max) 
function getRandomRoll(min,max){ 
    return Math.floor(Math.random() * (max-min + 1) + min); 
} 

// calls the roll function on each dice 
function rollDice(rollableDiceList){ 
    for(var i = 0; i < rollableDiceList.length; i++){ 
     rollableDiceList[i].roll(); 
    } 
} 

// updates each dice with the new url for the image that corresponds to what their current roll is 
function updateDiceImageUrl(){ 
    for(var i = 0; i < diceArray.length; i++){ 
     var currentDice = diceArray[i]; 

     currentDice.diceImageUrl = "http://boomersplayground.com/img/dice/dice" + currentDice.currentRoll + ".png"; 

     //update div image with img that cooresponds to their current roll 
     updateDiceDivImage(currentDice); 
    } 
} 

//Displays the image that matches the roll on each dice 
function updateDiceDivImage(currentDice) { 
    document.getElementById("dice"+currentDice.id).style.backgroundImage = "url('" + currentDice.diceImageUrl +"')"; 
} 

// returns an array of all 
function getNonSelectedDice(){ 
    var tempArray = []; 
    for(var i = 0; i < diceArray.length; i++){ 
     if(!diceArray[i].isSelected){ 
      tempArray.push(diceArray[i]); 
     } 
     tempArray.sort(function(a, b){ 
     return b.currentRoll - a.currentRoll; 
     }); 
    } 
    return tempArray; 
} 

function getSelectedDice(){ 
    var selectedDice = []; 
    for(var i = 0; i < diceArray.length; i++){ 
    if(diceArray[i].isSelected){ 
     selectedDice.push(diceArray[i]); 
    } 
    } 
    return selectedDice; 
} 

//boolean variables 
var shipExist = false; 
var captExist = false; 
var crewExist = false; 

//checks each dice for ship captain and crew. Auto select the first 6, 5 , 4. 
function checkForShipCaptCrew(){ 
    //array of dice that are not marked selected 
    var nonSelectedDice = getNonSelectedDice(); 

    for(var i = 0; i < nonSelectedDice.length; i++){ 
     //temp variable that represents the current dice in the list 
     currentDice = nonSelectedDice[i]; 

     if (!shipExist) { 
      if (currentDice.currentRoll == 6) { 
       shipExist = true; 
       currentDice.isSelected = true; 
      } 
     } 
     if (shipExist && !captExist) { 
     if (currentDice.currentRoll == 5) { 
      captExist = true; 
      currentDice.isSelected = true; 
     } 
     } 
     if (shipExist && captExist && !crewExist) { 
     if (currentDice.currentRoll == 4) { 
      crewExist = true; 
      currentDice.isSelected = true; 
      canHaveCargo = true; 
     } 
     } 
    } 
} 

function addGlow(){ 
    var selectedDice = getSelectedDice(); 

    for (var i = 0; i < selectedDice.length; i++){ 
    var addGlowDice = selectedDice[i]; 
    var element = document.getElementById('dice' + addGlowDice.id); 

    element.className = element.className + " glowing"; 
    } 
} 

function getCargo(){ 
    var cargo = 0; 
    var moreDice = getNonSelectedDice(); 
    if (canHaveCargo){ 
    for(var i=0; i < moreDice.length; i++){ 
     cargo += moreDice[i].currentRoll; 
     playerScore.innerHTML = 'You have got ' + cargo + ' in ' + numOfRolls + ' rolls!'; 
    } 
    } else { 
    alert("You don't have Ship Captain and the Crew yet!"); 
    } 
} 

rollButton.addEventListener('click', function(){ 
     //generate rollable dice list 


    if (numOfRolls < 3) { 

     var rollableDiceList = getRollableDiceList(); 

     //roll each dice 
     rollDice(rollableDiceList); 

     //update dice images 
     updateDiceImageUrl(); 

     getNonSelectedDice(); 

     // //auto select first 6, 5, 4 (in that order) 
     checkForShipCaptCrew(); 

     addGlow(); 
     // //adds a red glow to each dice that is selected 
     numOfRolls++; 
    } 
}); 

cargoButton.addEventListener('click', getCargo); 

var startButton = document.getElementById('restart'); 
startButton.addEventListener('click', restart); 

http://boomer1204.github.io/shipCaptainCrew/

それは私が働いていないのか分からないので、私は問題を記述することができる唯一の方法だからライブゲームへのリンクです。ダイスを数回転がすと、サイコロは青い枠線になり、ルールに従って「保存」されます。今すぐ再起動ボタンを押すとそれ以上は起こりません。 事前に助けてくれてありがとう

+0

私はあなたの初期化ルーチンは、「ゲーム」クラスにリファクタリングお勧めかもしれません。そうすれば、 'var game = new Game()'と言うだけでゲームを作ることができますし、新しいゲームを作りたい場合は、DOM要素をリセットするカスタム関数 'game.remove() 'game = new Game()'と書くことができます。あなたのコードをDRYに保つのに役立つ単なるアイデア。 –

+0

非常に感謝!私はこれに非常に新しいですので、私はこれが配置されている方法はprolly可能な最悪の方法:)と確信しています。私はその方法でリファクタリングを調べます。 – boomer1204

+1

あなたは、あなたのrestart()でshipExist、captExist、およびcrewExist bool varsをリセットするのを忘れています。だから、グローが再適用されていないのです。 – mjwjon

答えて

2

ちょうど(あなたの再起動にこれを追加)

function restart(){ 
    ... 
    shipExist = false; 
    capExist = false; 
    crewExist = false; 
    ... 
} 
+0

すべての変数宣言を一番上に置くことをお勧めします。 – mjwjon

+0

ありがとうございます。うん、私は私の問題を把握しようとする元の宣言にリスタート関数を比較しようとしていたcuzの周りのすべてを移動しました。 – boomer1204

1

フィドルなしで複製するのは難しいですが、別のプロセスを使用して「輝く」クラスを追加したり削除したりしているようです。あなたはそれを削除するのと同じ方法でglowingクラスを追加しようとしましたか?

element.classList.add("glowing") 

フィドル内の例を参照してください:https://jsfiddle.net/5tstf2f8/

+0

グロークラス名addGlowを追加する関数があります。ここにはフィドルがあります。私がする前に、@ mjwjonがそれに気づきました。 https://jsfiddle.net/fmqjzmxd/ – boomer1204

+1

'shipExist'、' capExist'、 'crewExist'変数をfalseに再割り当てする必要があります。 –

+0

ありがとうございます。あなたたちは両方の岩そしてそれは非常に感謝しています! – boomer1204