0726 | 움직임에 대한 충돌 조건식 / 삼각형 그리기

✅ ball 충돌 조건 만들기

1. 볼을 선택해서 curBall을 업데이트하기

canvas.onclick = function (e) {
    for (var ball of balls) { // 배열에 담은 볼 객체를 for문으로 돌린다
        if (ball.isLocated(e.x, e.y)) { //만약 e.x,e.y의 위치에 해당하는 볼이라면
            curBall.setActive(false); //이전의 curBall을 inactive처리
            curBall = ball; //curBall업데이트
            console.log("선택") 
            curBall.setActive(); //curBall을 선택상태로 활성화
            return; // 아래 moveTo와 연속으로 실행되지 않도록 if조건 실행 후 return처리
        }
    }
    curBall.moveTo(e.x, e.y);
    console.log("외부선택")
}

 

 

 

2. 공 충돌 : curBall을 기준으로 선택 볼이 다른 볼과 충돌이 났는지 체크 (for문으로 공마다 순회)

충돌조건

Math.sqrt()로 루트사용

Math.sqrt() - JavaScript | MDN

 

window.setInterval(function () {
    for (var ball of balls) {
        // 1) 만약 ball이 curBall하고 같다면 바로 다음턴으로 이동. 기준 볼 잡아주기
        if (ball === curBall) { // 값비교가 아닌 객체비교하기
            continue;
        }

        // 2) 나머지 공들이라면 충돌 확인. 만약에 d== r1+r2라면 충돌
        //삼각형의 대각선 구하는 공식 적용
        var w = curBall.x - ball.x;
        var h = curBall.y - ball.y;
        var d = Math.sqrt(w * w + h * h);
        var rSum = curBall.radius + ball.radius;

        if (d <= rSum) {
            console.log("충돌");
            var idxBall = balls.indexOf(ball); // 인덱스를 찾아내서
            balls.splice(idxBall, 1); // 해당 볼을 죽이기
        }
    }

 

---

 

✅ 버튼만들기

1. 삼각형 그리기

1.1 기존 방법

* path로 설정시 주의사항 ① "따옴표" 안에 설정값 넣기 ② 대소문자 구분하기 (대문자가 좌표, 소문자가 거리)

var shape = new Path2D("M 800 100 L 850 100 L 825 60 z");
ctx.stroke(shape);
ctx.fillStyle = this.color;
ctx.fill(shape);

 

1.2 변수화를 위해 좌표를 구하는 식 만들기

by BeastIT

var bx = 800;
var by = 100;
var br = 30;

var hw = Math.sqrt((br * br) - ((br / 2) * (br / 2))); // 이때 작은값에서 큰 값을 빼면 루트 안에 마이너스가 나옴 > 허수 > NaN으로 콘솔출력됨
var pos1 = { x: bx, y: by + br };
var pos2 = { x: bx - hw, y: by - br / 2 }
var pos3 = { x: bx + hw, y: by - br / 2 }

// console.log(hw) 값이 잘 뽑혔는지 콘솔에 찍어봄
// console.log(pos1.x)
// console.log(pos1.y)
// console.log(pos2.x)
// console.log(pos2.y)
// console.log(pos3.x)
// console.log(pos3.y)

// var btnshape = new Path2D();
ctx.lineTo(pos1.x, pos1.y);
ctx.lineTo(pos2.x, pos2.y);
ctx.lineTo(pos3.x, pos3.y);
ctx.lineTo(pos1.x, pos1.y);
ctx.stroke();
ctx.fillStyle = "orange";
ctx.fill();