IE8용] 뱀놀이.. (미완성본..)

1)
어릴 때 잠깐 본 보드게임입니다.
그걸 구현해봤습니다.

이미지출처 : http://note.cyworld.com/16279735/398802/m 
구현일 : http://c.cyworld.com/17126625/note/586973 '12.3.26

구현한(?) 링크 : http://club.cyworld.com/50832243124/186645043 

...

2)

        <script>
            var
             diceCount = 2,
                boardMovingDelay = 70,
                diceDefaultDelay = 50,
                numMax, xGab = 10,
                yGab = 10,
                numProcess =
                // reset numProcess
                (

                function () {
                    var i = 0,
                        ar = arguments,
                        ari, returnValue = [],
                        maxCheck = 0;

                    for (i = 0; i < ar.length; i++) {
                        if ((ari = ar[i]).length > maxCheck) maxCheck = ari.length;
                        returnValue[ari[0]] = ari;
                    }
                    numMax = maxCheck;

                    return returnValue;
                })(
                [4, 16], [8, 12], [18, 23, 38], [20, 21, 39, 43, 57, 65, 75, 74], [22, 19, 2], [24, 36], [28, 27, 15, 5, 6], [30, 11, 10], [32, 33, 47, 55, 56], [34, 46], [40, 41, 60], [44, 45, 35, 26], [48, 54], [58, 59, 42], [66, 67, 53, 49, 31, 29, 13, 14], [68, 69, 52], [70, 71, 89, 88], [72, 73, 69, 51, 50], [76, 86], [80, 81, 100], [84, 77, 63, 62], [90, 92], [94, 95, 85, 77, 64], [96, 97, 83, 82], [98, 99, 81, 79, 78])

                ,
                upColor = '0000ff,1f1fff,2f2fff,4f4fff,6f6fff,8f8fff,afafff,cfcfff,dfdfff,efefff,ffffff'.split(','),
                downColor = 'ff0000,ff1f1f,ff2f2f,ff4f4f,ff6f6f,ff8f8f,ffafaf,ffbfbf,ffcfcf,ffdfdf,ffefef,ffffff'.split(','),
                frameTop = 198,
                frameRight = 770,
                frameBottom = 1142,
                frameLeft = 7,
                frameWidth = frameRight - frameLeft,
                frameHeight = frameBottom - frameTop,

                diceWidth = 30,
                diceHeight = 30,
                diceCenter = diceWidth / 2,
                dicevCenter = diceHeight / 2,

                tabPosition = (function () {
                    var
                    frameArray = [],
                        i, j, k, l;

                    for (i = 1; i <= 100; i++) {
                        j = parseInt((i - 1) / 10);
                        k = 10 - (i - 1) % 20;
                        if (k > 0) k = -k + 1;

                        frameArray[i] = [
                        parseInt(frameRight + frameWidth * (k / 9)), parseInt(frameBottom - frameHeight * (j / 9))];
                    }
                    frameArray[0] = [parseInt(frameArray[1][0] - frameWidth / 9), parseInt(frameArray[1][1])];

                    return frameArray;
                })();

            var
             tenSplitPosition = [0, 0.021052632, 0.115789474, 0.336842105, 0.526315789, 0.684210526, 0.810526316, 0.905263158, 0.968421053, 1, 1]

            ,
                animSchedule = [],
                animLength = 0,
                animPointer, animSplitPointer

                , anim2Schedule, anim2Length, anim2Pointer, anim2SplitPosition

                , animElement, animBack, animBackColor;

            function moveBoard(dice) {
                var
                diceInt = parseInt(dice.id.substring(9, dice.id.length)),
                    board = document.getElementById('board' + diceInt),
                    boardBack = document.getElementById('zoneField' + diceInt),
                    i, diceNum, boardLeft, boardTop, boardNum, nowNum
                    //    , j, pNum
                    ;

                diceNum = parseInt(-(dice.offsetLeft - diceCenter) / diceWidth) + 1;

                boardLeft = parseInt(1.5 - (board.offsetLeft + frameLeft - xGab) / frameWidth * 9);
                boardTop = parseInt(1.5 - (board.offsetTop + frameTop - yGab) / frameHeight * 9);

                boardNum = 110 - boardTop * 10 - (1 - boardTop % 2) * 9 + (1 - (boardTop % 2) * 2) * (boardLeft - 1);

                animElement = board;
                animBack = boardBack;

                for (i = 0; i <= diceNum; i++) {
                    nowNum = boardNum + i;
                    if (nowNum > 100) break;

                    animSchedule[i] = nowNum;
                }

                //  j=1;
                // effect of Position
                //  if (pNum=numProcess[nowNum]) {
                //    for (j=1; j<pNum.length; j++) {
                //      animSchedule[i+j-1]=pNum[j];
                //      }
                //    }
                if (anim2Schedule = numProcess[nowNum]) anim2Length = anim2Schedule.length;
                else anim2Length = 0;

                //  animLength=i+j-1;
                animLength = i;

                // animSchedule.length=animLength; alert(animSchedule);
                animPointer = 0;
                animSplitPointer = 0;
                anim2Pointer = 0;

                if (animSchedule[0] == 100) return;

                setTimeout(movingBoard, boardMovingDelay);
            }

            function movingBoard2() {
                var p1, p2;

                if (animSplitPointer >= 10) {
                    animElement.style.left = (-tabPosition[anim2Schedule[anim2Length - 1]][0] + xGab) + 'px';
                    animElement.style.top = (-tabPosition[anim2Schedule[anim2Length - 1]][1] + yGab) + 'px';

                    animBack.style.backgroundColor = '#ffffff';

                    // finished rolling
                    diceDelay = 0;
                    diceAllSaved.style.backgroundColor = 'white';
                    return;
                }

                animPointer = tenSplitPosition[animSplitPointer] * (anim2Length - 1);
                anim2SplitPosition = animPointer - parseInt(animPointer);
                animPointer = parseInt(animPointer);

                p1 = tabPosition[anim2Schedule[animPointer]];
                p2 = tabPosition[anim2Schedule[animPointer + 1]];
                if (!p2) p2 = p1;

                animElement.style.left = parseInt((p1[0] - p2[0]) * anim2SplitPosition - p1[0] + xGab) + 'px';
                animElement.style.top = parseInt((p1[1] - p2[1]) * anim2SplitPosition - p1[1] + yGab) + 'px';

                animBack.style.backgroundColor = '#' + animBackColor[animSplitPointer];

                animSplitPointer++;
                setTimeout(movingBoard2, boardMovingDelay);
            }

            function movingBoard() {
                if (animSplitPointer >= 10) {
                    animPointer++;
                    if (animPointer >= (animLength - 1)) {
                        animElement.style.left = (-tabPosition[animSchedule[animPointer]][0] + xGab) + 'px';
                        animElement.style.top = (-tabPosition[animSchedule[animPointer]][1] + yGab) + 'px';

                        if (anim2Schedule) {
                            animSplitPointer = 0;
                            animBackColor = (anim2Schedule[0] < anim2Schedule[anim2Schedule.length - 1] ? upColor : downColor);
                            setTimeout(movingBoard2, boardMovingDelay);
                        } else
                        // finished rolling
                        diceDelay = 0;
                        diceAllSaved.style.backgroundColor = 'white';

                        return;
                    }

                    animSplitPointer = 0;
                }

                var
                p1 = tabPosition[animSchedule[animPointer]],
                    p2 = tabPosition[animSchedule[animPointer + 1]];

                animElement.style.left = parseInt((p1[0] - p2[0]) * tenSplitPosition[animSplitPointer] - p1[0] + xGab) + 'px';
                animElement.style.top = parseInt((p1[1] - p2[1]) * tenSplitPosition[animSplitPointer] - p1[1] + yGab) + 'px';

                animSplitPointer++;

                setTimeout(movingBoard, boardMovingDelay);
            }

            var diceSaved, diceDelay, diceNnum, diceAllSaved;

            function rollDice(receivedDice, receivedDiceAll) {
                var diceNum;

                if (receivedDice && isNaN(receivedDice)) { // fix firefox's bug..?
                    if (diceDelay) {
                        alert('굴리고있슴다');
                        return;
                    }

                    diceSaved = receivedDice;
                    diceAllSaved = receivedDiceAll;
                    diceAllSaved.style.backgroundColor = 'gray';
                    diceDelay = diceDefaultDelay;
                    diceNnum = parseInt(-(diceSaved.offsetLeft - diceCenter) / diceWidth) + 1;
                }

                if (diceDelay > diceDefaultDelay * 10) {
                    // stoped rolling
                    //                    diceDelay = 0;
                    diceAllSaved.style.left = '0px';
                    //                    diceAllSaved.style.backgroundColor = 'white';
                    moveBoard(diceSaved); // start board Action
                    return;
                }

                diceSaved.style.left = (-diceNnum * diceWidth + diceWidth) + 'px';
                diceAllSaved.style.left = (1000 - diceDelay) / 100 + 'px';

                diceNum = parseInt(-(diceSaved.offsetLeft - diceCenter) / diceWidth) + 1;
                diceNnum = parseInt(Math.random() * 5) + 1;
                if (diceNnum >= (7 - diceNum)) diceNnum++;

                diceDelay += 200;
                //alert(diceSaved.outerHTML);
                setTimeout(rollDice, diceDelay);
            }

            function pressDice(dice) {
                var diceAll;

                // alert('dice'+parseInt(dice.id.substring(9, dice.id.length))+' '+diceNum);
                // alert('diceAll'+parseInt(dice.id.substring(9, dice.id.length)));
                diceAll = document.getElementById('diceAll' + parseInt(dice.id.substring(9, dice.id.length)));

                rollDice(dice, diceAll);
            }

            function pressBoard(board) {
                var boardLeft, boardTop, boardNum;

                boardLeft = parseInt(1.5 - (board.offsetLeft + frameLeft - xGab) / frameWidth * 9);
                boardTop = parseInt(1.5 - (board.offsetTop + frameTop - yGab) / frameHeight * 9);

                boardNum = 110 - boardTop * 10 - (1 - boardTop % 2) * 9 + (1 - (boardTop % 2) * 2) * (boardLeft - 1);

                alert(board.offsetLeft + ' ' + board.offsetTop + ' / ' + boardLeft + ' ' + boardTop + ' / ' + boardNum);
            }

            function rollingZoneInit() {
                var
                outzone = document.getElementById('rollingZone'),
                    outv = '',
                    i, diceString = '<table style="position:absolute; left:{diceLeft}px; top:0px;" id=diceTable{diceNum} onclick=pressDice(this); border=0 cellpadding=0 cellspacing=0 width=180 height={diceHeight}><tr height={diceHeight}>zzzzzz</tr></table>'.replace(/{diceHeight}/g, diceHeight).replace(/z/g, '<td width=30 align=center valign=center style="cursor:hand;" >{ivalue}</td>').replace('{ivalue}', 1).replace('{ivalue}', 2).replace('{ivalue}', 3).replace('{ivalue}', 4).replace('{ivalue}', 5).replace('{ivalue}', 6);

                for (i = 0; i < diceCount; i++) outv += 'z'; // put into z's string..
                outv = ('<table border=0 cellpadding=0 cellspacing=0><tr>' + outv + '</tr></table>').replace(/z/g, '<td>z1</td><td>z2</td>').replace(/z1/g, '<div id=z6 class=zoneField><div class=border><div class=zone><img id=z3 class=zone1 src=http://cyimg37.cyworld.com/common/file_down.asp?redirect=%2F370011%2F2011%2F11%2F28%2F15%2F16279735_39598.jpg width=861 height=1255 onclick=pressBoard(this); /></div></div></div>').replace(/z2/g, '<div class=diceField><div id=z5 class=diceAll><div class=border><div id=z4 class=dice ></div></div></div></div>');

                for (i = 0; i < diceCount; i++)
                outv = outv.replace(/z3/, 'board' + (i + 1)).replace(/z4/, 'dice' + (i + 1)).replace(/z5/, 'diceAll' + (i + 1)).replace(/z6/, 'zoneField' + (i + 1));

                outzone.innerHTML = outv;
                //alert(outv);
                for (i = 0; i < diceCount; i++) {
                    document.getElementById('dice' + (i + 1)).innerHTML = diceString.replace(/{diceNum}/g, (i + 1)).replace(/{diceLeft}/, -parseInt(Math.random() * 6) * 30);
                }
            }

            //*** test code 입니다.. 요 한줄은 완성본에는 날려주세용~
            //            for (i = 0; i <= 100; i++) document.write(tabPosition[i][0] + ':' + tabPosition[i][1] + ' ' + (i % 10 ? '' : '<br/>'));
        </script>
        <style>
            div, table {
                position:relative;
            }
            div.border {
                border-style:solid;
                border-width:10px;
                border-color:black;
                margin:5px;
            }
            div.diceField {
                width:80px;
                height:70px;
                overflow:hidden;
                position:relative;
            }
            div.diceAll {
                width:60px;
                height:60px;
                overflow:hidden;
                position:absolute;
            }
            div.rollingZone {
                position:relative;
                border-style:solid;
                border-width:0px;
                margin:0px;
            }
            div.title {
                width:848px;
                height:190px;
                overflow:hidden;
                background-color:yellow;
            }
            img.title {
                padding:0px;
                margin:0px;
                position:absolute;
                clip:rect(8px 854px 198px 5px);
                left:-6px;
                top:-8px;
                border-width:0px;
            }
            div.zoneField {
                width:137px;
                height:154px;
                overflow:hidden;
                position:relative;
                /*                background-color:red; */
            }
            div.zone {
                width:107px;
                height:124px;
                overflow:hidden;
                position:relative;
            }
            div.dice {
                width:30px;
                height:30px;
                overflow:hidden;
                position:relative;
            }
            img.zone1 {
                left:3px;
                top:-1132px;
                position:absolute;
                clip:rect(198px 854px 1255px 5px);
            }
        </style>
        <div class=border>
            <div class=title>
                <img class=title src=http://cyimg37.cyworld.com/common/file_down.asp?redirect=%2F370011%2F2011%2F11%2F28%2F15%2F16279735_39598.jpg
                width=861 height=1255 />
            </div>
        </div>
        <div class=border>
            <div id=rollingZone class=rollingZone></div>
        </div>
        <script>
            rollingZoneInit();
        </script>

-- 새 창에 띄우기.. --

*참고*
싸이월드 클럽용 이미지를 사용했기 때문에, 싸이월드(네이트)에 접속하지 않았다면 이미지가 나오지 않습니다.

...

3)
사용법은..

보드(?) 우측에 있는 각각의 숫자.. 그거 주사위입니다.

그걸 클릭하면 주사위 굴리(?)고,
나온(?) 숫자에 따라 보드가 움직입니다.

끝(?)점 룰을 어떻게 할까..하다가,
그냥 끝까지 가면 주사위가 리셋 안되서, 다른(?) 사람도 주사위 클릭 못(?)하도록 설정했습니다.

버그가 있다 치고(?), 사용하시면 될겁니다.

...

4) 
일단 서술해 봅니다. 
전부 서술하려다가, 함수와 중요한 부분만으로 줄였습니다.)

                numProcess =
: 포인트마다의 위치 룰입니다. 

                })(
                [4, 16], [8, 12], [18, 23, 38], [20, 21, 39, 43, 57, 65, 75, 74], [22, 19, 2], [24, 36], [28, 27, 15, 5, 6], [30, 11, 10], [32, 33, 47, 55, 56], [34, 46], [40, 41, 60], [44, 45, 35, 26], [48, 54], [58, 59, 42], [66, 67, 53, 49, 31, 29, 13, 14], [68, 69, 52], [70, 71, 89, 88], [72, 73, 69, 51, 50], [76, 86], [80, 81, 100], [84, 77, 63, 62], [90, 92], [94, 95, 85, 77, 64], [96, 97, 83, 82], [98, 99, 81, 79, 78])

: 보드판에 뱀, 혹은 고속도로(?)가 있는데요, 그 구간구간을 숫자 표시했습니다. 

             tenSplitPosition = [0, 0.021052632, 0.115789474, 0.336842105, 0.526315789, 0.684210526, 0.810526316, 0.905263158, 0.968421053, 1, 1]
: 이동 이벤트때 상대위치값입니다. 가속도를 시간의 30% 까지 넣어두고, 나머지 시간의 70%는 감속했습니다. 

            function moveBoard(dice) {
: 주사위를 굴린 후, 보드 움직이겠다는 의지(?)입니다. 

            function movingBoard2() {
: 이벤트위치 도착 후 움직이는 과정입니다. 주사위로 이동해서 도착 후의 스케쥴이네요. 
: 두개로 나눠놓은 이유는, movingBoard 에서의 한칸 스케쥴동안의 이동시간이 여기에서의 전체 스케쥴이거든요.

            function movingBoard() {
: 주사위 값으로 움직이는 과정입니다. 

            function rollDice(receivedDice, receivedDiceAll) {
: 주사위 굴리는 과정입니다. 

            function pressDice(dice) {
: 주사위 눌렀을 때입니다. 

            function pressBoard(board) {
: 보드를 눌렀을 때, 보드가 몇번을 표시하고 있는지 계산합니다. 디버그용입니다. 

            function rollingZoneInit() {
: 보드를 초기화입니다.

...

5)
이 게임(?)의 특징은..
표시되는 보드의 위치를 기준으로 번호를 역산한다는 겁니다.

보통은, 말의 위치를 번호로 두고 보드의 위치를 계산하겠습니다만,
전 그 반대로 한거죠..

사실.. 이보다 더 리얼(?)하게 만들고 싶었습니다만,
= =;.. 거기까지는 손이 안가더라구요.

...

6)
이렇게 만들고 난 한참후의 지금에서 보면,
.. 저런(?) 설명이 없을 땐 어떻게 수정해야할지 난감하죠.

대형 게임이나 대형 프로젝트를 진행하는 분들은 더더욱 그럴겁니다.

.. 그런 느낌으로, 업뎃이 여기까지만 진행됐습니다.

easyBow killofki@.