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

Question

您好，我正在尝试将我计算机中的图像放入我的石头剪刀布游戏中，但我遇到了麻烦，它无法正常工作，我不知道我哪里出错了。 而且当我把图像放进去时，我必须从我的代码中删除我的警报才能让它工作，我将包括我的 JavaScript 和我的 HTML 以及我的小提琴。 我遇到了很多麻烦，我真的被卡住了，真的遇到了麻烦。

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

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

我可能会将上面的内容更改为这样的：

//playerId would be the html id mapping to "computer" or "player"
function updateImage(playerId, choiceIndex) {
    var choices = ['image1.gif', 'image2.gif', 'image3.gif'];
    var computerImageTemplate = '<img src="{image_placeholder}" />';
    var imageMarkup = computerImageTemplate.replace("{image_placeholder}", choices[choiceIndex]);
    document.getElementById(playerId).innerHTML = imageMarkup;
}

由于您正在构建一个如下所示的字符串，因此您当前遇到了错误：

<img='rps-paper<img='rsp-rock<img='rps-scissorsCHOICE_HERE.gif/>

应该更像

<img src="CHOICE_HERE.gif" />

您可以通过查看 DOM 资源管理器（右键单击并在浏览器中检查）来查看您生成的输出类型。

Answer 2

这是我的版本

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];
}