Change this color match game to image match in js and jquery

Question

I have this simple color matching game. But I decided that i'd like it to match background-images instead of background-colors, I am having trouble changing it to match images. For example, instead of matching red with the text that says red, I would like it match a image of a sports team or something with that teams name.

 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> 

Answer 1

here you have a full working example

i just replaced the colors array to an array of objects, each object has a key and an url and adjusted the rest of the code so it uses the properties instead of the plain value

 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>