Estoy creando un juego de casino y me encontré con un problema. tengo este codigo:
let images = [ document.getElementById("img1"), document.getElementById("img5"), document.getElementById("img9"), document.getElementById("img11"), document.getElementById("img13")]
let sources = ["cherry.png", "lemon.png", "watermelon.png", "grape.png", "diamond.png", "luckycharm.png"]Entonces, lo que quiero hacer aquí es verificar si al menos 3 imágenes tienen la misma fuente. ¿Cómo puedo hacerlo?
Puede obtener el atributo "src" de una imagen usando el método .getAttribute("src"), luego puede compararlos en JavaScript como cadenas. En su caso, se vería así: images[0].getAttribute("src") === images[1].getAttribute("src")
Que podría ser: "cherry.png" === "lemon.png" y esto devolvería falso.
Si tampoco estaba claro, definitivamente debería usar un método for loop o array para revisar todos sus elementos en images .
Esto podría lograrse fácilmente con solo un bucle for y el método .filter:
function threeMatch() { sources.forEach(source => { if(images.filter( image => image.getAttribute("src") === source ).length === 3) return true; }); return false; }Creo que crear un objeto con claves (nombres de imágenes) y valores (matriz de elementos dom que tienen la imagen) es un buen enfoque para esta aplicación. Es posible que desee saber qué imagen aparece y dónde.
let sources = ["cherry.png", "lemon.png", "watermelon.png", "grape.png", "diamond.png", "luckycharm.png"] const images = ["cherry.png","cherry.png","watermelon.png","cherry.png","diamond.png"]; const makeChunks = () => { const chunks = {}; images.forEach( (img, i) => img in chunks ? chunks[img].push(i) : chunks[img] = [i] ); return chunks; } console.log(makeChunks()) const findTrio = () => { return Object.fromEntries( Object.entries(makeChunks()).filter((x) => x[1].length > 2) ) } console.log(findTrio())