Javascript 如何使用图片作为if/else语句的激活

好的，我要做的就是用jQuery制作一个石头剪刀类游戏

我需要它如何工作如下

选择一张触发.click功能的图片（单击），然后让计算机创建一个介于1和5之间的随机数。这5个数字将分别对应于不同的图片。（即1块石头、2块布、3把剪刀、4只蜥蜴、5只斯波克）。我认为应该有一个if/else语句设置，使其类似于： 如果计算机选择1 如果你选择摇滚乐，那就打领带 否则，如果你选择纸张，你就输了 否则，如果你选择剪刀，你就赢了 否则，如果你选择斯波克，你就赢了 否则，如果你选择蜥蜴，你就输了 否则，如果计算机选择2 等等等等等等

问题是我以前从来没有学过如何输入图片，其次，如何做rng，这样我就可以和电脑玩了

所以不用说，我的代码是令人难以置信的赤裸裸的，因为我没有一个出发点

Html只显示图片和标题。JSfiddle的价值-

由于我不知道如何启动rng或图像点击，我一开始就被卡住了。如果我使用图片下方的按钮和单选按钮来选择它们，这将是np，但我不能

---

提前感谢。

您可以使用JQuery的

。在图像上单击（）

方法，没有问题

但是，您也可以将图像包装在按钮中，以便向其添加值，然后使用单击控制器检索所按下按钮的值

这就是你做那件事的方式：

<button class="game-button" value="1"><img src="Images/lizard.jpg" width="150" height="150" alt=""/></button>
<button class="game-button" value="2"><img src="Images/paper.jpg" width="150" height="150" alt=""/></button>
<button class="game-button" value="3"><img src="Images/scissors.jpg" width="150" height="150" alt=""/></button>
<button class="game-button" value="4"><img src="Images/spock.jpg" width="150" height="150" alt=""/></button>
<button class="game-button" value="5"><img src="Images/rock.jpg" width="150" height="150" alt=""/></button>

编辑： 如果您不能使用按钮，那么您仍然可以向图像添加一些

数据-*

属性来携带该值，并将单击侦听器放在图像上

这将是实现这一目标的方法：

<img class="game-image" src="Images/lizard.jpg" width="150" height="150" alt="" data-value="1"/>
<img class="game-image" src="Images/paper.jpg" width="150" height="150" alt="" data-value="2"/>
<img class="game-image" src="Images/scissors.jpg" width="150" height="150" alt="" data-value="3"/>
<img class="game-image" src="Images/spock.jpg" width="150" height="150" alt="" data-value="4"/>
<img class="game-image" src="Images/rock.jpg" width="150" height="150" alt="" data-value="5"/>

---

给你。我不知道斯波克或蜥蜴的规则，但这是一个简单的石头，布，剪刀

    <script>
    var myChoice;
    var compChoice;
    function rock() {
    myChoice = 1;
    }
    function paper() {
    myChoice = 2;
    }
    function scissors() {
    myChoice = 3;
    }

    function runGame() {

    compChoice = Math.floor(Math.random() * (3)) + 1;


    if (compChoice == myChoice) {
    document.getElementById("result").innerHTML='tie';
    }

    if ((compChoice == 1) && (myChoice == 2)) {
    document.getElementById("result").innerHTML='you win';
    }

    if ((compChoice == 1) && (myChoice == 3)) {
    document.getElementById("result").innerHTML='you lose';
    }

    if ((compChoice == 2) && (myChoice == 3)) {
    document.getElementById("result").innerHTML='you win';
    }

    if ((compChoice == 2) && (myChoice == 1)) {
    document.getElementById("result").innerHTML='you lose';
    }

    if ((compChoice == 3) && (myChoice == 1)) {
    document.getElementById("result").innerHTML='you win';
    }

    if ((compChoice == 3) && (myChoice == 2)) {
    document.getElementById("result").innerHTML='you lose';
    }
    if (compChoice == 1) {
    document.getElementById("compChoice").src='http://newsdesk.si.edu/sites/default/files/imagecache/snapshot_image/PlymouthRockPiece.jpg';
    }

    if (compChoice == 2) {
    document.getElementById("compChoice").src='http://www.weissraum.at/wp-content/uploads/10_x_a4_wildflower_seeded_paper.jpeg';
    }

    if (compChoice == 3) {
    document.getElementById("compChoice").src='http://upload.wikimedia.org/wikipedia/commons/1/18/Skalm_2.JPG';
    }

    }
    </script>

    <h1>Lizard, paper, scissors, spock, rock</h1>

    <div id="images">
    <button onClick="rock();runGame();"><img src="http://newsdesk.si.edu/sites/default/files/imagecache/snapshot_image/PlymouthRockPiece.jpg" width="150" height="150" /></button>

    <button onClick="paper();runGame();"><img src="http://www.weissraum.at/wp-content/uploads/10_x_a4_wildflower_seeded_paper.jpeg" width="150" height="150" /></button>

    <button onClick="scissors();runGame();"><img src="http://upload.wikimedia.org/wikipedia/commons/1/18/Skalm_2.JPG" width="150" height="150" /></button>
    </br>
    Computer Choice:
    </br>
    <img src="http://www.rankopedia.com/CandidatePix/85583.gif" id="compChoice" width="150" height="150"/>
    <div id="result">result</div>
    </div>

var-myChoice；
风险价值选择；
功能岩（）{
myChoice=1；
}
功能文件（）{
myChoice=2；
}
函数剪刀（）{
myChoice=3；
}
函数runGame（）{
compChoice=Math.floor（Math.random（）*（3））+1；
if（compChoice==myChoice）{
document.getElementById（“结果”）.innerHTML='tie'；
}
如果（（compChoice==1）和&（myChoice==2））{
document.getElementById（“结果”）.innerHTML='youwin'；
}
如果（（compChoice==1）和&（myChoice==3））{
document.getElementById（“结果”）.innerHTML='youlose'；
}
如果（（compChoice==2）和&（myChoice==3））{
document.getElementById（“结果”）.innerHTML='youwin'；
}
如果（（compChoice==2）和&（myChoice==1））{
document.getElementById（“结果”）.innerHTML='youlose'；
}
如果（（compChoice==3）和&（myChoice==1））{
document.getElementById（“结果”）.innerHTML='youwin'；
}
如果（（compChoice==3）和&（myChoice==2））{
document.getElementById（“结果”）.innerHTML='youlose'；
}
if（compChoice==1）{
document.getElementById（“compChoice”）.src='10〕http://newsdesk.si.edu/sites/default/files/imagecache/snapshot_image/PlymouthRockPiece.jpg';
}
if（compChoice==2）{
document.getElementById（“compChoice”）.src='10〕http://www.weissraum.at/wp-content/uploads/10_x_a4_wildflower_seeded_paper.jpeg';
}
if（compChoice==3）{
document.getElementById（“compChoice”）.src='10〕http://upload.wikimedia.org/wikipedia/commons/1/18/Skalm_2.JPG';
}
}
蜥蜴，布，剪刀，斯波克，石头


电脑选择：


结果

你可以[sic]用javascript创建一个随机数，我会用谷歌搜索它。你也可以为你的每一张照片命名。用javascript恢复元素的名称很简单。所有这些基本上都可以在客户端运行，而无需jquery

$(document).on('click', '.game-button', function(event) {
    var value = event.target.val();

    // Then pick the computer's choice and run the game.
})

<img class="game-image" src="Images/lizard.jpg" width="150" height="150" alt="" data-value="1"/>
<img class="game-image" src="Images/paper.jpg" width="150" height="150" alt="" data-value="2"/>
<img class="game-image" src="Images/scissors.jpg" width="150" height="150" alt="" data-value="3"/>
<img class="game-image" src="Images/spock.jpg" width="150" height="150" alt="" data-value="4"/>
<img class="game-image" src="Images/rock.jpg" width="150" height="150" alt="" data-value="5"/>

$(document).on('click', '.game-image', function(event) {
    var value = event.target.data('value');

    // Then pick the computer's choice and run the game.
})

    <script>
    var myChoice;
    var compChoice;
    function rock() {
    myChoice = 1;
    }
    function paper() {
    myChoice = 2;
    }
    function scissors() {
    myChoice = 3;
    }

    function runGame() {

    compChoice = Math.floor(Math.random() * (3)) + 1;


    if (compChoice == myChoice) {
    document.getElementById("result").innerHTML='tie';
    }

    if ((compChoice == 1) && (myChoice == 2)) {
    document.getElementById("result").innerHTML='you win';
    }

    if ((compChoice == 1) && (myChoice == 3)) {
    document.getElementById("result").innerHTML='you lose';
    }

    if ((compChoice == 2) && (myChoice == 3)) {
    document.getElementById("result").innerHTML='you win';
    }

    if ((compChoice == 2) && (myChoice == 1)) {
    document.getElementById("result").innerHTML='you lose';
    }

    if ((compChoice == 3) && (myChoice == 1)) {
    document.getElementById("result").innerHTML='you win';
    }

    if ((compChoice == 3) && (myChoice == 2)) {
    document.getElementById("result").innerHTML='you lose';
    }
    if (compChoice == 1) {
    document.getElementById("compChoice").src='http://newsdesk.si.edu/sites/default/files/imagecache/snapshot_image/PlymouthRockPiece.jpg';
    }

    if (compChoice == 2) {
    document.getElementById("compChoice").src='http://www.weissraum.at/wp-content/uploads/10_x_a4_wildflower_seeded_paper.jpeg';
    }

    if (compChoice == 3) {
    document.getElementById("compChoice").src='http://upload.wikimedia.org/wikipedia/commons/1/18/Skalm_2.JPG';
    }

    }
    </script>

    <h1>Lizard, paper, scissors, spock, rock</h1>

    <div id="images">
    <button onClick="rock();runGame();"><img src="http://newsdesk.si.edu/sites/default/files/imagecache/snapshot_image/PlymouthRockPiece.jpg" width="150" height="150" /></button>

    <button onClick="paper();runGame();"><img src="http://www.weissraum.at/wp-content/uploads/10_x_a4_wildflower_seeded_paper.jpeg" width="150" height="150" /></button>

    <button onClick="scissors();runGame();"><img src="http://upload.wikimedia.org/wikipedia/commons/1/18/Skalm_2.JPG" width="150" height="150" /></button>
    </br>
    Computer Choice:
    </br>
    <img src="http://www.rankopedia.com/CandidatePix/85583.gif" id="compChoice" width="150" height="150"/>
    <div id="result">result</div>
    </div>