마방진 맹글엉 원리이해

자바스크립트

by e7e 2023. 7. 5. 14:51

드라마 뿌리깊은 나무에서 세종대왕께서 즐기시던 5 X 5 마방진!

알고보면 원리는 간단하당.

인간은 기억과 스스로의 반복 행동패턴에서 원리를 찾아내는 능력이

탁월하다. 그래서 그냥 반복 연습하면 다린이라는 칭호를 얻게된당.

마방진 원리는 아무쪽 변에서 시작해도 되는 뎅.

1. 변 정중앙에서 1이 시작되고, 대각선 방향으로 뻗는당.

2. 그자리가 비어있으면, 다음 숫자를 적고, 막혀있으면 그 자신

바롱 아래칸에 다음 숫자를 적는당.

3. 만약 막혀있지 않은데, 자리가 없다면 반대쪽 끝에 다음 숫자를 적는다.

위 1,2,3을 반복하면 어떤 마방진도 완성된당.

위 규칙을 괘니 맘 가는 대로 구현해 보았당.

너무 생각가는 대로 맹글어서 리팩토링이 필요하지만 싫당.

그저 로직훈련한 정도로 과정은 제끼고, 결과에 만족하고 싶당.

mabangjin.html(꼬옥 이 이름으로 맹글어야 해용-소스이해되면 고치세용)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>E7E마방진</title>
<style>
    #wrapper {
        background-color: burlywood;
        margin:0 auto;
        text-align: center;
    }
    .nemo {
        backface-visibility: hidden;
        transform: rotateY(180deg);
        margin: 0 auto;
        display: inline-block;
        width:80px;
        height:80px;
        border:1px solid black;
        vertical-align:top;
        font-size: 2.8em;
        font-weight: bolder;
        text-align: center;
        line-height: 75px;
    }
    h1 {
        margin: 0 auto;
        text-align: center;
        background-color: orange;
        color:greenyellow;
    }
    #footer {
        background-color: black;
        color:yellow;
    }
</style>
</head>
<body>
<br><br>
<h1 id="title">마방진 자동완성</h1>
<br>
<div id="wrapper">
<script>
    // 16진수 랜덤 색깔 코드 맹글깅
    const hexaChar = '0123456789ABCDEF';
    const ranColor = ()=>{
        let sColor ="#";
         for(let i=1; i<=6; i++){
            sColor += hexaChar[Math.floor(Math.random()*hexaChar.length)];
         }
         return sColor;
    }

    const myWrapper = document.querySelector("#wrapper");
    const myTitle = document.querySelector("#title");
    const v_maxNum = 9; 
    const v_defWidth = 80;       
    var v_N=3; // 시작은 3 X 3 마방진

    //주소줄에서 마방진 크기 값 가져오깅
    if(location.href.split("?")[1]){
        v_N=parseInt(location.href.split("?")[1].split("=")[1]);
        if(v_N > v_maxNum){
            v_N=3;
        }
    }
    //레이아웃 사이즈
    myWrapper.style.width = ((v_N+1)*v_defWidth)+"px";
    myTitle.style.width = ((v_N+1)*v_defWidth)+"px";
    myTitle.style.color = ranColor();
    document.write("<br>");

    // 마방진 숨겨 놓깅
    for(var i=1; i<=v_N; i++){
        for(var j=1; j<=v_N; j++){
            document.write(`<div class=nemo id=R${i}C${j} 
            style="background-color:${ranColor()};color:${ranColor()}"></div>`);
        }
        document.write("<br>");
    }
    document.write("<br>");
</script>
<!-- 일부러 스크립트 나누어 구분, module 쓰는 게 나을깡?-->
<!-- 위는 화면, 아래는 제어-->
<script>
    const seconds = 1000; // 1초 1000ms
    
    // n값 증가시켜 다시 로딩(일부러 이런 방식 해봄)
    function delayLoad(){
        location.replace("mabangjin.html?n="+(v_N+2));
    }

    // 초기값 뒤집어짐, 증가각
    var v_init =180;
    var v_inc = 30;

    // 개별 순차적 회전
    function f_rotate(p_obj){
        var v_gak = v_init + v_inc;
        p_obj.style.transform = `rotateY(${v_gak}deg)`;
        if(v_gak == 360){
            v_init =180;
            v_inc = 30;

            if(p_obj.innerHTML == v_N*v_N){
               //고의로 마지막 넘어갈 때 시간차 두도 이동
               myWrapper.style.backgroundColor="black";
                setTimeout(delayLoad,2*seconds);
            }
            return;
        }
        v_inc +=30;
        setTimeout(f_rotate,150,p_obj); // 150은 그냥 튜닝값
    }

    //첫줄 가운데에서 값 1부터 시작
    var v_curRow = 1;
    var v_curCol = Math.round(v_N /2);
    var v_Number = 1;

    document.querySelector(`#R${v_curRow}C${v_curCol}`).innerHTML = "1";
    f_rotate(document.querySelector(`#R${v_curRow}C${v_curCol}`));

    // 마방진 원리 구현
    function f_inc(){
        v_Number++;
        if(v_Number > (v_N*v_N)) return;
        v_curRow -=1;
        v_curCol +=1;

        if(v_curRow < 1 && v_curCol > v_N) {
            v_curRow += 2;
            v_curCol -= 1;
        }
        if(v_curRow < 1) v_curRow = v_N;
        if(v_curCol > v_N) v_curCol = 1;

        var v_data = document.querySelector(`#R${v_curRow}C${v_curCol}`).innerHTML;
        if(v_data){
            v_curRow +=2;
            v_curCol -=1;
        }

        document.querySelector(`#R${v_curRow}C${v_curCol}`).innerHTML = v_Number;
        f_rotate(document.querySelector(`#R${v_curRow}C${v_curCol}`));
        setTimeout(f_inc,1*seconds);
    }
    setTimeout(f_inc,1*seconds);
    </script>
    <h1 id="footer">&copy; E7E 메롱</h1>
</div>
</body>
</html>

내 크롬에선 아래와 같은 캡쳐 결과화면이 나오고 말았당. 쪼메 귀엽당!

backface-visibility: hidden 을 넣어서, 3D 개념을 조금 넣었고,

일부러 타이머를 많이 넣어서, 입체로직(비동기)이 훈련되었으면 하는 바램이당.

location을 이용하여, 주소표시줄을 이용하여 다음 증가된 N값이 오도록 하였당.

이 모든 것이 일부러 한 것 같지만, 그냥 생각이 갬성이 그렇게 갔당.

마방진에도 인생의 진리가 몇개 숨어 있는 듯 보인당.

결과가 완성되어야 비로소 그 의도가 보인당. 평등한 세상이당.

가로 세로 총합이 같은 세상!

우리가 정도라 믿는 것이 정도가 아니고,

삐뚤다고 믿는 것이 삐뚠것이 아니라면, 단순 방향의 의미뿐이라면

똑같이 나눌수 없는 갯수이어야만 똑같이 나눌 수 있을거시당,

자본주의 산수가 만든 편견에서 난 언제 진정 해방될깡?

편견과 오해는 특정 각도와 특정시야로만 본걸 기반으로 생각하기 때문에 생긴당.

날아오르자, 그리고 멀리서 때론 가까이서 다시 한번 바라보장.

2층 버스만 타도 그동안 보아왔던 것들의 전혀 다른 모습을 볼 수 있을거시다.

지금 바로 날아! 날아! 날아 오르자!

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

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

볼튕기기로 배우는 인생 (2)	2023.07.06
GUI 로또번호발생기 이번주 예상 번호는...? (0)	2023.07.05
마우스 움직임에 문자열 따라 다니깅. (2)	2023.07.01
ag-grid 간단 사용법(사용법 쪼메 바뀜!) (6)	2023.06.29
시베리안 허숙희의 자바스크립트 비기닝 32 (무한 스크롤) (0)	2023.06.28