공 튀기기 🏀🏐

1) 공의 움직임을 canvas에 나타내기

📍 중심점, 반지름

공을 그릴때는 항상 중심점을 기준으로 공에 x , y 값을 잡는다.
=> 중심점이 공의 실제 위치 (회색 점)

반지름이 굉장히 중요!
반지름을 x, y 값에다가 + , - 해줘야 실제로 공이 브라우저에 닿았는지 알 수 있음.

그래서 공에 x , y값을 비교하는 것이 아니라, 반지름을 더한 값 or 뺀 값을 정의해서
공이 실제로 어디에 닿았는지를 판단하게 됨.

📍 vx, vy

브라우저 상에서 공에 움직임을 주게 되면 x, y에 vx와 vy라는 임의의 값을 더해주게 된다.

=> x값과 y값이 계속 증가하거나 감소할테니까 움직임을 가지면서 그릴수 있게 된다.
( 그림처럼 공이 vx와 vy를 따라서 움직이게 됨. )

📍 브라우저의 (0,0) => x가 0에 닿았는지 판단.

만약에 닿았다고 한다면!
vx(=x)이 닿았으니까 vx에 -1을 곱해준다.

현재 y값은 증가하고 x값은 감소하는 움직임을 가지고 있다.
=> x값에 -1을 곱해주면 x값이 다시 증가하게 되니까,
x가 왼쪽으로 움직이던 것이 오른쪽으로 움직이게 되고, y는 위로 가고 ...
이런식으로 공이 그려지게 된다!
그래서 튕겨지는 모습 보여주게 됨!! ~~⚽ ⚾ ⚽ ⚾

y가 위에 닿았다면 증가하던 y값을 반대로 감소하게 만들어 줌.
그러면 아래 방향으로 움직이는 모습을 볼 수 있다.

팅팅팅~ 하는 움직임 let's go 🚀🚀

---

2) 코드 적용

index.html, style.css, app.js, ball.js
4개의 파일 생성해서 아래와 같은 코드를 작성한다.

• index.html
  : css 파일과 script 불러오는 용도로 생성해두기.

• style.css

*{
    user-select: none;
    -ms-user-select:none;
    outline:0;
    margin: 0;
    padding: 0;
    -webkit-tab-highlight-color:rgba(0,0,0,0);
}
html{
    width: 100%;
    height: 100%;

}
body{
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #6465A6;


}
canvas{
    width: 100%;
    height: 100%;
}

• app.js

// ball.js import
import{
    Ball
} from './ball.js';

class App{
    constructor(){
        this.canvas = document.createElement('canvas');     // 캔버스 생성
        this.ctx = this.canvas.getContext('2d');            // context 가져오기

        document.body.appendChild(this.canvas);
        window.addEventListener('resize', this.resize.bind(this), false) // 리사이즈 이벤트 걸기 -> 현재 내가 만들고자 하는 애니메이션 크기를 아는 것이 굉장히 중요.
        this.resize();

        // 화면에 움직이는 거 확인해보기
        this.ball = new Ball(this.stageWidth, this.stageHeight, 60, 15); // 반지름 60, 속도 15로 임의테스트 해보기

        window.requestAnimationFrame(this.animate.bind(this)); // requestAnimationFrame 걸어준 다음 -> line28 (애니메이션 구동 함수 생성)
    }
    // 리사이즈 이벤트를 걸어주고 스크린 사이즈를 가져와서 애니메이션을 정의.

        resize(){
            this.stageWidth = document.body.clientWidth;
            this.stageHeight = document.body.clientHeight;

            // 스크린 사이즈를 미리 정해 놓고 하는 경우가 많은데 사실 브라우저는 가변적인것.
            // 그래서 스크린사이즈 가져오는 함수를 먼저 정의 해주고 작업을 하는게 나중을 위해서라도 편하다고 함.

            this.canvas.width = this.stageWidth * 2;
            this.canvas.height = this.stageHeight * 2;
            this.ctx.scale(2,2);
        }


        //애니메이션 실제로 구동시키는 함수 생성
        animate(t){ 
            window.requestAnimationFrame(this.animate.bind(this));

            this.ball.draw(this.ctx, this.stageWidth, this.stageHeight);
        } 
    }


window.onload = () =>{
    new App();
};

• ball.js

export class Ball{
    constructor(stageWidth,stageHeight, radius, speed ){
        // 스케이지 사이즈를 가져오고 반지름과 속도를 가지고 옴.
        this.radius =radius;

        // vx, vy는 x,y 좌표값을 움직이는 속도라고 정하기.
        this.vx = speed;
        this.vy = speed;

        // 스테이지에 랜덤으로 위치할 수 있게 함수를 정의해줌.
        const diameter = this.radius * 2;
        this.x = this.radius +(Math.random() * stageWidth - diameter);
        this.y = this.radius +(Math.random() * stageHeight - diameter);
    }

    // draw함수를 만들어서 context를 가지고 오고 스테이지 사이즈를 가져옴.
    // 그러면 canvas context에 그림을 그릴 수 있는 함수가 완성이 됨.
    draw(ctx, stageWidth,stageHeight){

         // x와 y 값에 vx와 vy값을 더해줘서 공이 움직이도록 만듦.
        this.x += this.vx;
        this.y += this.vy;

        this.bounceWindow(stageWidth,stageHeight);

        // 공에 색을 정하고 그림 그리기
        ctx.fillStyle = '#fdf500';
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.radius, 0, 2 * Math.PI);
        ctx.fill();


    }
    // bounceWindow라는 함수 생성 (스테이지 상에 닿았는지를 판단하는 함수)
    bounceWindow(stageWidth,stageHeight){

        // 스테이지 넓이와 높이를 가지고 와서 
        const minX = this.radius;
        const maxX = stageWidth - this.radius;
        const minY = this.radius;
        const maxY = stageHeight - this.radius;

        // 스테이지 상에 공이 닿았다면 반대로 튕기기
        // 공이 어디에 닿았는지 판단하고 vx와 vy에 -1을 곱해줘서 반대로 움직이게 하기
        if(this.x <=minX || this.x >=maxX){
            this.vx *= -1;
            this.x += this.vx;
        } else if(this.y <=minY || this.y >=maxY){
            this.vy *= -1;
            this.t += this.vy;
        }

    }
}

현재까지의 코드를 실행해보면 아래와 같이 공의 움직임이 선으로 이어지게된다. ↓↓↓

애니메이션은 계속 무언가를 생성하는 것이기 때문에 위와 같은 상황이 발생됨 !
그래서 생성하기 전에 이전 프레임을 지워줘야한다.

=> app.js의 animate 함수에 아래와 같이 clearRect() 실행해주는 코드를 작성하면 된다!

 this.ctx.clearRect(0, 0, this.stageWidth, this.stageHeight)

애니메이션 실행 모습 🤩
움직인다 ~~ !! ~~~
정확히 말하자면 움직이는 것은 아니고 이전 그림과 다음 그림을 번갈아 가면서 보여주는 것인데,
이전에 그렸던 것을 지워줌으로써 공이 움직이는 것처럼 보여지게 된다.

🧱🧱🧱🧱 이제 벽돌을 생성해보자 🧱🧱🧱🧱

• block.js
  : 스테이지 상에 벽돌 만들기 위해 추가로 block.js를 생성한다!

export class Block{
    constructor(width, height, x, y) {
        // 벽돌은 넓이, 높이, x, y 값을 가지고 있다
        this.width = width;
        this.height = height;
        this.x=x;
        this.y=y;

        // 공을 추적하기위해 maximum값도 정의해 준다.
        this.maxX=width + x;
        this.maxY=height + y;
        
    }
    draw(ctx){
        // draw함수에 실제로 그려지는 걸 만들어 준다.
        const xGap = 80;
        const yGap = 60;

        ctx.fillStyle = '#ff384e';
        ctx.beginPath();
        ctx.rect(this.x, this.y, this.width, this.height);
        ctx.fill();

        // 디자인을 위한 그림자 생성
        // 그림에서 모든건 다 좌표. 즉 얼마나 이동시킬 것인가를 좌표로 설정.
        // x,y 좌표 설정
        ctx.fillStyle = '#190f3a';
        ctx.beginPath();
        ctx.moveTo(this.maxX, this.maxY);
        ctx.lineTo(this.maxX-xGap, this.maxY+yGap);
        ctx.lineTo(this.x-xGap, this.maxY+yGap);
        ctx.lineTo(this.x, this.maxY);
        ctx.fill();

        // 옆부분 그림자
        ctx.fillStyle = '#9d0919';
        ctx.beginPath();
        ctx.moveTo(this.x, this.y);
        ctx.lineTo(this.x, this.maxY);
        ctx.lineTo(this.x-xGap, this.maxY+yGap);
        ctx.lineTo(this.x-xGap, this.maxY+yGap-this.height);
        ctx.fill();

    }

}

벽돌이 생성은 되었지만, 공이 벽돌로 인해 튕겨지는 애니메이션은 볼 수 없다.
(위의 이미지는 벽돌 생성 확인을 위한 이미지(png임! gif 노노)).

벽돌에 공이 닿았을 때 튕겨 나가게 하기 위해서는!

ball의 좌표와 block의 좌표를 비교해서 어느 값이 가장 근접한 지를 찾으면 위치를 알 수 있다.
=> 근접한 값을 판단하는 함수를 하나 만듦.

    // 벽돌에서 공이 튕긴 반사값 함수
    
    bounceBlock(block){
        const minX = block.x - this.radius;
        const maxX = block.maxX + this.radius;
        const minY = block.y - this.radius;
        const maxY = block.maxY + this.radius;

        // block에 닿았는지 판단, 닿았다면 vx와 vy에 -1을 곱해주는 방식으로 공이 튕김.
        // 공이 충돌할 때 양 옆에 충돌하는지 위아래 충돌하는지 판단하기 위해서는 ball의 좌표와 block의 좌표를 비교해서 어느 값이 가장 근접한 지를 찾으면 위치를 알 수 있음.
        // 그래서 근접한 값을 판단하는 함수를 하나 만듦.
        if(this.x > minX && this.x < maxX && this.y >minY && this.y<maxY) {
            const x1 = Math.abs(minX - this.x);
            const x2 = Math.abs(this.x - maxX);
            const y1 = Math.abs(minY - this.y);
            const y2 = Math.abs(this.y - maxY);
            const min1 = Math.min(x1, x2);
            const min2 = Math.min(y1, y2);
            const min = Math.min(min1, min2);

            // 값이 정의되면 이제 vx나  vy에 -1을 곱해준다.
            if(min == min1){
                this.vx *= -1;
                this.x +=this.vx;
            } else if(min == min2){
                this.vy *= -1;
                this.y +=this.vy;
            };

            
        }
    }

이로써 벽과 브라우저의 끝단에 튕겨지는 공 애니메이션을 완성~🎉

데모 ㅎㅎ---> bounce a ball

학습 : 유튜버 Interactive Developer