尝试根据其 src 从 4 张图像中随机显示一张图像答案

【问题标题】：Trying to randomly display an image, out of 4 images, based on its src尝试根据其 src 从 4 张图像中随机显示一张图像
【发布时间】：2014-11-10 21:11:57
【问题描述】：

我有一个纸牌游戏，我试图从四个可能的图像中随机显示一个图像。 THE CODEPEN：http://codepen.io/anon/pen/udBan图片在html中显示如下：

<html>
<head>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script type="text/javascript" src="js/main.js"></script>
  <link rel="stylesheet" type="text/css" href="css/css.css">
</head>
<body>
  <h1>Card Match!</h1>
  <div id="main_image">
    <!-- <div> -->
      <div><img src="images/back-of-card.png"></div>
      <div><img src="images/back-of-card.png"></div>
      <div><img src="images/back-of-card.png"></div>
      <div><img src="images/back-of-card.png"></div>
      <div id="button_div">
        <button id="start">Start Game</button>
        <button id="reset">Reset Game</button>
        <button id="cheat">Cheat</button>
      </div>
  </div>
</body>
</html>

我有这样的功能，当您点击一张牌时，它会随机将其更改为国王或王后。疯狂激烈的比赛，我知道。

注意作弊按钮。

我写的函数是：

var king_array = ["images/King.png","images/King.png"];
var queen_array = ["images/Queen.png","images/Queen.png"];
$(function() {
  $("#cheat").click(function() {
    if (king_array.length == 1){
      src = king_array.shift();
      back_of_card_array = $('img:not([src="images/King.png"])');
      random = Math.floor(Math.random() * back_of_card_array.length);
      back_of_card_array[random].attr('src',src);
      console.log("turned king");
    } else if (queen_array.length == 1){
      src = queen_array.shift();
      back_of_card_array = $('img:not([src="images/Queen.png"])');
      random = Math.floor(Math.random() * back_of_card_array.length);
      back_of_card_array[random].attr('src',src);
      console.log("turned queen")
    } else {
      console.log("turn a card to cheat!")
    }
  });
});

我期望这样做是返回一组未翻转的卡片back_of_card_array = $('img:not([src="images/King.png"])');，它确实如此，然后当我单击cheat 按钮时，使用back_of_card_array[random].attr('src',src); 选择一个随机图像并设置它到 src，它是国王还是王后，取决于已经翻转的内容（我想如果国王和王后都被翻转，它将变成国王……另一个我不打算在这里讨论的问题）。

因此，如何根据已经翻转的内容来翻转未翻转的卡片？

谢谢！ http://codepen.io/anon/pen/udBan

【问题讨论】：

标签： javascript jquery html image random

【解决方案1】：

我不确定我是否听懂了你的问题，但我会尝试一下。

所以我不清楚你的游戏规则，但听起来你想翻转国王或王后，这样如果国王已经面朝上，你就显示王后，反之亦然。对吗？

如果是这样，我会维护一个翻转卡片的对象（如果顺序很重要，请通过将其设为一个数组并在你去的时候将每个推入来保持它）。然后你可以强行通过数组（即，如果卡片不符合你的标准，则重新随机化）或者有两副牌（一个全是国王，一个全是皇后）并使用牌组选择来强制正确“种类”的卡片。

【讨论】：

实际上恰恰相反：如果已经有一个国王被翻转，那么我想按“作弊”来翻转一个国王。
我目前有两个数组，里面有国王和王后，可以进行翻转。我会做一个codepen...