gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-03 11:31:10 25 4
gpt4 key购买 nike

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

我需要它如何工作如下。

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

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

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

Html 仅显示图片和标题 atm。 JSfiddle 的值(value) - 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,但我不能。

提前致谢。

最佳答案

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

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

这就是您执行该特定操作的方式:

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

关于javascript - 如何使用图片作为 if/else 语句的激活,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26724993/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com