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

标签 javascript jquery html css

我有这个简单的配色游戏。但我决定我希望它匹配背景图像而不是背景颜色,我无法更改它以匹配图像。例如,我不希望将红色与表示红色的文字匹配,而是将其与运动队的图像或带有该队名称的其他内容相匹配。

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);
    }
  }
});
#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>

最佳答案

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

我只是将颜色数组替换为对象数组,每个对象都有一个键和一个 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>

关于javascript - 将此颜色匹配游戏更改为 js 和 jquery 中的图像匹配,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44728978/

相关文章:

javascript - jQuery - onclick 事件在第二次单击后不会更改类

html - 如何在父级内水平对齐 iFrame div?

jquery - 我的 html 页面未显示我的 json 数据

html - 最大化页面时我页面上的布局发生变化,这是如何停止的?

javascript - Jint 和 JavaScript 之间的通信

javascript - 检测新打开的窗口是否完全加载了附加的内容

javascript - 我想使用 jquery 将输入值存储在数组中

javascript - 使用后台页面的跨域XMLHttpRequest

javascript - element.querySelector() 与 document.querySelector() 有区别吗?

javascript - 在新窗口中分离/打开 iframe