我想创建一个简单的石头剪刀游戏桌。我需要一个快速的帮助:当用户点击(onclick)摇滚,纸张或剪刀的图像时,计算机的选择图像将与用户一起显示&#39的选择。这将更新得分获胜,失败和关系。我在显示计算机的随机选择图像以及要显示的分数更新时遇到问题。如果有人可以帮助我,我真的很感激。以下是我的代码:
<table>
<tr>
<th colspan = "3">
<h1>Rock Paper Scissors</h1>
</th>
</tr>
<tr>
<td onclick="hand(1)"><img src="rock.jpg" alt="rock" id= "pic1" /></td>
<td rowspan ="3"><img src ="leftPaperHand.jpg" id="userpick"/></td>
<!--starting image for user-->
<td rowspan ="3"><img src ="rightRockHand.jpg" id="comppick"/></td>
<!--starting image for comp-->
</tr>
<tr>
<td onclick="hand(2)"><img src="paper.jpg" alt="paper" id="pic2"/></td>
</tr>
<tr>
<td onclick="hand(3)"><img src="scissors.jpg" alt="scissor" id="pic3"/></td>
</tr>
<tr>
<td colspan = "3">
<h2>Win:<span id="win">0</span> Loses: <span id="lose">0</span> Ties:<span id="tie">0</span></h2>
</td>
</tr>
</table>
<script>
/////////////////////////// convert user's choice picture and show it up on userpick
var userChoice = "leftPaperHand.jpg";
var compChoice = "rightRockHand.jpg";
drawComputer();
function hand(choice) {
switch (choice) {
//if user chooses rock
case 1:
document.getElementById("userpick").src="leftRockHand.jpg";
if (comp==1){
updateScore("tie");
}
else if (comp== 2) {
updateScore("lose");
}
else{
updateScore("win");
break;
}
//if user chooses paper
case 2:
document.getElementById("userpick").src="leftPaperHand.jpg";
if (comp==2){
updateScore("tie");
}
else if (comp==1) {
updateScore("win");
}
else {
updateScore("lose");
break;
}
//is user chooses scissor
case 3:
document.getElementById("userpick").src="leftScissorHand.jpg";
if (comp==3){
updateScore("tie");
}
else if (comp== 1) {
updateScore("lose");
}
else {
updateScore("win");
break;
}
}
}
////////////////////////////computer's pick
var comp = Math.floor(Math.random()*3)+1; //starts the counter from 1,2,3
function drawComputer() {
if (comp===1) {
comppick.src="rightRockHand.jpg";
}
else if (comp ===2) {
comppick.src="rightPaperHand.jpg";
}
else{
comppick.src ="rightScissorHand.jpg";
}
}
//////////////////////////updating the score
var ties = 0;
var wins = 0;
var losses = 0;
function updateScore(result) {
var tie = document.getElementById("tie");
var win = document.getElementById("win");
var lose = document.getElementById("lose");
//updating the counter for tie
if (result === "tie") {
ties++;
tie.innerHTML = ties;
}
//updating the counter for win
if (result === "win") {
wins++;
win.innerHTML = wins;
}
//updating the counter for lose
if (result === "lose") {
losses++;
lose.innerHTML = losses;
}
}
</script>