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

好吧，所以我试图做的是使用jQuery制作一个rock paper scissors类型的游戏。如何使用图片作为if/else语句的激活

我需要如何工作如下。

选择一个触发.click功能的图片（我假设这是我会用的），然后让计算机创建一个1到5之间的随机数。然后这5个数字对应每一个一张不同的图片。（即1-岩石，2纸张，3把剪刀，4个蜥蜴，5个sp子）。我认为将有一个if/else语句设置，以便它可以是这样的：如果计算机选择1 如果您选择摇滚，则选择否则如果您选择纸张，则会丢失否则如果您选择剪刀，否则，如果您选择斯波克，你赢了否则，如果您选择的蜥蜴，你失去否则，如果计算机选择2 等等，等等等等

问题是，我从来没有学会如何之前做一个输入过的图片，其次，如何做rng所以我可以让电脑对抗。

所以不用说我的代码是非常裸露的骨头，因为我没有一个首发位置跳下去的

的Html只是显示的图片和标题大气压。的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

IM硬是卡在一开始，因为我不知道如何启动RNG或点击图片。如果我使用按钮和图片下方的单选按钮来选择它们，这将是NP，但我不能。

提前致谢。

来源

2014-11-03 Kyle Schmelzer

你可能[原文]用javascript创建一个随机数，我会谷歌它。你也可以命名你的每张照片。用javascript恢复元素的名字是微不足道的。所有这些都可以在**客户端**上运行，没有jquery – 2014-11-03 23:18:08

你可以在图像上使用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. 
})

来源

2014-11-03 23:24:35

在这里你去。我不知道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>

来源

2014-11-04 01:50:19 Thomas

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

回答

相关问题