我需要创建一个岩石剪刀模拟,用户点击一块岩石,一张纸或一把剪刀的图片,同一网页上的图像显示选择的形状是一只手的图片无论是摇滚,纸张还是剪刀。然后在这张照片的左边是另一只手,随机生成这三种形状中的一种。我有onclick事件为用户工作,但是我无法弄清楚如何编写随机生成器的代码。这是我的三个函数中的一个(岩石,纸张,剪刀)的代码,但它们都以相同的方式格式化,只是具有不同的值。提前谢谢。
var computerChoice=Math.random();
function clickRock(computerChoice) {
img= document.getElementById("change1");
img.src="leftRockHand.jpg";
if (computerChoice < 0.3333) {
img=document.getElementById("change2");
img.src="rightRockHand.jpg"
}
else if (computerChoice >= 0.3333 && computerChoice < 0.6666) {
img=document.getElementById("change2");
img.src="rightPaperHand.jpg";
}
else if(computerChoice >= 0.6666) {
img=document.getElementById("change2");
img.src="rightScissorHand.jpg";
}
}
这是我的HTML
<tr>
<td onclick="clickRock()" id="rockClick"><img src="rock.jpg" alt="Rock"></td>
<td rowspan="3"><img id="change1" src="leftPaperHand.jpg" alt="Left Hand" height="350"></td>
<td rowspan="3"><img id="change2" src="rightRockHand.jpg" alt="Right Rock" height="350"></td>
</tr>
答案 0 :(得分:0)
function clickRock(choice1, choice2){
changePicture("change1", choice1);
changePicture("change2", choice2);
}
function changePicture(eleId, computerChoice) {
var img = img=document.getElementById(eleId);
if (computerChoice < 0.3333) {
img.src="rightRockHand.jpg"
}
else if (computerChoice >= 0.3333 && computerChoice < 0.6666) {
img.src="rightPaperHand.jpg";
}
else if(computerChoice >= 0.6666) {
img.src="rightScissorHand.jpg";
}
}
如果在click事件监听器中调用clickRock。
答案 1 :(得分:0)
简单地使用max和min来产生任意数量的可能性。
getDefaultProps() {
return {
$END$
};
},
这是一个通用函数,不仅仅是3种可能性,而是n数。只需指定范围为最小值和最大值
答案 2 :(得分:0)
如果您指定Math.random()仅在数字不会更改时返回该变量。将该分配移动到函数中。
要删除少于和多于运算符的需要,可以使用Math.floor(Math.random()* 3)来获得0到2之间的数字。因为您只对一个变量执行相同的操作a switch
声明变得更合适。
如果你想使代码更干净,你可以在检查随机整数之前只将#change2元素分配给img变量一次。
function clickRockAsComputer() {
var computerChoice = Math.floor(Math.random() * 3);
img = document.getElementById("change1");
img.src = "leftRockHand.jpg";
img = document.getElementById("change2");
switch(computerChoice){
case 0:
img.src = "rightRockHand.jpg";
break;
case 1:
img.src = "rightPaperHand.jpg";
break;
case 2:
img.src = "rightScissorHand.jpg";
break;
}
}