2048移動演算法

twilight0402發表於2017-05-06
演算法

版權宣告：本文為博主原創文章，轉載請註明出處。 https://blog.csdn.net/twilight_karl/article/details/71254965

之前一直想寫一個web版的2048 ，主要頁面已經寫好了，但是移動的演算法還沒有完成。今天研究了一下移動的演算法，用4*4的陣列表示遊戲介面，雖然有點簡陋，不過已經能看出效果了(￣▽￣)/。接下來有時間再把程式碼和頁面整合一下。(￣▽￣”)

以左移為例，當使用者按下左鍵時，遊戲需要完成兩個步驟：
1，從左往右檢查是否有可以相加的數字
2，每次檢查後從右往左調整數字的位置，保證數字相鄰的左端不會有0

左移函式：

        function moveLeft (){
            var i,j;  
            for(i=0;i<4;i++){  
                for(j=0;j<3;j++){  
                    if(data[i][j] == data[i][j+1]){
                        data[i][j] += data[i][j+1];
                        data[i][j+1] = 0 ;
                    }
                    clearLeft();
                }
            }
        }

清零函式:

    function clearRight(){
        for(var i = 0 ; i < 4 ; i++){
            for(var j = 3 ; j >= 0  ; j-- ){
                for(var k = j ; k < 4  ; k++ ){
                    if(data[i][j]!= 0 && data[i][k] == 0){
                        data[i][k] = data[i][j];
                        data[i][j] = 0 ;
                    }
                }
            }
        }
    }

完整程式碼如下：

<html>

<body>
    <input type="button" value="Left" onclick="moveLeft(); show();"/>
    <input type="button" value="right" onclick="moveRight(); show();"/>
    <input type="button" value="up" onclick="moveUp(); show();"/>
    <input type="button" value="down" onclick="moveDown(); show();"/>

    <div id="s"></div>
    <script>
    var data = [[8,8,2,0],[8,0,8,2],[8,0,2,8],[8,2,0,8]];
        function show(){
            var s = document.getElementById("s");
            s.innerHTML = "";
            for(var i = 0 ; i < 4 ; i++){
                for(var j = 0 ; j < 4 ; j++){
                    s.innerHTML += data[i][j]+"&nbsp;&nbsp;&nbsp;&nbsp;";
                }
            s.innerHTML += "<br/>";
            }
        }

        // 左移
        function moveLeft (){
            var i,j;  
            for(i=0;i<4;i++){  
                for(j=0;j<3;j++){  
                    if(data[i][j] == data[i][j+1]){
                        data[i][j] += data[i][j+1];
                        data[i][j+1] = 0 ;
                    }
                    clearLeft();
                }
            }
        }

        // 右移
        function moveRight (){
            var i,j;  
            for(i=0;i<4;i++){  
                for(j=0;j<3;j++){  
                    if(data[i][j] == data[i][j+1]){
                        data[i][j+1] += data[i][j];
                        data[i][j] = 0 ;
                    }
                    clearRight();
                }
            }
        }

        // 上移
        function moveUp (){
            var i,j;  
            for(j=0;j<4;j++){  
                for(i=0;i<3;i++){  
                    if(data[i][j] == data[i+1][j]){
                        data[i][j] += data[i+1][j];
                        data[i+1][j] = 0 ;
                    }
                    clearUp();
                }
            }
        }   

        // 下移
        function moveDown (){
            var i,j;  
            for(j=0;j<4;j++){  
                for(i=3;i>0;i--){  
                    if(data[i][j] == data[i-1][j]){
                        data[i][j] += data[i-1][j];
                        data[i-1][j] = 0 ;
                    }
                    clearDown();
                }
            }
        }       

    // 清除右邊的0
    function clearRight(){
        for(var i = 0 ; i < 4 ; i++){
            for(var j = 3 ; j >= 0  ; j-- ){
                for(var k = j ; k < 4  ; k++ ){
                    if(data[i][j]!= 0 && data[i][k] == 0){
                        data[i][k] = data[i][j];
                        data[i][j] = 0 ;
                    }
                }
            }
        }
    }

    // 清除左邊的0
    function clearLeft(){
        for(var i = 0 ; i < 4 ; i++){
            for(var j = 0 ; j < 4  ; j++){
                for(var k = j ; k >= 0 ; k-- ){
                    if(data[i][j]!= 0 && data[i][k] == 0){
                        data[i][k] = data[i][j];
                        data[i][j] = 0 ;
                    }
                }
            }
        }
    }

    // 清除上方的0
    function clearUp(){
        for(var j = 0 ; j < 4 ; j++){
            for(var i = 0 ; i <4  ; i++){
                for(var k = i ; k >=0  ; k-- ){
                    if(data[i][j]!= 0 && data[k][j] == 0){
                        data[k][j] = data[i][j];
                        data[i][j] = 0 ;
                    }
                }
            }
        }
    }

    // 清除下方的0
    function clearDown(){
        for(var j = 0 ; j < 4 ; j++){
            for(var i = 3 ; i >= 0 ; i--){
                for(var k = i ; k < 4 ; k++ ){
                    if(data[i][j]!= 0 && data[k][j] == 0){
                        data[k][j] = data[i][j];
                        data[i][j] = 0 ;
                    }
                }
            }
        }
    }   

    show();



    </script>
</body>
</html>


相關文章