개발 기록

자바스크립트[벽에 반사되는 공 생성] 본문

공부

자바스크립트[벽에 반사되는 공 생성]

청군로 2021. 3. 23. 18:31

무작위 방향으로 날라가서 벽을 만나면 방향전환이 되는 공을 만드는 클래스를 만든 후 활용하기!

 

공튀기기.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./Ball.js"></script>
<script src="./lib.js"></script>
<script>
    var wrapper;
    var colorAr = ["red", "orange", "yellow", "green", "blue", "navy", "purple"];
    var xAr = [40, 715];
    var yAr = [40, 615];
    var ballAr = [];
function init(){
    createWall();

}

//공을 가두어 놓을 벽
function createWall(){
    wrapper = document.createElement("div");
    wrapper.style.width = 800+"px";
    wrapper.style.height = 700+"px";
    wrapper.style.border = 10+"px red solid";
    wrapper.style.position = "relative"; //자식인 공 때문에
    wrapper.style.boxSizing = "border-box";
     
    document.body.appendChild(wrapper);
    document.body.style.margin = 0+"px";
}

function createBall(){
    var ball = new Ball(wrapper, (getRandom(3)+1), colorAr[getRandom(colorAr.length)], xAr[getRandom(xAr.length)], yAr[getRandom(yAr.length)]);//생성되는 공은 wrapper에 부착 됨
    ballAr.push(ball);
}

//키보드의 스페이바를 누르면, 볼을 생성
function space(){
    if(event.keyCode == 32){
        createBall();
    }
}

function autoMove(){
    for(var i = 0; i < ballAr.length; i++){
        ballAr[i].ballMove();
    }
}

window.addEventListener("load", function(){
    init();
    setInterval("autoMove()", 3);
});
</script>
</head>
<body onkeydown="space()">
</body>
</html>

 

Ball.js

class Ball{
    //new 연산자에 의해 호출되는 메서드를 생성자 메서드라고 하고,
    //생성자 메서드의 목적인 이 객체가 인스턴스화 될 때,
    //즉 사물이 탄생할 때 알맞는 개성을 부여하기 위함.
    
    //사물의 모습, 상태 등 형용사 적인 것. 사실 상 변수 값
    //담을 곳, 볼의 보폭, 볼의 색, 시작 x값, 시작 y 값
    constructor(container, b_speed, b_color, x, y){
        this.container = container;//어디에 붙일지를 결정짓지 말고, 호출자가 결정하도록;
        this.speed = b_speed;
        this.color = b_color;
        this.width = 35;
        this.height = 35;
        this.y = y;
        this.x = x;
        (this.y>400)? this.flagY = -1 : this.flagY = 1;
        (this.x>400)? this.flagX = -1 : this.flagX = 1;

        console.log(this.flagX);
        console.log(this.flagY);
        console.log(this.x);
        console.log(this.y);


        this.div = document.createElement("div");
        this.div.style.width = this.width+"px";
        this.div.style.height = this.height+"px";
        this.div.style.color = this.color;
        this.div.innerText = "●";
        this.div.style.fontSize = 35+"px";
        this.div.style.position = "absolute";
        this.div.style.left = this.x+"px";
        this.div.style.top = this.y+"px";
        

        //div부모 요소에 부착
        this.container.appendChild(this.div);
    }

    //볼의 움직임 설정
    ballMove(){
        //바닥 접촉
        if(this.y>=635){
            this.flagY*=-1;
        //천장 접촉
        }else if(this.y<=0){
            this.flagY*=-1;
        //좌측 접촉
        }else if(this.x<=0){
            this.flagX*=-1;
        //우측 접촉
        }else if(this.x>=745){
            this.flagX*=-1;
        }

        this.y += (this.speed*this.flagY);
        this.x += (this.speed*this.flagX);
        this.div.style.left = parseInt(this.x)+"px";
        this.div.style.top = parseInt(this.y)+"px";
    }
}

 

 

 

'공부' 카테고리의 다른 글

자바스크립트[node.js를 이용한 서버]  (0) 2021.04.09
node.js 설치하기  (0) 2021.03.31
자바스크립트[class]  (0) 2021.03.23
자바스크립트[배열과 배열의 길이]  (0) 2021.03.15
자바스크립트[함수의 매개변수, 리턴]  (0) 2021.03.11
'공부' Related Articles more
Comments