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

【问题标题】：How to use a picture as an activation for if/else statement如何使用图片作为 if/else 语句的激活
【发布时间】：2014-11-04 09:50:19
【问题描述】：

好的，所以我想做的是使用jQuery制作一个石头剪刀布类型的游戏。

我需要它如何工作如下。

选择一张触发 .click 功能的图片（单击它）（我假设这是我将使用的），然后让计算机创建一个介于 1 和 5 之间的随机数。然后，这 5 个数字将分别对应一个不同的图片。（即 1 块石头、2 块纸、3 把剪刀、4 只蜥蜴、5 只史波克）。我认为会有一个 if/else 语句设置来实现它，所以它会是这样的：如果计算机选择 1 如果你选择摇滚，领带否则如果你选择纸，你就输了否则如果你选择剪刀，你赢了否则，如果您选择 spock，您就赢了否则如果你选择蜥蜴，你就输了否则如果计算机选择 2 等等等等等等。

问题是我以前从未学会如何从图片中输入，其次，如何进行 rng 以便我可以与计算机对战。

所以不用说我的代码非常简单，因为我没有起点可以跳出

Html 仅显示图片和标题 atm。 JSfiddle 的价值 - http://jsfiddle.net/nndq3nnz/

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="styles.css" rel="stylesheet" type="text/css" media="screen">
</head>

<body>
<div id="wrapper">
<h1>Lizard, paper, scissors, spock, rock</h1>

<div id="images">
<img src="Images/lizard.jpg" width="150" height="150" alt=""/>
<img src="Images/paper.jpg" width="150" height="150" alt=""/>
<img src="Images/scissors.jpg" width="150" height="150" alt=""/>
<img src="Images/spock.jpg" width="150" height="150" alt=""/>
<img src="Images/rock.jpg" width="150" height="150" alt=""/>

<div id="comp">
</div>
<div id="win">
</div>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="unit2.js"></script>
</body>
</html>

和 Javascript：

$(function(){

    $('#play').click(function(){


    });//closes play function

});// closes function

因为我不知道如何启动 rng 或图像点击，所以我确实卡在了开头。如果我使用图片下方的按钮和单选按钮来选择它们，这将是 np，但我不能。

提前谢谢。

【问题讨论】：

你可以[原文如此]用javascript创建一个随机数，我会用谷歌搜索它。您还可以为每张图片命名。用 javascript 恢复元素的名称是微不足道的。所有这些几乎都可以在 客户端 上运行，无需 jquery

标签： javascript jquery

【解决方案1】：

您可以在图像上使用 JQuery 的 .click() 方法，没有问题。

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

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

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

还有一些JS：

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

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

编辑： 如果你不能使用按钮，那么你仍然可以在你的图片中添加一些data-* 属性来携带值，并将点击监听器放在图片上。

这将是这样做的方法：

<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"/>

还有一些JS：

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

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

【讨论】：

【解决方案2】：

给你。我不知道 spock 或蜥蜴的规则，但这是简单的石头、纸、剪刀的规则。

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

【讨论】：