Пожалуйста помогите кто знает js и сможет реализовать правильно задумку

Тема закрыта by

WRUSH
Причина: Всем спасибо за помощь и подсказки

Всем доброго времени суток, ребят помогите пожалуйста кому не сложно сделать нормально оформление блоков снаряжения.

Ниже ссылка на домен нажмите на манекен верхний там поймёте о чём идёт речь какой JS что делает.
Вот не могу я настроить блоки снаряжения как в низу на скриншоте при этом что бы JS работал весь день мучаюсь с этим.

Заранее благодарю за помощь и внимание.

Ссылка: https://vhoro.ru

1.png 384.8 Kb ⬇ 48

1. HTML

html

   <div class="character"> 
   <img src="hero.png" class="hero"> 
   <div id="equipment"></div> 
 </div>

2. CSS

css

   .character { 
   position: relative; 
   width: 600px; 
   margin: auto; 
 } 
  
 .hero { 
   width: 100%; 
 } 
  
 .slot { 
   position: absolute; 
   width: 80px; 
   height: 80px; 
   border: 2px solid rgba(255,255,255,.5); 
   border-radius: 8px; 
   background-size: cover; 
   cursor: pointer; 
 }

3. JavaScript (JSON)

javascript

   const slots = [ 
   { id: "helmet", x: 260, y: 40, img: "helmet.png" }, 
   { id: "weapon", x: 420, y: 180, img: "sword.png" }, 
   { id: "shield", x: 100, y: 180, img: "shield.png" }, 
   { id: "boots",  x: 260, y: 360, img: "boots.png" } 
 ];

Генерация блоков (JavaScript)

javascript

   const equipment = document.getElementById("equipment"); 
  
 slots.forEach(slot => { 
   const div = document.createElement("div"); 
   div.className = "slot"; 
   div.style.left = slot.x + "px"; 
   div.style.top  = slot.y + "px"; 
   div.style.backgroundImage = `url(${slot.img})`; 
  
   div.dataset.slot = slot.id; 
  
   div.onclick = () => { 
     alert("Слот: " + slot.id); 
   }; 
  
   equipment.appendChild(div); 
 });

chatgpt.com

vlddslav , на нём и сделано больше всего, сам полный ноль в этой сфере ток учусь

Ramzesoff , спасибо большое по старому коду который был сделал теперь работает как и задумывал но не уверен что правильно написан код в выводе снаряжения и манекена ибо много style скорее всего в нём)

В общем сделал как сумел работает да и ладно)

WRUSH (29 янв 2026, в 21:00)

Ramzesoff , спасибо большое по старому коду который был сделал теперь работает как и задумывал но не уверен что правильно написан код в выводе снаряжения и манекена ибо много style скорее всего в нём)

Может быть

Ramzesoff , ну для первого раза не плохо, потом вашу подсказку попробую так же сделать спасибо кстати за подсказки)

Ну как получилось я залил код на ссылку: https://vhoro.ru

Сейчас сюда файл залью для примера как делать а то тут на форуме искал гайд не нашёл вдруг так же потом новичку пригодиться