Javascript陣列不會更新

我正在製作Javascript RPS Bot（岩石，紙張，剪刀機器人）。
除非當我試圖在顯示用戶分數的代碼中添加一個部分（如果他們在遊戲輸入框中鍵入「分數」或「所有分數」），否則一切都可以正常工作。
我一遍又一遍地查看了我的代碼中的錯誤，甚至試圖用http://jsfiddle.net/來調試它，但它告訴我沒有錯誤。Javascript陣列不會更新

因此，這裏是我的HTML：

<!DOCTYPE html> 
<html id="html"> 
    <body id="body"> 
    <div align="center" class="main"> 
     <input class="username" id="username" placeholder="Username"></input> 
     <input class="input" id="input" placeholder="Rock, Paper or Scissors" autofocus><!--game input box--></input> 
     <input type="button" class="button" value="Play" onClick="play()"></input> 
    </div> 

    <div class="result" id="result"> 
     <!--Game results go here--> 
    </div> 

    <center> 
    <input type="button" class="scheme" id="scheme" onClick="toggleScheme()" value="Scheme: Light"></input> 
    </center> 

    <script src="/jquery/1.11.1/jquery.min.js"></script> 
    <script> 
     //JQuery below goes here. 
    </script> 

    <script> 
     //Javascript below goes here 
    </script> 
    </body> 
</html>

我JQuery的只有文檔中任何地方的「Enter」按鍵開始遊戲的檢查，但在這裏它是以防萬一：

$(document).keypress(function(e) { 
    if(e.which == 13) { 
    play(); 
    } 
});

而主要遊戲的Javascript，這個問題很可能從這裏開始：

var play = function() { 
//Ekatwikz RPS bot v1.0.3 
var randomINT = function (min, max) { 
    var random = Math.floor(Math.random() * (max - min)) + min; 
    if (random > max || random < min) { 
    random = "ERROR"; 
    } 
    return random; 
}; 

var capitalize = function (input) { 
    return input.charAt(0).toUpperCase() + input.substring(1); 
}; 

var reset = function() { 
    document.getElementById('input').value = ""; 
    document.getElementById('result').scrollTop = document.getElementById('result').scrollHeight; 
}; 

var getInput = document.getElementById('input').value.toLowerCase(); 
var username = document.getElementById('username').value; 
var getRandom = randomINT(1, 4); 
var output = ["", "", "", "", "", ""]; 

var scores = [0, 0, 0, 0, 0, 0]; 
/*^This^ is the scores array, scores[0] is the number of times the user has won, scores[1] is the number of times the user has lost, scores[2] is the number of draws for the user, scores[3] is the number of times the computer has won, scores[4] is the number of times the computer has lost, scores[5] is the number of draws for the computer*/ 
if (getInput === "" || getInput === null) { 
    getInput = "_Blank"; 
} 

if (username === "" || username === null) { 
    username = "user"; 
} 

if (getInput.substring(0, 5) == "clear" || getInput == "cls") { 
    document.getElementById('result').innerHTML = ""; 
    reset(); 
    return; 
} else if (getInput.substring(0, 2) == "my" || getInput.substring(0, 4) == "user") { 
    document.getElementById("result").appendChild(document.createElement("BR")); 
    document.getElementById("result").appendChild(document.createElement("SPAN").appendChild(document.createTextNode("Your total scores:"))); 
    document.getElementById("result").appendChild(document.createElement("BR")); 
    document.getElementById("result").appendChild(document.createElement("SPAN").appendChild(document.createTextNode("Wins: " + scores[0]))); 
    document.getElementById("result").appendChild(document.createElement("BR")); 
    document.getElementById("result").appendChild(document.createElement("SPAN").appendChild(document.createTextNode("Losses: " + scores[1]))); 
    document.getElementById("result").appendChild(document.createElement("BR")); 
    document.getElementById("result").appendChild(document.createElement("SPAN").appendChild(document.createTextNode("Draws: " + scores[2]))); 
    document.getElementById("result").appendChild(document.createElement("BR")); 
    reset(); 
    return; 
} else if (getInput.substring(0, 4) == "comp") { 
    document.getElementById("result").appendChild(document.createElement("BR")); 
    document.getElementById("result").appendChild(document.createElement("SPAN").appendChild(document.createTextNode("Computer's total scores:"))); 
    document.getElementById("result").appendChild(document.createElement("BR")); 
    document.getElementById("result").appendChild(document.createElement("SPAN").appendChild(document.createTextNode("Wins: " + scores[3]))); 
    document.getElementById("result").appendChild(document.createElement("BR")); 
    document.getElementById("result").appendChild(document.createElement("SPAN").appendChild(document.createTextNode("Losses: " + scores[4]))); 
    document.getElementById("result").appendChild(document.createElement("BR")); 
    document.getElementById("result").appendChild(document.createElement("SPAN").appendChild(document.createTextNode("Draws: " + scores[5]))); 
    document.getElementById("result").appendChild(document.createElement("BR")); 
    reset(); 
    return; 
} else if (getInput.substring(0, 3) == "all" || getInput.substring(0, 6) == "scores") { 
    document.getElementById("result").appendChild(document.createElement("BR")); 
    document.getElementById("result").appendChild(document.createElement("SPAN").appendChild(document.createTextNode("All total scores:"))); 
    document.getElementById("result").appendChild(document.createElement("BR")); 
    document.getElementById("result").appendChild(document.createElement("SPAN").appendChild(document.createTextNode("Your wins: " + scores[0]))); 
    document.getElementById("result").appendChild(document.createElement("BR")); 
    document.getElementById("result").appendChild(document.createElement("SPAN").appendChild(document.createTextNode("Your losses: " + scores[1]))); 
    document.getElementById("result").appendChild(document.createElement("BR")); 
    document.getElementById("result").appendChild(document.createElement("SPAN").appendChild(document.createTextNode("Your draws: " + scores[2]))); 
    document.getElementById("result").appendChild(document.createElement("BR")); 
    document.getElementById("result").appendChild(document.createElement("SPAN").appendChild(document.createTextNode("Computer's wins: " + scores[3]))); 
    document.getElementById("result").appendChild(document.createElement("BR")); 
    document.getElementById("result").appendChild(document.createElement("SPAN").appendChild(document.createTextNode("Computer's losses: " + scores[4]))); 
    document.getElementById("result").appendChild(document.createElement("BR")); 
    document.getElementById("result").appendChild(document.createElement("SPAN").appendChild(document.createTextNode("Computer's draws: " + scores[5]))); 
    document.getElementById("result").appendChild(document.createElement("BR")); 
    reset(); 
    return; 
} 

//Main game logic section 
if (getRandom == 1) { 
    //If computer picked rock 
    if (getInput == "rock") { 
    output[5] = "YES"; 
    output[0] = capitalize(username) + " picked: Rock"; 
    output[1] = "Computer picked: Rock"; 
    output[2] = "*CLUNK SOUND*: Rocks smash against each other"; 
    output[3] = "DRAW"; 
    scores[2] = scores[2] + 1; 
    scores[5] = scores[5] + 1; 
    } else if (getInput == "paper") { 
    output[5] = "YES"; 
    output[0] = capitalize(username) + " picked: Paper"; 
    output[1] = "Computer picked: Rock"; 
    output[2] = "Paper beats Rock"; 
    output[3] = capitalize(username) + " Wins"; 
    scores[0] = scores[0] + 1; 
    scores[4] = scores[4] + 1; 
    } else if (getInput == "scissors") { 
    output[5] = "YES"; 
    output[0] = capitalize(username) + " picked: Scissors"; 
    output[1] = "Computer picked: Rock"; 
    output[2] = "Rock beats Scissors"; 
    output[3] = "Computer Wins"; 
    scores[1] = scores[1] + 1; 
    scores[3] = scores[3] + 1; 
    } else { 
    output[5] = "NO"; 
    output[4] = 'ERROR: Computer does not understand what "' + getInput + '" is.'; 
    } 
} else if (getRandom == 2) { 
    //If computer picked paper 
    if (getInput == "rock") { 
    output[5] = "YES"; 
    output[0] = capitalize(username) + " picked: Rock"; 
    output[1] = "Computer picked: Paper"; 
    output[2] = "Paper beats Rock"; 
    output[3] = "Computer Wins"; 
    scores[1] = scores[1] + 1; 
    scores[3] = scores[3] + 1; 
    } else if (getInput == "paper") { 
    output[5] = "YES"; 
    output[0] = capitalize(username) + " picked: Paper"; 
    output[1] = "Computer picked: Paper"; 
    output[2] = "*SWISH SOUND* Papers brush against each other"; 
    output[3] = "DRAW"; 
    scores[2] = scores[2] + 1; 
    scores[5] = scores[5] + 1; 
    } else if (getInput == "scissors") { 
    output[5] = "YES"; 
    output[0] = capitalize(username) + " picked: Scissors"; 
    output[1] = "Computer picked: Paper"; 
    output[2] = "Scissors beats Paper"; 
    output[3] = capitalize(username) + " Wins"; 
    scores[0] = scores[0] + 1; 
    scores[4] = scores[4] + 1; 
    } else { 
    output[5] = "NO"; 
    output[4] = 'ERROR: Computer does not understand what "' + getInput + '" is.'; 
    } 
} else if (getRandom == 3) { 
    //If computer picked scissors 
    if (getInput == "rock") { 
    output[5] = "YES"; 
    output[0] = capitalize(username) + " picked: Rock"; 
    output[1] = "Computer picked: Scissors"; 
    output[2] = "Rock beats Scissors"; 
    output[3] = capitalize(username) + " Wins"; 
    scores[0] = scores[0] + 1; 
    scores[4] = scores[4] + 1; 
    } else if (getInput == "paper") { 
    output[5] = "YES"; 
    output[0] = capitalize(username) + " picked: Paper"; 
    output[1] = "Computer picked: Scissors"; 
    output[2] = "Scissors beats Paper"; 
    output[3] = "Computer Wins"; 
    scores[1] = scores[1] + 1; 
    scores[3] = scores[3] + 1; 
    } else if (getInput == "scissors") { 
    output[5] = "YES"; 
    output[0] = capitalize(username) + " picked: Scissors"; 
    output[1] = "Computer picked: Scissors"; 
    output[2] = "*CLINK SOUND*: Scissors hit each other"; 
    output[3] = "DRAW"; 
    scores[2] = scores[2] + 1; 
    scores[5] = scores[5] + 1; 
    } else { 
    output[5] = "NO"; 
    output[4] = 'ERROR: Computer does not understand what "' + getInput + '" is.'; 
    } 
} else { 
    output[5] = "NO"; 
    output[4] = "ERROR: Randomizer function seems to be broken"; 
} 

var finish = function (input) { 
    if (input === undefined) { 
    if (output[5] == "YES") { 
     document.getElementById("result").appendChild(document.createElement("BR")); 
     document.getElementById("result").appendChild(document.createElement("SPAN").appendChild(document.createTextNode(output[0]))); 
     document.getElementById("result").appendChild(document.createElement("BR")); 
     document.getElementById("result").appendChild(document.createElement("SPAN").appendChild(document.createTextNode(output[1]))); 
     document.getElementById("result").appendChild(document.createElement("BR")); 
     document.getElementById("result").appendChild(document.createElement("SPAN").appendChild(document.createTextNode(output[2]))); 
     document.getElementById("result").appendChild(document.createElement("BR")); 
     document.getElementById("result").appendChild(document.createElement("SPAN").appendChild(document.createTextNode(output[3]))); 
     document.getElementById("result").appendChild(document.createElement("BR")); 
    } else { 
     document.getElementById("result").appendChild(document.createElement("BR")); 
     document.getElementById("result").appendChild(document.createElement("SPAN").appendChild(document.createTextNode(output[4]))); 
     document.getElementById("result").appendChild(document.createElement("BR")); 
    } 
    } 
}; 

finish(); 
reset(); 
};

我apol提前ogize爲亂碼。

來源

2014-09-01 Ekatwikz

您可能想要查看可用的各種JavaScript模板引擎之一。它會讓你的代碼更清晰。 – Pointy 2014-09-01 14:01:35

請鏈接到您的jsfiddle ...並且...更好地使用對象 – 2014-09-01 14:01:44

如果您使用的是對象而不是數組，例如，您的代碼將更易於閱讀和維護。 'scores.wins'，'scores.losses'等 – Barmar 2014-09-01 14:04:18

問題是scores是play函數中的局部變量，因此每次用戶啓動另一個遊戲時都會重新初始化該函數。它需要是一個全局變量，在函數之外，所以它的值從一個調用繼續到另一個調用。

var scores = [0,0,0,0,0,0]; 
var play = function() { 
    ... 
}

那將是更好地使一個對象：

var scores = { 
    humanWin: 0, 
    humanLose: 0, 
    draw: 0 
};

我不明白爲什麼你需要的計算機勝，損失額外的元素，並繪製;贏得的電腦數量總是與人類損失相同，反之亦然，並且他們都有相同的抽獎數量。

來源

2014-09-01 14:11:13 Barmar

哇，所以這是問題... 現在我覺得完全像一些盲目的noob。無論如何，謝謝！ XD – Ekatwikz 2014-09-01 14:27:11

Javascript陣列不會更新

回答

相關問題