2013-10-31 142 views
1

這裏還是一個新東西,所以請耐心等待,因爲我對JS很陌生,並且有點自學。代碼適用於本地,但不適用於JSFiddle

所以我一直在試圖編寫一個簡單的岩石紙剪刀遊戲,我已經得到它在我的機器上本地工作,但對於我的生活無法弄清楚爲什麼它不會在JSFiddle上工作。我開始在JSFiddle中寫下它,但是當我對JSLint認爲它有效但讓遊戲掛在我的JS的某處時感到沮喪之後,我決定將它移動到記事本並在本地嘗試。那麼,它的工作,但我不明白爲什麼它不喜歡小提琴。也許你們能提供一些線索這對我來說

<html> 
<head> 
<script> 
var ties = 0; 
var wins = 0; 
var losses = 0; 

// randInt returns a random integer between 0 and 2 
function randInt() {return Math.floor(Math.random()*3);} 

function msgAlert(msg, player, comp) { 
    var outcome = ["Rock", "Paper", "Scissors"]; 

    if (msg === "tie") { 
     alert("Tie!\n" + "Player: " + outcome[player] + "\n" + "Computer: " +  outcome[comp]); 
    } 

    if (msg === "win") { 
     alert("You won!\n" + "Player: " + outcome[player] + "\n" + "Computer: " +  outcome[comp]); 
    }   

    if (msg === "lose") { 
     alert("You lost!\n" + "Player: " + outcome[player] + "\n" + "Computer: " +  outcome[comp]); 
    } 
} 

function updateScore(result) { 
    var tieElement = document.getElementById("tie"); 
    var winElement = document.getElementById("win"); 
    var loseElement = document.getElementById("lose"); 

    if (result === "tie") { 
     ties++; 
     tieElement.innerText = ties; 
    } 

    if (result === "win") { 
     wins++; 
     winElement.innerText = wins; 
    } 

    if (result === "lose") { 
     losses++; 
     loseElement.innerText = losses; 
    } 
} 

function hand(player) { 
    var comp = randInt(); 

    if (player === comp) { 
     updateScore("tie"); 
     msgAlert("tie", player, comp); 
    } 

    /* Rock Conditions */ 
    if (player === 0 && comp === 1) { 
     updateScore("lose"); 
     msgAlert("lose", player, comp); 
    } 

    if (player === 0 && comp === 2) { 
     updateScore("win"); 
     msgAlert("win", player, comp); 
    } 

    /* Paper Conditions */ 
    if (player === 1 && comp === 0) { 
     updateScore("win"); 
     msgAlert("win", player, comp); 
    } 

    if (player === 1 && comp === 2) { 
     updateScore("lose"); 
     msgAlert("lose", player, comp); 
    } 

    /* Scissors Conditions */ 
    if (player === 2 && comp === 0) { 
     updateScore("lose"); 
     msgAlert("lose", player, comp); 
    } 

    if (player === 2 && comp === 1) { 
     updateScore("win"); 
     msgAlert("win", player, comp); 
    } 
} 
</script> 
</head> 

<body bgcolor=tan> 
    <H1 align=center>Let's play Rock Paper Scissors!</H1> 
    <H2>Instructions</H2> 
    <p>Click a button to choose what to throw</p> 
    <p id="buttons"> 
     <input type="button" value="Rock" onclick="hand(0);" /> 
     <input type="button" value="Paper" onclick="hand(1);" /> 
     <input type="button" value="Scissors" onclick="hand(2);" /> 
    </p> 
    <h3>Scoreboard:</h3> 
    <ul id="scoreboard"> 
     <li> 
      Wins: <span id="win">0</span> 
     </li> 
     <li> 
      Losses: <span id="lose">0</span> 
     </li> 
     <li> 
      Ties: <span id="tie">0</span> 
     </li> 
    </ul> 
</body> 
</html> 

This sample code at the jsbin.com

+3

@ClaudioSantos這也正是爲什麼** **我問鏈接到非工作提琴。人們會如何回答這樣的問題? –

+0

對不起, JSFiddle鏈接: http://jsfiddle.net/kr3PU/ – DJXiej

+1

很好,你們現在有一個新的理由轉移到jsbin.com,該代碼完美的作品。 :D –

回答

3

要使它在jsFiddle中工作,你必須在jsFiddle中設置左上角的設置爲「No Wrap - in <body>」。

當您將它設置爲onload時,它會將所有代碼放入onload處理函數中,並且不會全局聲明(它在onload處理函數中聲明)。由於沒有全局聲明,因此hand()函數不是全局函數,直接從HTML調用時不起作用,因爲它必須是全局範圍內的,才能通過HTML中的直接調用訪問。

工作演示:http://jsfiddle.net/jfriend00/E9aFy/

+0

非常感謝您的意見和解釋。幫我出去了 – DJXiej

0

的代碼工作完全在jsbin.com,take a look並啓用javascript的(如果不)

相關問題