He escrito un juego simple de conectar cuatro estilos usando HTML, CSS y javascript. El juego es completamente funcional en Chrome, pero tengo un comportamiento extraño cuando uso mi navegador Firefox.
En Firefox, los colores del tablero de juego cambian con éxito cuando un jugador deja caer una pieza, sin embargo, cuando hago la operación de comparación al verificar si un jugador ha ganado, Firefox no detecta el color en absoluto.
Mi intento de solucionar el problema fue declarar un valor rgb específico, en lugar de simplemente decir 'púrpura', hice algo como a continuación, con resultados similares.
Aquí están solo las piezas relevantes de mi código javascript:
const _purple = "rgb(124, 0, 132)"; columns[id][5 - pcs[id]].style.background = _purple; // assignment works always columns[id][5 - pcs[id]].style.background = 'green'; // assignment like this ok too if (columns[_col][_row].style.background == _purple) // only works in Chrome if (columns[_col][_row].style.background == 'green') // only works in Chrome También traté de usar === como me sugirió un amigo.
***** ACTUALIZAR ***** Revisé la consola para ver qué estaba devolviendo Firefox como se sugirió en el primer comentario, y parece que Firefox está devolviendo los valores correctos.
rgb(124, 0, 132) none repeat scroll 0% 0% green none repeat scroll 0% 0%Pero la operación de comparación nunca devuelve verdadero. Intenté usar esta cadena completa, pero tampoco funcionó.
Como era de esperar, en Chrome, si solo uso "rgb(124, 0, 132)" en lugar de _purple , también devuelve verdadero.
Si es de alguna ayuda para resolver este problema, los elementos CSS que estoy usando en el tablero de juego son:
.box { background: white; border: 2px solid black; }Más lejos:
Visual Studio me informó que "el color de la propiedad no existe en el tipo de cadena". Una llamada a console.log(first.style.background.color); devuelve undefined en mi consola de Firefox, mientras que una llamada a console.log(second.style.background); devuelve el valor rgb correcto. Al comparar el valor .color indefinido, devuelve true , pero devuelve false al comparar la propiedad .background, que de hecho es el valor rgb
Gracias por cualquier ayuda con este problema, el juego y los intentos de corregir este error se pueden ver aquí https://github.com/paolo-Rancati/four_in_a_sequence/tree/main/snippet
Puede resolver esto usando computedStyle , aparentemente el valor rgb que tiene "rgb(124, 0, 132)" no corresponde al que usa FireFox para purple .
const _purple = "rgb(128, 0, 128)"; let first = document.getElementById("first"); let second = document.getElementById("second"); const spaces = document.querySelectorAll('.box'); first.style.background = "purple"; second.style.background = _purple; console.log(window.getComputedStyle(first).backgroundColor); console.log(window.getComputedStyle(second).backgroundColor); console.log(window.getComputedStyle(first).backgroundColor === window.getComputedStyle(second).backgroundColor); div { width: 100%; height: 50px; border: 1px solid black; } .box { background: white; border: 2px solid black; } <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"></html> <head> <link rel="stylesheet" href="static/website.css"> <meta charset="utf-8" /> <title>Game Page</title> </head> <div id="first"></div> <div id="second"></div> </html>Pero, ¿por qué estás probando el color de una celda? ¡En su lugar, debe tener una matriz que almacene el estado del tablero y probar los valores en la matriz! Sé que esto no responde a tu pregunta, pero tienes un problema XY .