Tengo un juego en el que a los concursantes se les presentan dos imágenes al azar. Las imágenes pueden ser rojas o azules y el objetivo es seleccionar cualquier imagen roja y enviar su voto. Cuando se emita su voto, se les debe otorgar un punto por las imágenes rojas que seleccionaron y un punto por las imágenes azules que no seleccionaron.
Cada imagen tiene un atributo para el nombre de archivo y el color, así:
<div id="box1" class="selectItem" data-filename="image1.png" data-color="red">
Cuando un concursante selecciona una o más imágenes, el nombre del archivo y el color se colocan en una matriz que se mantiene oculta y que puede verse así:
[image1.png, red] pero también podría verse así: [image1.png, red, image2.png, blue] o también podría estar vacío.
Tengo un objeto que contiene información sobre las imágenes que se muestran actualmente. Está construido así:
const image1 = $('box1').attr('data-filename'); const color1 = $('box1').attr('data-color'); const image2 = $('box2').attr('data-filename'); const color2 = $('box2').attr('data-color'); const obj = {}; obj[image1] = color1; obj[image2] = color2;Entonces, el objeto podría verse así:
{ ['image1.png']: 'red', ['image2.png']: 'blue' }Todos los puntos otorgados se suman a una puntuación guardada en sessionStorage.
¿Cuál es la forma más elegante de comparar la selección del usuario (matriz) con las imágenes mostradas (objeto) para:
Acabo de terminar haciendo esto:
for (let [key, value] of Object.entries(obj)) { if (key === array[0]) { if (value === 'red') { // update my score } } else if (key !== array[0]) { if (value === 'blue') { // update my score } } }