자바가 컬러 게임에서 작동하지 않습니다.

Question

컬러 게임 앱을 만들었지 만 자바 스크립트가 제대로 작동하지 않아 항상 잘못된 것으로 알려줍니다. 이 코드를 수정하도록 도와주세요. 감사합니다

var colors = [ 
    "rgb(255,0,0)", 
    "rgb(255,255,0)", 
    "rgb(0,255,0)", 
    "rgb(0,255,255)", 
    "rgb(0,0,255)", 
    "rgb(255,0,255)" 
] 
var squares = document.querySelectorAll(".square"); 
var pickedColor = colors[3]; 
var colorDisplay = document.getElementById("colorDisplay"); 

colorDisplay.textContent = pickedColor; 

for (var i = 0; i < squares.length; i++){ 
    // add initial color to square 
    squares[i].style.background = colors[i]; 

    // add click listeners to squares 
    squares[i].addEventListener("click", function(){ 
     var clickedColor = this.style.background; 
     if(clickedColor == pickedColor){ 
      alert("CORRECT"); 
     } else { 
      alert("WRONG"); 
     } 
    }); 


} 

항상 "잘못된"경고를하고 올바른 것을 선택할 수 없습니다.

Answer 1

요소에 스타일을 적용하면 스타일이 정규화됩니다. RGB 색상은 쉼표 뒤에 공백을 추가하여 표준화됩니다. 배열에 공백을 추가해야합니다.

var colors = [ "rgb(255, 0, 0)", "rgb(255, 255, 0)", "rgb(0, 255, 0)", "rgb(0, 255, 255)", "rgb(0, 0, 255)", "rgb(255, 0, 255)" ]

P. 여기에 내 충고 - dev 도구를 사용하여 디버깅하는 방법을 배웁니다. 그렇지 않으면 더 복잡한 것을 개발하려는 어려움에 직면하게됩니다.

Answer 2

@timbset으로 요약하면 "rgb(0, 255, 255)" is not equal to "rgb(0,255,255)"입니다.

다음은 정규화 된 RGB 문자열 전체를 비교하는 대신 R, G 및 B 값을 직접 비교하는 기능을 사용하는 바이올린에서 발췌 한 것입니다.

if (compareColors(clickedColor, pickedColor)) { 
    alert("CORRECT"); 
} else { 
    alert("WRONG"); 
} 

... 

function compareColors (a, b) { 
    return (
    getRGBfromString(a)[0] === getRGBfromString(b)[0] && 
    getRGBfromString(a)[1] === getRGBfromString(b)[1] && 
    getRGBfromString(a)[2] === getRGBfromString(b)[2] 
    ) 
} 

function getRGBfromString (rgb) { 
    return rgb.substring(4, rgb.length - 1).replace(/ /g, '').split(',') 
} 

https://jsfiddle.net/mue1wfdm/