編程一個岩石剪刀html遊戲

-1

我正在爲我的計算機科學課製作一個岩石剪刀遊戲。遊戲是一個人對電腦。我已經獲得了代碼到網頁看起來正確的地步，但是當用戶點擊其中一個圖標來選擇岩石紙或剪刀時，什麼都不會發生。有人可以幫助我將圖片按鈕連接到運行遊戲的功能嗎？另外，如果我能夠獲得關於如何添加保持遊戲得分的代碼的幫助，並計算人和計算機各得到多少勝利？謝謝。代碼如下。編程一個岩石剪刀html遊戲

<!doctype html> 
 
<html> 
 
<head> 
 
<meta charset="utf-8"> 
 
<title>Rock Paper Scissors Shoot!</title> 
 
<style> 
 
body { 
 
    font-family: Roboto, Arial; 
 
} 
 

 
.choose img { 
 
    width: 150px; 
 
    margin: 20px; 
 
} 
 
</style> 
 
</head> 
 

 
<body> 
 

 
<div class="choose" align="center"> 
 
    <h1 id="question">Let's play rock paper scissors! Choose a move</h2> 
 
    <img alt="Dwayne THE ROCK Johnson"src="http://d39ya49a1fwv14.cloudfront.net/wp-content/uploads/2015/06/The-Rock-4.png" id="rock"> 
 
    <img alt="Lined paper"src="http://images.clipartpanda.com/writing-on-paper-clipart-black-and-white-1206556249326967385nexxuz_Loose_Leaf_Paper.svg" id="paper"> 
 
    <img alt="Scissors"src="http://www.wpclipart.com/education/supplies/scissors/round-tip_scissors_blue.png" id="scissors"> 
 
</div> 
 

 
<script> 
 

 
    var computerChoice = math.random(); 
 
    var userChoice = null; 
 

 
    if (computerChoice < .33) { 
 
     computerChoice == "rock"; 
 
    } else if (computerChoice < .66) { 
 
     computerChoice == "paper"; 
 
    } else { 
 
     computerChoice == "scissors"; 
 
    }; 
 

 
    function convertUserChoice() { 
 
     $('#rock').click(function() { 
 
      userChoice == "rock"; 
 
     }); 
 
     $('#paper').click(function() { 
 
      userChoice == "paper"; 
 
     }); 
 
     $('#scissors').click(function() { 
 
      userChoice == "scissors"; 
 
     }); 
 
    }; 
 

 
    if (userChoice == computerChoice) { 
 
     alert ("Tie!"); 
 
    } else if (userChoice == "rock") { 
 
     if (computerChoice == "scissors") { 
 
      alert ("You win!"); 
 
     } else { 
 
      alert ("You lose."); 
 
     }; 
 
    } else if (userChoice == "paper") { 
 
     if (computerChoice == "rock") { 
 
      alert ("You win!"); 
 
     } else { 
 
      alert ("You lose."); 
 
     }; 
 
    } else if (userChoice == "scissors") { 
 
     if (computerChoice == "paper") { 
 
      alert ("You win!"); 
 
     } else { 
 
      alert ("You lose"); 
 
     }; 
 
    }; 
 

 
</script> 
 
</body> 
 
</html>

來源

2015-11-07 andrew dilbus

它看起來像你使用jQuery，但沒有包括它。

添加到您的<head>：

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

沒有jQuery的另一個解決方案是使用onClick功能。

<img alt="Dwayne THE ROCK Johnson"src="http://d39ya49a1fwv14.cloudfront.net/wp-content/uploads/2015/06/The-Rock-4.png" id="rock" onClick="onRockClick()">

來源

2015-11-07 22:29:19 Cir0X

向頭部添加似乎沒有工作。 onClick函數的實際代碼塊是什麼樣的？ –

雖然有效的建議，國際海事組織絕對沒有理由使用內聯事件屬性了。 – Phix

-1

你的代碼應該是這樣的：

<!doctype html> 
 
<html> 
 
<head> 
 
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script> 
 
<meta charset="utf-8"> 
 
<title>Rock Paper Scissors Shoot!</title> 
 
<style> 
 
body { 
 
    font-family: Roboto, Arial; 
 
} 
 

 
.choose img { 
 
    width: 150px; 
 
    margin: 20px; 
 
} 
 
</style> 
 
</head> 
 

 
<body> 
 

 
<div class="choose" align="center"> 
 
    <h1 id="question">Let's play rock paper scissors! Choose a move</h2> 
 
    <img alt="Dwayne THE ROCK Johnson"src="http://d39ya49a1fwv14.cloudfront.net/wp-content/uploads/2015/06/The-Rock-4.png" id="rock"> 
 
    <img alt="Lined paper"src="http://images.clipartpanda.com/writing-on-paper-clipart-black-and-white-1206556249326967385nexxuz_Loose_Leaf_Paper.svg" id="paper"> 
 
    <img alt="Scissors"src="http://www.wpclipart.com/education/supplies/scissors/round-tip_scissors_blue.png" id="scissors"> 
 
</div> 
 

 
<script> 
 

 
    var computerChoice = Math.random(); 
 
    var userChoice = null; 
 

 
    if (computerChoice < .33) { 
 
     computerChoice = "rock"; 
 
    } else if (computerChoice < .66) { 
 
     computerChoice = "paper"; 
 
    } else { 
 
     computerChoice = "scissors"; 
 
    }; 
 

 
    function convertUserChoice(userChoice) { 
 
    if (userChoice == computerChoice) { 
 
     alert ("Tie!"); 
 
    } else if (userChoice == "rock") { 
 
     if (computerChoice == "scissors") { 
 
      alert ("You win!"); 
 
     } else { 
 
      alert ("You lose."); 
 
     } 
 
    } else if (userChoice == "paper") { 
 
     if (computerChoice == "rock") { 
 
      alert ("You win!"); 
 
     } else { 
 
      alert("You lose."); 
 
     } 
 
    } else if (userChoice == "scissors") { 
 
     if (computerChoice == "paper") { 
 
      alert ("You win!"); 
 
     } else { 
 
      alert("You lose"); 
 
     } 
 
    } 
 
     
 
    } 
 

 
    $('#rock').click(function() { 
 
      convertUserChoice("rock"); 
 
     }); 
 
     $('#paper').click(function() { 
 
      convertUserChoice("paper"); 
 
     }); 
 
     $('#scissors').click(function() { 
 
      convertUserChoice("scissors"); 
 
     }); 
 

 
</script> 
 
</body> 
 
</html>

來源

2015-11-07 22:42:11

調用'computerChoice = Math.random（）;'在convertUserChoice函數的最後，使AI工作。 – k4yaman

它在本網站的運行代碼片段選項中工作，但不在我的計算機上的html鏈接上。我應該如何在computerChoice = Math.random（）中工作？讓它工作 –

你有沒有注意到我把'=='改成了'='？（computerChoice =「.....」） –

-2

有一個公平的位錯，你有什麼至今。我已經做了一些改進，使其能夠正常工作，每輪都做出新的計算機選擇並保持得分。

$(function(){ 
 
    
 
    var computerScore=0, 
 
     playerScore=0; 
 
    
 
    function setText(txt){ 
 
    $("#playerScore").text(playerScore); 
 
    $("#computerScore").text(computerScore); 
 
    $("#result").text(txt); 
 
    } 
 
    
 
    function makeComputerChoice(){ 
 
     var computerChoice = ""; 
 
     var r = Math.random(); 
 
     if (r < .33) { 
 
     computerChoice = "rock"; 
 
     } else if (r < .66) { 
 
     computerChoice = "paper"; 
 
     } else { 
 
     computerChoice = "scissors"; 
 
     }; 
 
     return computerChoice; 
 
    } 
 

 

 
    function makeUserChoice(userChoice){ 
 
     var computerChoice = makeComputerChoice(); 
 
     var outcome = ""; 
 
    if (userChoice == computerChoice) { 
 
     outcome="Tie!"; 
 
    } else if (userChoice == "rock") { 
 
     if (computerChoice == "scissors") { 
 
      outcome="You win!"; playerScore=playerScore+1; 
 
     } else { 
 
      outcome="You lose."; computerScore=computerScore+1; 
 
     }; 
 
    } else if (userChoice == "paper") { 
 
     if (computerChoice == "rock") { 
 
      outcome="You win!"; playerScore=playerScore+1; 
 
     } else { 
 
      outcome="You lose."; computerScore=computerScore+1; 
 
     }; 
 
    } else if (userChoice == "scissors") { 
 
     if (computerChoice == "paper") { 
 
      outcome="You win!"; playerScore=playerScore+1; 
 
     } else { 
 
      outcome="You lose"; computerScore=computerScore+1; 
 
     }; 
 
    }; 
 
     setText(userChoice+" vs "+computerChoice+" = "+outcome); 
 
    }; 
 
    
 
    //add event listeners: 
 
    $('#rock').click(function() { 
 
      makeUserChoice("rock"); 
 
     }); 
 
     $('#paper').click(function() { 
 
      makeUserChoice("paper"); 
 
     }); 
 
     $('#scissors').click(function() { 
 
      makeUserChoice("scissors"); 
 
     }); 
 
});

body { 
 
    font-family: Roboto, Arial; 
 
} 
 

 
.choose img { 
 
    width: 150px; 
 
    margin: 20px; 
 
} 
 
#result {color:red}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="choose" align="center"> 
 
    <h1 id="question">Let's play rock paper scissors! Choose a move</h1> 
 
    <h2 id="result"></h2> 
 
<h2>[Player One] <span id="playerScore">0</span> - <span id="computerScore">0</span> [Computer]</h2> 
 
    <img alt="Dwayne THE ROCK Johnson" src="http://d39ya49a1fwv14.cloudfront.net/wp-content/uploads/2015/06/The-Rock-4.png" id="rock"> 
 
    <img alt="Lined paper" src="http://images.clipartpanda.com/writing-on-paper-clipart-black-and-white-1206556249326967385nexxuz_Loose_Leaf_Paper.svg" id="paper"> 
 
    <img alt="Scissors" src="http://www.wpclipart.com/education/supplies/scissors/round-tip_scissors_blue.png" id="scissors"> 
 
</div>

來源

2015-11-07 23:22:25 Moob

非常感謝你是一個拯救生命的人 –

<!doctype html> 
<html> 
<head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<meta charset="utf-8"> 
<title>Rock Paper Scissors Shoot!</title> 
<style> 
body { 
    font-family: Roboto, Arial; 
} 

.choose img { 
width: 150px; 
margin: 20px; 
} 
#result {color:red} 
</style> 
</head> 

<body> 

<div class="choose" align="center"> 
<h1 id="question">Let's play rock paper scissors! Choose a move</h1> 
<h2 id="result"></h2> 
<h2>[Player One] <span id="playerScore">0</span> - <span id="computerScore">0</span> [Computer]</h2> 
<img alt="Dwayne THE ROCK Johnson" src="http://d39ya49a1fwv14.cloudfront.net/wp-content/uploads/2015/06/The-Rock-4.png" id="rock"> 
<img alt="Lined paper" src="http://images.clipartpanda.com/writing-on-paper-clipart-black-and-white-1206556249326967385nexxuz_Loose_Leaf_Paper.svg" id="paper"> 
<img alt="Scissors" src="http://www.wpclipart.com/education/supplies/scissors/roundtip_scissors_blue.png" id="scissors"> 
</div> 

<script> 
$(function(){ 

var computerScore=0, 
    playerScore=0; 

function setText(txt){ 
$("#playerScore").text(playerScore); 
$("#computerScore").text(computerScore); 
$("#result").text(txt); 
} 

function makeComputerChoice(){ 
    var computerChoice = ""; 
    var r = Math.random(); 
    if (r < .33) { 
    computerChoice = "rock"; 
    } else if (r < .66) { 
    computerChoice = "paper"; 
    } else { 
    computerChoice = "scissors"; 
    }; 
    return computerChoice; 
} 


function makeUserChoice(userChoice){ 
    var computerChoice = makeComputerChoice(); 
    var outcome = ""; 
if (userChoice == computerChoice) { 
    outcome="Tie!"; 
} else if (userChoice == "rock") { 
    if (computerChoice == "scissors") { 
     outcome="You win!"; playerScore=playerScore+1; 
    } else { 
     outcome="You lose."; computerScore=computerScore+1; 
    }; 
} else if (userChoice == "paper") { 
    if (computerChoice == "rock") { 
     outcome="You win!"; playerScore=playerScore+1; 
    } else { 
     outcome="You lose."; computerScore=computerScore+1; 
    }; 
} else if (userChoice == "scissors") { 
    if (computerChoice == "paper") { 
     outcome="You win!"; playerScore=playerScore+1; 
    } else { 
     outcome="You lose"; computerScore=computerScore+1; 
    }; 
}; 
    setText(userChoice+" vs "+computerChoice+" = "+outcome); 
}; 

//add event listeners: 
$('#rock').click(function() { 
     makeUserChoice("rock"); 
    }); 
    $('#paper').click(function() { 
     makeUserChoice("paper"); 
    }); 
    $('#scissors').click(function() { 
     makeUserChoice("scissors"); 
    }); 
}); 
</script> 
</body> 
</html>

我花了幾乎全部來自@Moob的代碼，它工作得很好，我不知道爲什麼大家都投下來他。我爲此投了贊成票。我需要放入開始和結束標記，但這是關於它。

來源

2015-11-08 00:08:56

編程一個岩石剪刀html遊戲

回答

相關問題