I am currently working on a fun avatar generator project. The challenge I'm facing is that each hairstyle consists of two parts (front and back), and when loaded randomly, the colors don't always match. To tackle this issue, I have organized the assets in a JSON file where they are grouped by colors. For instance, every ginger front hair, back hair, and eyebrows will always load together.
The tricky part now is figuring out how to implement these values in the random loading process, which has proved to be quite challenging for me as someone new to using JSON.
If anyone has any advice or leads on how to solve this problem, it would be greatly appreciated :-)
Below is a snippet of my JS script:
document.addEventListener("DOMContentLoaded", function() {
// Code block
});
And here is an excerpt from my JSON file showing examples of hairstyles with corresponding colors:
{
"img": "/img/backhair/man/backhair1.png",
"color": "blond"
},
{
"img": "/img/backhair/man/backhair2.png",
"color": "ginger"
},
{
"img": "/img/backhair/man/backhair3.png",
"color": "auburn"
},
{
"img": "/img/backhair/man/backhair4.png",
"color": "chestnut"
},
{
"img": "/img/backhair/man/backhair5.png",
"color": "black"
},