상세 컨텐츠

본문 제목

볼튕기기로 배우는 인생

자바스크립트

by e7e 2023. 7. 6. 08:51

본문

GUI상에서 충돌구현은 초보자들에게 흥미와 재미, 기쁨을 주기도 하지만,

 v_mvX = -v_mvX;  표현식의 방향전환은 뇌의 사고방식에도 자극을 주어 컴퓨터적

프로그램 사고방식으로의 전환에도 아두 큰 도움이 된당.

 

웹에서  쪼메라도 멋지게 표현하려면, 항상 기럭지 긴 CSS가 따라다녀야 하는 부담이 있긴

하지만, 가성비로 따졌을 때 변수를 사용하는 방법에 느낌적인 느낌을 얻을 수 있고,

타이머를 사용하는 순간 로직훈련이 많이 되므로, 시간과 노력을 투자할 만하다 하겠당.

 

아래 소스를 실행해보고, 조금 가지고 놀아보는 시간을 가져보면 좋겠단 마음이당.

나의 경우 일부러 자동모드를 넣었는뎅, Ball을 여러개 넣어보는 것도 재밌당 하겠당.

나중엔 위쪽에 벽돌을 쌓는다면 벽돌깨기가 완성될 것이당. ㅋㅋㅋ

 

ballCollision.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>E7E MERONG</title>
    <style>
        #wrapper {
            margin:10px auto;
            text-align: center;
        }
        #merong {
            position: relative;
            margin: 0 auto;
            width:400px;
            height:500px;
            border:2px solid red;
            background-image: url("https://img.marieclairekorea.com/2020/02/mck_5e56e0d39411b.jpg");
            background-size: 100% 100%;
        }
        #ball {
            background-image: url("https://img.hankyung.com/photo/202001/03.21612581.1.jpg");
            background-size: 100px 100px;
            position:absolute;
            width:100px;
            height:100px;
            border: 1px solid yellow;
            border-radius: 50%;
            background-color: blue;
        }
        #bar {
            position: absolute;
            width:150px;
            height:30px;
            top:440px;
            background-color: brown;
            color: yellow;
            font-weight: bolder;
        }
        #marker {
            position: absolute;
            width:5px;
            height:5px;
            background-color: red;
        }
        span {
            font-size: 1.5em;
        }
        input[type=checkbox] {
            transform: scale(1.8);
        }
        h1 {
            background-color: black;
            color:yellow;
        }
    </style>
</head>
<body>
<div id="wrapper">
    <h1>좌우화살표사용하삼</h1>
    <div id="merong" tabindex=0 autofocus onkeydown="fKeyControl()">
        <div id="marker"></div>
        <div id="ball"></div>
        <div id="bar">&copy;E7E MERONG</div>
    </div>
    <input type=checkbox value="auto" onclick="fAuto(this)">&nbsp;<span>AUTO</span><br>
    <h1>화살표안먹으면,마우스로 볼 있는 공간 한번 찍고 하삼</h1>
</div>
<script>
    // 자동모드 설정
    let v_autoMode = false;
    function fAuto(pThis){
        if(pThis.checked) v_autoMode = true;
        else v_autoMode = false;
    }

    // DOM
    const v_merong = document.querySelector("#merong");
    const v_marker = document.querySelector("#marker");
    const v_ball = document.querySelector("#ball");
    const v_bar = document.querySelector("#bar");

    // 움직이는 속도
    let v_mvX = 10;  // 좌우방향
    let v_mvH = 10;  // 상하방향
    // 회전각
    let v_gak = 0;
    const ballSize = 100;
    const merongWidth = 400;
    const merongHeight = 500;

    // 볼 움직이기
    function fMvBall(){
        v_gak = (v_gak + 10) % 360; 
        v_ball.style.left = parseInt(v_ball.style.left) + v_mvX + "px";
        v_ball.style.top = parseInt(v_ball.style.top) + v_mvH + "px";
        v_ball.style.transform = `rotate(${v_gak}deg)`;

        var v_ballLeft = parseInt(v_ball.style.left);
        var v_ballRight = v_ballLeft + ballSize;
        var v_ballTop = parseInt(v_ball.style.top);
        var v_ballBottom = v_ballTop + ballSize;
        var v_barLeft = parseInt(v_bar.style.left);
        var v_barRight = v_barLeft + 150;  // 150은 오른쪽벽에 딱 떨어지게 준 값

        //  bar왼쪽좌표 + 75 = ball왼쪽좌표 + 50 성립해야 중심이 같이 움직임
        if(v_autoMode){
            var v_checkOver= parseInt(v_ball.style.left)-25;
            if(v_checkOver>250){
                v_bar.style.left = "250px";
            } else if(v_checkOver<0){
                v_bar.style.left = "0px";
            } else {
                v_bar.style.left = v_checkOver + "px";
            }
        }
        
        // 좌우 충돌
        if(v_ballLeft <= 0 || v_ballRight>= merongWidth){            
            v_mvX = -v_mvX;
        }
        // 상하 충돌
        if(v_ballTop <= 0 || v_ballBottom >= merongHeight){
            v_mvH = -v_mvH;
        }

        // 아래 와 오른쪽 리미트 체킁
        var v_botLimit = (v_ballBottom >= v_barTop); 
        var v_lRLimit =  ((v_ballRight >= v_barLeft) && (v_ballLeft <= v_barRight));
        // 마커표시, 회전을 해도 left,top 좌표는 바뀌지 않음이 확인가능
        v_marker.style.left = v_ballLeft + "px";
        v_marker.style.top = v_ballTop + "px";

        // 막대와 공 충돌시 skew 효과
        if(v_botLimit && v_lRLimit){
            //alert("충돌!!!");
            if(v_mvX > 0){
                v_ball.style.transform = "skewX(-45deg)";
            }else {
                v_ball.style.transform = "skewX(45deg)";
            }
            v_mvH = -v_mvH;  // 방향전환
        }     
        setTimeout(fMvBall,100);
    }

    // 화살표 좌우 키 컨트롤
    function fKeyControl(){
        var v_keyCode = event.keyCode;
        var v_barLeft = parseInt(v_bar.style.left);
        var v_barRight = v_barLeft + 150;
        if(v_keyCode==37){   // 왼쪽 화살표
            if(v_barLeft>0){
                v_bar.style.left = v_barLeft -10 + "px"; 
            }
        }
        if(v_keyCode==39){  // 오른쪽 화살표
            if(v_barRight < merongWidth){
                v_bar.style.left = v_barLeft +10 + "px"; 
            }
        }
    }

    // 페이지 로딩후 초기값 세팅 후 볼 움직임 콜!
    let v_barTop;
    window.onload = function(){
        v_bar.style.left = Math.floor(Math.random()*25)*10 + "px";
        v_bar.style.top = "450px";                                  // 막대 위치
        v_ball.style.left = Math.floor(Math.random()*30)*10 + "px"; // left는 랜덤
        v_ball.style.top = "10px";                                  // top은 고정
        v_barTop = parseInt(v_bar.style.top);
        fMvBall();                                     // 움직이기 시작
    }
</script>
</body>
</html>

초반 프로그램 공부 때 요따우 껄 많이 맹글어보면, 산수 실력도 꽤 늘고, 부등호와 등호 사용도

플렉시블 하게 바뀐당. 이상하게 초보자들은 등호만을 많이 쓰려 한당.(범위가 작당)

 

나의 경우 아래와 같은 결과가 불쑥 나왔당.

이태원 클라스의 조이서는 나의 눈물을 짜 주었당.  고맙고 고맙고 넘 고맙당.

 

살아가다보면 의견충돌, 감정충돌, 이것 저것 막 충돌등 다양한 충돌이 있당.

충돌이 문제가 아니고 충돌을 해결하려 하지 않는 게 문제당. 그건 뺑소니당.

해결노력이 없다면 그건 Unhealthy(건강하지 않음)당.

Healthy한 노력을 하도록 하장.

 

https://www.youtube.com/watch?v=Nc3dBG1NesE 

'자바스크립트' 카테고리의 다른 글

근시안과 노안엔 돋보기를 ...  (1) 2023.07.10
사랑(Heart)은 오락가락(Swing)  (2) 2023.07.06
GUI 로또번호발생기 이번주 예상 번호는...?  (0) 2023.07.05
마방진 맹글엉 원리이해  (0) 2023.07.05
마우스 움직임에 문자열 따라 다니깅.  (0) 2023.07.01

관련글 더보기

티스토리툴바