Question

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

我需要它如何工作如下。

选择一张图片（点击它），触发.click功能（我假设这就是我要使用的），然后让计算机创建一个1到5之间的随机数。这5个数字将分别对应一个不同的图片。（即1个岩石，2个纸，3个剪刀，4个蜥蜴，5个spock）。我认为会有一个if / else语句设置，所以它会是这样的：如果电脑选择1 如果你选择摇滚，领带否则，如果你选择纸张，你会失败否则，如果你选择剪刀，你就赢了否则，如果你选择spock，你就赢了否则，如果你选择蜥蜴，你输了否则如果电脑选择2 等等。

问题是我从来没有学过如何在照片之前进行输入，其次，如何做到让我可以让电脑对抗。

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

Html只显示pics和标题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，但我不能。

提前致谢。

Answer 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. })

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

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

2 个答案: