如何添加图像到岩石，剪刀纸游戏

我想添加一些图像到我的游戏。当你点击按钮时，它应该会出现一个图像。请有人请教我或告诉我该怎么做？如何添加图像到岩石，剪刀纸游戏

我的HTML：

<div style="text-align: center;"> 
<H1>Rock Paper Scissors</H1> 
<H2>Instructions</H2> 
<p>Click a button to choose what to throw</p> 
<p id="buttons"> 
    <input type="button" value="Rock" onclick="hand(0);" /> 
    <input type="button" value="Paper" onclick="hand(1);" /> 
    <input type="button" value="Scissors" onclick="hand(2);" /> 
</p> 
<h3>Scoreboard:</h3> 
<ul id="scoreboard"> 
     Wins: <span id="win">0</span> 
    <br/> 
     Losses: <span id="lose">0</span> 
    <br/> 
     Ties: <span id="tie">0</span>  
</ul>

我的javascript：

var ties = 0; 
var wins = 0; 
var losses = 0; 

// randInt returns a random integer between 0 and 2 
function randInt() {return Math.floor(Math.random()*3);} 

    function msgAlert(msg, player, comp) { 
var outcome = ["Rock", "Paper", "Scissors"]; 

if (msg === "tie") { 
    alert("Tie!\n" + "Player: " + outcome[player] + "\n" + "Computer: " + outcome[comp]); 
} 

if (msg === "win") { 
    alert("You won!\n" + "Player: " + outcome[player] + "\n" + "Computer: " + outcome[comp]); 
}   

if (msg === "lose") { 
    alert("You lost!\n" + "Player: " + outcome[player] + "\n" + "Computer: " + outcome[comp]); 
} 
} 

function updateScore(result) { 
var tie = document.getElementById("tie"); 
var win = document.getElementById("win"); 
var lose = document.getElementById("lose"); 

if (result === "tie") { 
    ties++; 
    tie.innerHTML = ties; 
} 

if (result === "win") { 
    wins++; 
    win.innerHTML = wins; 
} 

if (result === "lose") { 
    losses++; 
    lose.innerHTML = losses; 
} 
} 

function hand(player) { 
var comp = randInt(); 

if (player === comp) { 
    updateScore("tie"); 
    msgAlert("tie", player, comp); 
} 

/* Rock Conditions */ 
if (player === 0 && comp === 1) { 
    updateScore("lose"); 
    msgAlert("lose", player, comp); 
} 

if (player === 0 && comp === 2) { 
    updateScore("win"); 
    msgAlert("win", player, comp); 
} 

/* Paper Conditions */ 
if (player === 1 && comp === 0) { 
    updateScore("win"); 
    msgAlert("win", player, comp); 
} 

if (player === 1 && comp === 2) { 
    updateScore("lose"); 
    msgAlert("lose", player, comp); 
} 

/* Scissors Conditions */ 
if (player === 2 && comp === 0) { 
    updateScore("lose"); 
    msgAlert("lose", player, comp); 
} 

if (player === 2 && comp === 1) { 
    updateScore("win"); 
    msgAlert("win", player, comp); 
} 
}

这是我的小提琴。 http://jsfiddle.net/Matt1990/o6ac51v0/1/

来源

2014-09-29 Matthew

具体 - 你想知道如何通过'javascript'将图像添加到'html'吗？网上有很多资源。如果你想要一些特定的方式来使用图像，告诉我们。如果您希望人们为您编写代码，它将不会发生。这是针对特定技术问题的问答网站 - 我们不会为您编写代码或尝试找出您的问题没有任何线索。这太宽了。 – mechalynx 2014-09-29 04:04:15

我有一些想要投入我的游戏的图像。我只是想知道如何添加它们，所以我把它们放入，所以当玩家玩游戏时，他们会点击岩石纸或剪刀，然后他们点击它的按钮会拿出他们点击的按钮的图像 – Matthew 2014-09-29 04:36:21

我不dont希望人们通过@ivy_lynx – Matthew 2014-09-29 04:40:45

您可以使用getElementByClass和onClick来设置侦听器函数。喜欢的东西：

getElementByClass('.button').onClick = function(){ 

}

https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers.onclick

然后匿名函数中，你可以编写一些代码来使图像出现在你想要它。您可以使用类似.appendChild

https://developer.mozilla.org/en-US/docs/Web/API/Node.appendChild

有一个在上面张贴.appendChild链接一个很好的例子。希望能帮助到你。

编辑：你也可以调查jQuery，一旦你感觉它可以使这种类型的DOM操作更容易一些。

来源

2014-09-29 05:46:45 brybott

的方式为我编写代码，谢谢，因为我会给它看看。 – Matthew 2014-09-29 06:02:02

如何添加图像到岩石，剪刀纸游戏

回答

相关问题