如何使用圖片作爲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語句的激活

回答

相關問題