HTML5 캔버스와 바닐라 자바 스크립트를 사용하여 Simon 게임을 만들려고합니다. arc () 메서드의 좌표계에 대해 혼란 스럽습니다. 원을 4 사분면으로 나누었으며 클릭 한 사분면의 수를 알리고 싶습니다. 그러나 원의 어느 부분을 클릭했는지 알아내는 방법을 모르겠습니다. https://jsfiddle.net/xawpLdys/1/
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var x = canvas.width / 2;
var y = canvas.height / 2;
var pads = [];
var angle = 2 * Math.PI / 4;
var color = ["green","red","blue","yellow"];
var Pads = function(x, y, radius, start, end) {
this.x = x;
this.y = y;
this.radius = radius;
this.start = start;
this.end = end;
};
function drawSimon(radius) {
for (var i = 0; i < 4; i++) {
context.beginPath();
context.moveTo(x, y);
context.arc(x, y, radius, i*angle, (i+1)*angle, false);
context.lineWidth = radius;
context.fillStyle = color[i];
context.fill();
context.lineWidth = 2;
context.strokeStyle = '#444';
context.stroke();
var pad = new Pads(x, y, radius, i*angle, (i+1)*angle);
pads.push(pad);
}
}
drawSimon(150);
$('#myCanvas').click(function (e) {
/*for (var i = 0; i < pads.length; i++) {
if (//condition matches) {
alert (i);
}
}*/
});
이 시도
이 예제는 클릭 된 변환 e.pageX및 e.pageY수직 사분면 시스템. 그리고 어떤 조건 후에 어떤 부분이 클릭되었는지 확인할 수 있습니다.
$('#myCanvas').click(function (e) {
var nx,ny;
nx=-(x- e.pageX);
ny=y- e.pageY;
if (nx>0 && ny>0){
alert('Yellow');
}else if (nx<0 && ny>0){
alert('Blue');
}else if (nx>0 && ny<0){
alert('Green');
}else if (nx<0 && ny<0){
alert('Red');
}
});
다음은 바이올린입니다 https://jsfiddle.net/xawpLdys/3/
최신 정보
John S옳았습니다 (원 밖에있는 클릭 수를 계산합니다). 원 외부의 클릭이 고려되지 않도록하려면 원의 중심과 클릭 된 점으로부터의 거리를 찾아야합니다. 그런 다음 거리를 원의 반경과 비교하여 반경 내부에 있는지 확인합니다.
업데이트 된 코드 :
$('#myCanvas').click(function (e) {
var nx,ny;
nx=-(x- e.pageX);
ny=y- e.pageY;
var dx = Math.abs(Math.abs(x)-Math.abs(e.pageX));
var dy = Math.abs(Math.abs(y)-Math.abs(e.pageY));
var distance_clicked = Math.sqrt((dx*dx)+(dy*dy));
if(distance_clicked <= radius){
if (nx>0 && ny>0){
alert('Yellow');
}else if (nx<0 && ny>0){
alert('Blue');
}else if (nx>0 && ny<0){
alert('Green');
}else if (nx<0 && ny<0){
alert('Red');
}
}
});
다음은 업데이트 된 바이올린입니다 https://jsfiddle.net/xawpLdys/8/
원을 4 조각 이상으로 나누는 데는 여전히 한계가 있습니다.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다