2013-10-31 141 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的(如果不)

相关问题