immortal727,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.GameField {
display: grid;
grid-gap: 15px;
grid-auto-flow: dense;
}
img{
height: 50px;
}
</style>
</head>
<body>
<div class="GameField"></div>
<script>
let Fields = {
cat: {
title: "Кот",
img:"https://cs13.pikabu.ru/avatars/2072/x2072904-1526997095.png"
},
book: {
title: "Книга",
img:"https://i.pinimg.com/280x280_RS/e8/96/dd/e896ddf3106f7568c3307cae154d9d47.jpg"
},
car: {
title: "Машина",
img: "https://cdn2.scratch.mit.edu/get_image/gallery/5282815_200x130.png",
}
}
function generateField(object, section, max) {
section.style.cssText = `
grid-template-columns:repeat(${max},1fr);
grid-template-rows:repeat(${max},1fr);`
;
let arrKeys = Object.keys(object), len = arrKeys.length,
length = max * max,
arrblocks = Array.from({length}, () => {
let i = randomInteger(len), key = arrKeys[i], item = object[key];
let block = document.createElement("div");
let title = document.createElement("h2");
title.textContent = item.title;
let pic = document.createElement("img");
pic.src = item.img;
block.append(title, pic);
return block
});
section.append(...arrblocks);
}
function randomInteger(max) {
return Math.floor(Math.random() * max);
}
let section = document.querySelector(".GameField");
generateField(Fields, section, 5);
</script>
</body>
</html>