Javascript isPointInPath 조건

Question

캔버스에 색상이 다른 모양이 있는데, 모양을 클릭 한 플레이어가 다른 모양의 색상과 일치하는지 확인하고 싶다면 점수를 높이려면 true로 설정하고 확인하십시오. & 내가 그것을 제거하면 & 하나 == FLR 부분은, 그것은을 heres 모양

확인하기위한

function interval() 
{ 
mycanvas = document.getElementById("mycanvas"); 
    var clr=["red", "blue", "green", "yellow"]; 
    var one=[Math.floor((Math.random() * 4) + 0)]; 
    var two=[Math.floor((Math.random() * 4) + 0)]; 
    var thr=[Math.floor((Math.random() * 4) + 0)]; 
    var flr=[Math.floor((Math.random() * 4) + 0)]; 
    var t=1000; 
    var score=0; 

ctx.fillStyle=clr[one]; 
    ctx.fillRect(300,250,150,250); 
    ctx.fillStyle=clr[two]; 
    ctx.fillRect(700,250,150,250); 
    ctx.fillStyle=clr[thr]; 
    ctx.fillRect(1100,250,150,250); 

    ctx.beginPath(); 
    ctx.moveTo(300,500); 
    ctx.lineTo(1250,500); 
    ctx.lineTo(1450,720); 
    ctx.lineTo(100,720); 
    ctx.closePath(); 
    ctx.fillStyle=clr[flr]; 
    ctx.fill(); 
    ctx.strokeStyle="black"; 
    ctx.stroke(); 

코드를 색상을 무작위 및 추가하는 코드는 마우스 당신은 012,392,976을 사용하는

mycanvas.onclick= function(e) 
    { 

     var pos=this.getBoundingClientRect(), x=e.clientX - pos.left, 
     y = e.clientY - pos.top; 
     getRect(300,250,150,250); 
     if (ctx.isPointInPath(x,y) && one == flr) 
     { 
      score+=10; 
     } 
     else 
     delay=delay-100; 
    }; 

    if(delay<=0) 
    { 
     clearInterval(intervalID); 
    } 
    function getRect(x,y,w,h) 
    { 
     ctx.beginPath(); 
     ctx.rect(x,y,w,h); 
     ctx.closePath(); 
    } 
} 

Answer 1

을 클릭 를 작동을 사용하여 one 및 flr을 생성합니다. Math.random()은 두 경우 모두에서 임의의 숫자를 생성하며이 두 숫자는 항상 동일하지 않습니다.

var one=[Math.floor((Math.random() * 4) + 0)]; 
 
var flr=[Math.floor((Math.random() * 4) + 0)]; 
 
console.log(one); 
 
console.log(flr);

또 다른 것은 당신의 배열로이 두 가지를하고 있습니다 그리고 당신은 ==를 사용하여 배열을 비교할 수 없습니다. 이 두 가지가 동등 할지라도 당신의 상태는 여전히 거짓 일 것입니다.

var one=[1]; 
 
var flr=[1]; 
 
console.log(one==flr);

당신은 인덱스를 사용하여 다음 비교하거나이) (또한 기능 간격 전에