canvas.addEventListener("click", function(e){ console.log({클릭x: e.layerX, y: e.layerY}); // 클릭한 현재 좌표
// 클릭한 좌표의 이미지 선택하기
for(var t=0; t<arrCount; t++){
var tmp = arr[t];
if(e.layerX >= tmp.x_point
&& e.layerX <= tmp.x_point+tmp.x_size
&& e.layerY >= tmp.y_point
&& e.layerY <= tmp.y_point+tmp.y_size){
var choice = t;// 캔버스 내 이미지 선택
var tt = arr[choice];
break;
}
else
choice = -1;
}
// console.log({choice: choice});
if(choice != -1){
$(document).keydown(function(event){
switch(event.keyCode){
case 37: // 좌로 이동
tt.x_point -= 5;
break;
case 39: // 우로 이동
tt.x_point +=5;
break;
case 38: // 위로 이동
tt.y_point -= 5;
break;
case 40: // 아래로 이동
tt.y_point +=5;
break;
case 46: // delete 키 입력-삭제
tt.x_point=0; tt.x_size=0; tt.y_point=0; tt.y_size = 0;
break;
default:
break;
}
context.clearRect(0,0,480,160);
// 이미지 그리기
for(var j=0; j<arrCount; j++){
if(arr[j].x_size != 0 && arr[j].y_size != 0){
context.drawImage(ImageArr[j], arr[j].x_point, arr[j].y_point ,arr[j].x_size, arr[j].y_size);}
}
// 텍스트 그리기
for(var k=0; k<textCount;k++){
context.font = TextArr[k].textchar;
context.fillStyle = TextArr[k].textcol;
context.fillText(TextArr[k].textval,TextArr[k].x_point, TextArr[k].y_point);
}
});
}
});
캔버스 위에서 그림 두 개가 있는 경우, 한 그림을 클릭하고 키보드 방향키를 입력하면 그림이 이동하는 것을 코딩하였습니다. 하지만 실제로 동작해보면 그림 두 개가 함께 움직인다는 것을 알 수 있었습니다.
for문 안에서 찾았던 choice 값이 1로 결정되었다면 switch 문안에서는 0도 되고 1도 되는 것을 알 수 있었습니다. 무엇이 문제일까요??ㅜㅜㅜ 제발 도와주세요