自制拼图游戏遇到的问题,script中语句无法对div的样式属性进行干涉

我并没有对jsp进行过系统学习,为了完成学期末作业。多方考究,找到了一个拼图小游戏源代码进行复刻。目前源代码的基础逻辑已经研究清楚,但游戏的基本功能并没能正常实现。图片说明
逐步剖析以后,发现了问题所在,script内的代码,并没有能对body中div的style样式值进行干涉,以至于未能实现单元格的位置移动。
图片说明图片说明
以上是调试过程发现的问题,62和64行前后的检测值一致,意味着nam【X】.top的值并未改变。那么请问我该如何修改才能实现top值的改变呢?

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <script language="JavaScript">
            var b_pos = 16, //初始化变量
            count = 0,
            pos = new Array(),
            nam = new Array();
            pos[1] = 7;
            pos[2] = 10;
            pos[3] = 14;
            pos[4] = 9;
            pos[5] = 12;
            pos[6] = 2;
            pos[7] = 13;
            pos[8] = 1;
            pos[9] = 8;
            pos[10] = 5;
            pos[11] = 4;
            pos[12] = 6;
            pos[13] = 3;
            pos[14] = 11;
            pos[15] = 15;

            function start() { //设置游戏开始函数
                nam[1] = L1.style; //自定义样式组
                nam[2] = L2.style;
                nam[3] = L3.style;
                nam[4] = L4.style;
                nam[5] = L5.style;
                nam[6] = L6.style;
                nam[7] = L7.style;
                nam[8] = L8.style;
                nam[9] = L9.style;
                nam[10] = L10.style;
                nam[11] = L11.style;
                nam[12] = L12.style;
                nam[13] = L13.style;
                nam[14] = L14.style;
                nam[15] = L15.style;
                document.onkeydown= keyDown;
            }

            function keyDown() {
                var prKey = event.keyCode;
                if(prKey == 38) { //设置向上按键
                    if(b_pos < 13) { //判断空格位置
                        count = b_pos + 4;
                        X = (count);
                        Z = (parseInt(nam[X].top));
                        nam[X].top = Z - 52; //纵向减去一个方格的宽度
                        Q = pos[X];
                        b_pos = Q;
                    }
                } else if(prKey == 40) { //设置向下按键
                    if(b_pos > 4) {
                        count = b_pos - 4;
                        X = fun(count);//5
                        Z = (parseInt(nam[X].top));
                        console.log(Z);
                        console.log(nam[X].top);
                        nam[X].top=Z+52;
                        console.log(nam[X].top);
                        Q = pos[X];
                        pos[X] = b_pos;
                        b_pos = Q;
                    }
                } else if(prKey == 37) { //设置向左按键
                    r = b_pos % 4;
                    if(r == 0) { //判断方格位置
                    } else {
                        count = b_pos + 1;
                        X = fun(count);
                        Z = (parseInt(nam[X].left));
                        nam[X].left = Z - 52; //横向减去一个方格的宽度
                        Q = pos[X];
                        pos[X] = b_pos;
                        b_pos = Q;
                    }
                } else if(prKey == 39) { //设置向右按键
                    ch = b_pos + 3;
                    r = ch % 4;
                    if(r == 0) { //判断方格位置
                    } else {
                        count = b_pos - 1;
                        X = fun(count);
                        Z = (parseInt(nam[X].left));
                        nam[X].left = Z + 52; //横向加上一个方格的宽度
                        Q = pos[X];
                        pos[X] = b_pos;
                        b_pos = Q;
                    }
                } else {
                    alert("禁止使用其他按键!"); //按下其他键位时出现错误提示
                }

                A = false;
                b = 0;
                for(i = 1; i < 16; i++) { //按顺序循环排列方格
                    b++;
                    if(pos[i] == b) {
                        A = true;
                    } else {
                        A = false;
                        break; //排列顺序错误
                    }
                }
                if(A) alert("恭喜,您已过关!"); //成功后出现提示
                function fun(count) {
                    for(var i = 1; i < 16; i++) {
                        if(pos[i] == count) {
                            var X = i;
                        }
                    }
                    return X;
                }
            }
        </script>
    </head>

    <body onLoad="start()">
        <center>
            <div ID="L8" STYLE="position:absolute; left:50px;top:50px;width:50px;height:50px;background-color:blue;">
                <br><b><center><font color=white>8</center> 
            </div>
            <div ID="L6" STYLE="position:absolute; left:102px; top:50px; width:50px; height:50px; background-color:blue;">
            <br><b><center>6</center>       
            </div>
            <div ID="L13" STYLE="position: absolute; left:154px; top:50px; width:50px; height:50px; background-color:blue;">
            <br><b><center>13</center>      
            </div>
            <div ID="L11" STYLE="position:absolute; left:206px; top:50px; width:50px; height:50px; background-color:blue;">
            <br><b><center>11</center>      
            </div>
            <div ID="L10" STYLE="position: absolute; left:50px; top:102px; width:50px; height:50px; background-color:blue;">
            <br><b><center>10</center>      
            </div>
            <div ID="L12" STYLE="position: absolute; left:102px; top:102px; width:50px; height:50px; background-color:blue;">
            <br><b><center>12</center>      
            </div>
            <div ID="L1" STYLE="position: absolute; left:154px; top:102px; width:50px; height:50px; background-color:blue;">
            <br><b><center>1</center>
            </div>
            <div ID="L9" STYLE="position: absolute; left:206px; top:102px; width:50px; height:50px; background-color:blue;">
            <br/><b><center>9</center>      
            </div>
            <div ID="L4" STYLE="position:absolute; left:50px; top:154px; width:50px; height:50px; background-color:blue;">
            <br/><b><center>4</center>      
            </div>
            <div ID="L2" STYLE="position:absolute; left:102px; top:154px; width:50px; height:50px; background-color:blue;">
            <br/><b><center>2</center>      
            </div>
            <div ID="L14" STYLE="position: absolute; left:154px; top:154px; width:50px; height:50px; background-color:blue;">
            <br/><b><center>14</center>     
            </div>
            <div ID="L5" STYLE="position:absolute; left:206px; top:154px; width:50px; height:50px; background-color:blue;">
            <br/><b><center>5</center>      
            </div>
            <div ID="L7" STYLE="position:absolute; left:50px; top:206px; width:50px; height:50px; background-color:blue;">
            <br/><b><center>7</center>      
            </div>
            <div ID="L3" STYLE="position:absolute; left:102px; top:206px; width:50px; height:50px; background-color:blue;">
            <br/><b><center>3</center>      
            </div>
            <div ID="L15" STYLE="position:absolute; left:154px; top:206px; width:50px; height:50px; background-color:blue;">
            <br/><b><center>15</font></center>      
            </div>
        </center>
        <table STYLE="position:absolute; left:280px; top:50px;">
            <tr align=center>
                <td width=40 height=40 bgcolor="#0000ff"><font color="#ffffff">1</td>
                <td width=40 height=40 bgcolor="#0000ff"><font color="#ffffff">2</td>
                <td width=40 height=40 bgcolor="#0000ff"><font color="#ffffff">3</td>
                <td width=40 height=40 bgcolor="#0000ff"><font color="#ffffff">4</td>
            </tr>
            <tr align=center>
                <td width=40 height=40 bgcolor="#0000ff"><font color="#ffffff">5</td>
                <td width=40 height=40 bgcolor="#0000ff"><font color="#ffffff">6</td>
                <td width=40 height=40 bgcolor="#0000ff"><font color="#ffffff">7</td>
                <td width=40 height=40 bgcolor="#0000ff"><font color="#ffffff">8</td>
            </tr>
            <tr align=center>
                <td width=40 height=40 bgcolor="#0000ff"><font color="#ffffff">9</td>
                <td width=40 height=40 bgcolor="#0000ff"><font color="#ffffff">10</td>
                <td width=40 height=40 bgcolor="#0000ff"><font color="#ffffff">11</td>
                <td width=40 height=40 bgcolor="#0000ff"><font color="#ffffff">12</td>
            </tr>
            <tr align=center>
                <td width=40 height=40 bgcolor="#0000ff"><font color="#ffffff">13</td>
                <td width=40 height=40 bgcolor="#0000ff"><font color="#ffffff">14</td>
                <td width=40 height=40 bgcolor="#0000ff"><font color="#ffffff">15</td>
            </tr>
        </table>
    </body>
</html>
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问