javascript - 剪刀石头布。图像不起作用

Question

嗨，我正在尝试将计算机中的图像放入我的剪刀石头布游戏中，但我遇到了麻烦，而且它不起作用我不知道我哪里出了问题。而且，当我放入图像时，我必须从代​​码中删除警报才能使其正常工作，我将包含我的 JavaScript、HTML 以及我的 fiddle 。我遇到了很多麻烦，因为我真的陷入困境并且真的遇到了麻烦。

FIDDLE

JavaScript

var differentOptions = ["rock", "paper", "scissors"];
var scores = [0, 0, 0, 0];

function Picks(id) {
var choice1 = id;

var imagePlayer = "<img='rps-paper" + "<img='rsp-rock" + "<img='rps-scissors" + choice1 + ".gif'   />";

var choice2 = computerGenerate();

var imageComputer = "<img='rps-paper" + "<img='rsp-rock" + "<img='rps-scissors" + choice2 + ".gif' />";

alert ("You chose " + choice1 + ". The computer chose " + choice2 + "! " + compare(choice1, choice2));
document.getElementById('player').innerHTML = imagePlayer;
document.getElementById('computer').innerHTML = imageComputer;
displayScores();

}

function computerGenerate() {
var num = [Math.floor(Math.random() * 3)]
var computerChoice = differentOptions[num];
return computerChoice;
}

function compare(choice1, choice2) {
if (choice1 == choice2) {
    scores[0]++;
    scores[3]++;
    return (" Draw You both picked the same! Try again!");
} else if (choice1 == "rock") {
    if (choice2 == "scissors") {
        scores[1]++;
        scores[3]++;
        return ("You Win!");
    } else {
        scores[2]++;
        scores[3]++;
        return ("You Lose!");
    }
} else if (choice1 == "paper") {
    if (choice2 == "rock") {
        scores[1]++;
        scores[3]++;
        return ("You Win!");
    } else if (choice2 == "scissors") {
        scores[2]++;
        scores[3]++;
        return ("You Lose!");
    }
} else if (choice1 == "scissors") {
    if (choice2 == "rock") {
        scores[2]++;
        scores[3]++;
        return ("You Lose!");
    } else if (choice2 == "paper") {
        scores[1]++;
        scores[3]++;
        return ("You Win!");
        }
    }
}

function displayScores() {
document.getElementById("wins").innerHTML = "Wins: " + scores[1];
document.getElementById("loss").innerHTML = "Losses: " + scores[2];
document.getElementById("ties").innerHTML = "Ties: " + scores[0];

document.getElementById("games").innerHTML = "Games Played: " + scores[3];
}

function resetScores() {
scores = [0, 0, 0, 0];
displayScores();
}

这是我的 HTML。

<div style="text-align: center;">
<div id="optionsPanel">
     <h1 class="title">Let's Play Rock / Paper / Scissors!</h1>

    <div id="computer"></div>
    <br/>
    <div id="player"></div>
    <button id="rockButton" class="button" onclick='userPicks("rock")'>Rock</button>
    <button id="paperButton" class="button" onclick='userPicks("paper")'>Paper</button>
    <button id="scissorsButton" class="button" onclick='userPicks("scissors")'>Scissors</button          </div>
    <div id="scoresPanel">
         <h2 class="title">Scores:</h2>

        <div id="wins" class="scores">Wins:</div>
        <div id="loss" class="scores">Losses:</div>
        <div id="ties" class="scores">Ties:</div>
        <div id="games" class="scores">Games Played:</div>
         <h2 class="button" onclick='resetScores();'>Reset</h2>

    </div>

这是我的 CSS。

#player, #computer {
border: 1px solid black;
height: 100px;
width: 150px;
margin: 10px;
}

Answer 1

这是我的版本

Fiddle

function userPicks(id) {
   var choice1 =  differentOptions[id];
   var choice2 = computerGenerate();
   var imagePlayer = "<img src='rps-"+ choice1 + ".gif' title='"+choice1+"' />";
   var imageComputer = "<img src='rps-"+choice2 + ".gif' title='"+choice2+"' />";

   document.getElementById("message").innerHTML="You chose " + choice1 + ". The computer chose " + choice2 + "! " + compare(choice1, choice2);

添加<div id="message"></div>后到页面

我将 Picks 重命名为 userPics，并将执行方式从 userPicks("rock") 更改为 userPick(0)/(1) 和 (2)，因此我们只需要一个数组

<小时/>

这是一个扩展版本，您可以在其中决定关联数组中的图像。

var differentOptions = {
  "rock":   "rock.jpg",
  "paper": "paper.jpg",
  "scissors":"http://upload.wikimedia.org/wikipedia/commons/1/18/Skalm_2.JPG"
}

注意将 userPicks(1) 更改回 userPics("rock")

FIDDLE

function userPicks(choice1) {
   var choice2 = computerGenerate();
   var imagePlayer = "<img width='90%' height='90%' src='"+ differentOptions[choice1] + "' title='"+choice1+"' />";
   var imageComputer = "<img width='90%' height='90%' src='"+differentOptions[choice2] + "' title='"+choice2+"' />";

使用

function computerGenerate() {
  var choices = ["rock","paper","scissors"]; // now you can add "spock" if you want
  var num = [Math.floor(Math.random() * choices.length)]
  return choices[num];
}