2048移动算法

最新推荐文章于 2022-03-19 17:46:27 发布

twilight0402

最新推荐文章于 2022-03-19 17:46:27 发布

阅读量4.8k

点赞数

分类专栏： HTML 文章标签： 2048 移动算法

本文链接：https://blog.csdn.net/twilight_karl/article/details/71254965

版权

HTML 专栏收录该内容

11 篇文章 1 订阅

订阅专栏

之前一直想写一个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>