2048 html 194行

最新推荐文章于 2024-04-01 22:05:50 发布
缘起性本空
最新推荐文章于 2024-04-01 22:05:50 发布
阅读量163
点赞数
分类专栏：生活杂谈文章标签： html
本文链接：https://blog.csdn.net/r77683962/article/details/122020942
版权
生活杂谈专栏收录该内容
46 篇文章 0 订阅
订阅专栏
<!DOCTYPE html>
<html>
    <head>
        <style>
            div
            {
                border: 1px red solid;
            }
            
            .DrawingBoard
            {
                width: 420px;
                height: 420px;
                margin: 0 auto;
                position: relative;
            }
            
            .square
            {
                float: left;
                width: 90px;
                height: 90px;
                margin: 6.5px;
                text-align: center;
                line-height: 90px;
            }
        </style>
    </head>
    <body>
        <div class="DrawingBoard"></div>
        <script>
            var can_move = true;
            var FrontSquare;
            var TargetExist = false;
            var TargetSquare ;
            var SelfSquare;
            var element = document.getElementsByClassName("DrawingBoard");
            for (var i = 1; i < 5; i++)
                for (var j = 1; j < 5; j++)
                {
                    var node = document.createElement("div");
                    node.setAttribute('id', 's' + i + j);  
                    node.setAttribute('class', 'square');  
                    element[0].appendChild(node);
                }
                            
            function BornSquare()
            {
                var RandomNumber = Math.random();
                var NewRandomNumber = (RandomNumber > 0.5) ? 2 : 4;
                                
                while(true)
                {
                    var RowRandom = Math.ceil(Math.random() * 4);
                    var ColumnRandom = Math.ceil(Math.random() * 4);
                    
                    var square = document.getElementById("s" + RowRandom + ColumnRandom);
                    if (square.innerHTML == "" )
                    {
                        square.innerHTML = NewRandomNumber;
                        break;                        
                    }
                }
            }
            
            document.onkeydown = function(event)
            {
                TargetExist = false;
                switch (event.keyCode)
                {
                    case 37: MoveLeft();   break;
                    case 38: MoveUp();     break;
                    case 39: MoveRight();  break;
                    case 40: MoveDown();   break;
                    default: console.log("Default branch");
                }                
                
                if (can_move)
                {
                    BornSquare();
                    can_move = false;
                }
            }
            
            function Check()
            {
                if (FrontSquare.innerHTML == "")
                {
                    TargetSquare = FrontSquare;
                    TargetExist = true;
                }
                else if (SelfSquare.innerHTML == FrontSquare.innerHTML)
                {
                    FrontSquare.innerHTML = 2 * SelfSquare.innerHTML;
                    SelfSquare.innerHTML = ""
                    can_move = true;
                    TargetExist = false;
                }
                else
                    return false;
            }
            
            function CheckTargetExist()
            {
                if (TargetExist)
                {
                    TargetSquare.innerHTML = SelfSquare.innerHTML;
                    SelfSquare.innerHTML = ""
                    can_move = true;
                    TargetExist = false;
                }
            }
            
            function MoveLeft()
            {
                for (var j = 1; j < 5; j++)
                    for (var i = 2; i < 5; i++)
                    {
                        SelfSquare = document.getElementById("s" + j + i);
                        if (SelfSquare.innerHTML != "")
                        {
                            for (var k = 1; k < i; k++)
                            {
                                FrontSquare = document.getElementById("s" + j + (i - k));
                                if (false == Check())
                                    break;
                            }
                            CheckTargetExist();
                        }
                    }
            }
            
            function MoveRight()
            {                
                for (var j = 1; j < 5; j++)
                    for (var i = 3; i > 0; i--)
                    {
                        SelfSquare = document.getElementById("s" + j + i);
                        if (SelfSquare.innerHTML != "")
                        {    
                            for (var k = i + 1; k < 5; k++)
                            {
                                FrontSquare = document.getElementById("s" + j + k);
                                if (false == Check())
                                    break;
                            }
                            CheckTargetExist();
                        }
                    }
            }
                        
            function MoveUp()
            {                
                for (var i = 1; i < 5; i++) 
                    for (var j = 2; j < 5; j++) // row
                    {
                        SelfSquare = document.getElementById("s" + j + i);
                        if (SelfSquare.innerHTML != "") 
                        {
                            for (var k = 1; k < j; k++)
                            {
                                FrontSquare = document.getElementById("s" + (j - k) + i);
                                if (false == Check())
                                    break;
                            }
                            CheckTargetExist();
                        }
                    }
            }
                        
            function MoveDown()
            {
                for (var i = 1; i < 5; i++) // column
                {
                    for (var j = 3; j > 0; j--) // row
                    {
                        SelfSquare = document.getElementById("s" + j + i);
                        if (SelfSquare.innerHTML != "")
                        {
                            for (var k = j + 1; k < 5; k++)
                            {
                                FrontSquare = document.getElementById("s" + k + i);
                                if (false == Check())
                                    break;
                            }
                            CheckTargetExist();
                        }
                    }
                }
            }
            BornSquare();
        </script>
    </body>
</html>