将此颜色匹配游戏更改为js和jquery中的图像匹配

Question

我有这个简单的配色游戏。但我决定我喜欢它来匹配背景图像而不是背景颜色，我无法更改它以匹配图像。例如，我不希望将红色与红色文本匹配，而是希望它与运动队的图像或该球队名称相匹配。

＆＃13;

＆＃13;

function randomize(array) {
  return array.sort(function() {
    return 0.5 - Math.random();
  });
};
var i = 0,
  colors = randomize(["Red", "Blue", "Green", ]);
for (; i < colors.length; i++) {
  $("<div>", {
      id: colors[i]
    })
    .css("background", colors[i])
    .appendTo("#colors")
    .draggable({
      revert: "invalid",
      zIndex: 2
    });
}
randomize(colors);
for (i = 0; i < colors.length; i++) {
  $("<div>", {
      text: colors[i]
    })
    .appendTo("#boxes");
}
$("#boxes > div").droppable({
  accept: function(draggable) {
    return $(this).text() == draggable.attr("id");
  },
  drop: function(event, ui) {
    var color = ui.draggable.css("background-color");
    $(this).css("background", color).addClass("filled");
    ui.draggable.hide("puff");

    if ($(".filled").length === colors.length) {
      alert("Good Job!");
      setTimeout(function() {
        window.location = window.location;
      }, 3000);
    }
  }
});

＆＃13;

#colors {
  position: absolute;
  margin-left: 400px;
}

.ui-draggable {
  width: 100px;
  height: 100px;
  margin: 20px;
  cursor: pointer;
  border: 1px solid black;
  box-sizing: border-box;
}

#boxes {
  position: absolute;
  left: 200px;
}

#boxes>div {
  border: 1px solid black;
  height: 100px;
  width: 100px;
  margin: 20px;
  text-align: center;
  padding-top: 40px;
  box-sizing: border-box;
  line-height: 10px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<h2>Color Match Game</h2>
<div id="colors"></div>
<div id="boxes"></div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

这里有一个完整的工作示例

我只是将colors数组替换为一个对象数组，每个对象都有一个键和一个url，并调整其余的代码，使其使用属性而不是普通值

function randomize(array) {
  return array.sort(function() {
    return 0.5 - Math.random();
  });
};
var i = 0,
  colors = randomize([{
    url: 'http://rs556.pbsrc.com/albums/ss3/t_wangrung/Fruit/09.jpg~c200',
    key: 'green'
  }, {
    url: 'https://static1.squarespace.com/static/58f993b51e5b6cd8b70dba67/t/59161cb886e6c0d270d975da/1494621371074/',
    key: 'blue'
  }, {
    url: 'http://www.dhresource.com/200x200s/f2-albu-g5-M01-0E-49-rBVaI1kw5WmAdqUmAAIKTn2gGls240.jpg/10pcs-bag-hot-sale-dark-red-cherry-seeds.jpg',
    key: 'red'
  }]);
for (; i < colors.length; i++) {
  $("<div>", {
      id: colors[i].key
    })
    .css("background-image", "url(" + colors[i].url + ")")
    .appendTo("#colors")
    .draggable({
      revert: "invalid",
      zIndex: 2
    });
}
randomize(colors);
for (i = 0; i < colors.length; i++) {
  $("<div>", {
      text: colors[i].key
    })
    .appendTo("#boxes");
}
$("#boxes > div").droppable({
  accept: function(draggable) {
    return $(this).text() == draggable.attr("id");
  },
  drop: function(event, ui) {
    var color = ui.draggable.css("background-image");
    $(this).css("background-image", color).addClass("filled");
    ui.draggable.hide("puff");

    if ($(".filled").length === colors.length) {
      alert("Good Job!");
      setTimeout(function() {
        window.location = window.location;
      }, 3000);
    }
  }
});

#colors {
  position: absolute;
  margin-left: 400px;
}

.ui-draggable {
  width: 100px;
  height: 100px;
  margin: 20px;
  cursor: pointer;
  border: 1px solid black;
  box-sizing: border-box;
}

#boxes {
  position: absolute;
  left: 200px;
}

#boxes>div {
  border: 1px solid black;
  height: 100px;
  width: 100px;
  margin: 20px;
  text-align: center;
  padding-top: 40px;
  box-sizing: border-box;
  line-height: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<h2>Color Match Game</h2>
<div id="colors"></div>
<div id="boxes"></div>