岩石，剪刀。图像不工作

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

这里是我的版本

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>页面

我改名精选以userPics，改变从userPicks执行（ “石头”），以userPick后（ 0）/（1）和（2）所以我们只需要一个阵列

---

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

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

注意事项（1）回userPics（ “石头”）

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

Answer 2

"<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浏览器（右键单击并在浏览器中检查）来查看您正在生成的输出类型。