Fatal编程技术网
  • javascript/
  • Javascript 尝试用15个益智游戏的左下右上箭头键来实现我的移动

Javascript 尝试用15个益智游戏的左下右上箭头键来实现我的移动

javascript

Javascript 尝试用15个益智游戏的左下右上箭头键来实现我的移动,javascript,sliding-tile-puzzle,Javascript,Sliding Tile Puzzle,我需要帮助修复我的移动代码。我不是那么友好。我只是在使用老式的时尚表格技术和javascript。我不能使用任何jquery或其他来源。代码如下： <html> <head> <style> table, td { border: solid black; text-align: center; background-color: #DCDCDC; } td { width: 20px; } </style>

我需要帮助修复我的移动代码。我不是那么友好。我只是在使用老式的时尚表格技术和javascript。我不能使用任何jquery或其他来源。代码如下：

<html>
<head>
<style>
table, td {
    border:  solid black;
    text-align: center;
    background-color: #DCDCDC;
}

td {
    width: 20px;

}


</style>


<script>

var bposr =3; // blank position : row
var bposc=3;  // blank position : column


function keypress() {
var ieKey = event.keyCode;



     if (ieKey == 40 && bposr!=0){ // for moving down
        temp= document.getElementById("myTable").rows[bposr-1].cells[bposc].innerHTML;
        document.getElementById("myTable").rows[bposr-1].cells[bposc].innerHTML=document.getElementById("myTable").rows[bposr].cells[bposc].innerHTML;
        document.getElementById("myTable").rows[bposr].cells[bposc].innerHTML=temp;
        document.getElementById("myTable").rows[bposr].cells[bposc].style.backgroundColor='#DCDCDC';
       document.getElementById("myTable").rows[bposr-1].cells[bposc].style.backgroundColor='#ffffff';
        bposr--;
   }

    else if (ieKey == 37 && bposc!=1){  // for moving right
        temp= document.getElementById("myTable").rows[bposr].cells[bposc+1].innerHTML;
        document.getElementById("myTable").rows[bposr].cells[bposc+1].innerHTML=document.getElementById("myTable").rows[bposr].cells[bposc].innerHTML;
        document.getElementById("myTable").rows[bposr].cells[bposc].innerHTML=temp;
        document.getElementById("myTable").rows[bposr].cells[bposc].style.backgroundColor='#DCDCDC';
       document.getElementById("myTable").rows[bposr].cells[bposc+1].style.backgroundColor='#ffffff';
        bposc++;

    }

    else if (ieKey == 39 && bposc!=1){  // for moving left
        temp= document.getElementById("myTable").rows[bposr].cells[bposc+1].innerHTML;
        document.getElementById("myTable").rows[bposr].cells[bposc+1].innerHTML=document.getElementById("myTable").rows[bposr].cells[bposc].innerHTML;
        document.getElementById("myTable").rows[bposr].cells[bposc].innerHTML=temp;
        document.getElementById("myTable").rows[bposr].cells[bposc].style.backgroundColor='#DCDCDC';
       document.getElementById("myTable").rows[bposr].cells[bposc+1].style.backgroundColor='#ffffff';
        bposc++;

    }

else if (ieKey == 38 && bposr!=0){ // for moving down
        temp= document.getElementById("myTable").rows[bposr-1].cells[bposc].innerHTML;
        document.getElementById("myTable").rows[bposr-1].cells[bposc].innerHTML=document.getElementById("myTable").rows[bposr].cells[bposc].innerHTML;
        document.getElementById("myTable").rows[bposr].cells[bposc].innerHTML=temp;
        document.getElementById("myTable").rows[bposr].cells[bposc].style.backgroundColor='#DCDCDC';
       document.getElementById("myTable").rows[bposr-1].cells[bposc].style.backgroundColor='#ffffff';
        bposr--;
   }

}

function start(){
                document.onkeydown = keypress;
                }
</script>

</head>


<body onLoad="start()">
<center>
<table id="myTable">


  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
  </tr>

  <tr>
    <td>5</td>
    <td>6</td>
    <td>7</td>
    <td>8</td>
  </tr>

  <tr>
    <td>9</td>
    <td>10</td>
    <td>11</td>
    <td>12</td>
  </tr>

  <tr>

    <td>13</td>
    <td>14</td>
    <td>15</td>
    <td style="background-color:white;"></td>
  </tr>
</table>
<br> 




</body>
</html>


表，td{
边框：纯黑；
文本对齐：居中；
背景色：#DCDC；
}
运输署{
宽度：20px；
}
var bposr=3；//空白位置：行
var bposc=3；//空白位置：列
功能按键（）{
var ieKey=event.keyCode；
如果（ieKey==40&&bposr！=0）{//用于向下移动
temp=document.getElementById（“myTable”）.rows[bposr-1]。cells[bposc]。innerHTML；
document.getElementById（“myTable”）.rows[bposr-1]。cells[bposc]。innerHTML=document.getElementById（“myTable”）.rows[bposr]。cells[bposc]。innerHTML；
document.getElementById（“myTable”）.rows[bposr].cells[bposc].innerHTML=temp；
document.getElementById（“myTable”）.rows[bposr].cells[bposc].style.backgroundColor='#dcdc'；
document.getElementById（“myTable”）.rows[bposr-1]。cells[bposc]。style.backgroundColor='#ffffff'；
bposr--；
}
如果（ieKey==37&&bposc！=1）{//向右移动
temp=document.getElementById（“myTable”）.rows[bposr]。cells[bposc+1]。innerHTML；
document.getElementById（“myTable”）.rows[bposr]。单元格[bposc+1]。innerHTML=document.getElementById（“myTable”）.rows[bposr]。单元格[bposc]。innerHTML；
document.getElementById（“myTable”）.rows[bposr].cells[bposc].innerHTML=temp；
document.getElementById（“myTable”）.rows[bposr].cells[bposc].style.backgroundColor='#dcdc'；
document.getElementById（“myTable”）.rows[bposr]。cells[bposc+1]。style.backgroundColor='#ffffff'；
bposc++；
}
else如果（ieKey==39&&bposc！=1）{//向左移动
temp=document.getElementById（“myTable”）.rows[bposr]。cells[bposc+1]。innerHTML；
document.getElementById（“myTable”）.rows[bposr]。单元格[bposc+1]。innerHTML=document.getElementById（“myTable”）.rows[bposr]。单元格[bposc]。innerHTML；
document.getElementById（“myTable”）.rows[bposr].cells[bposc].innerHTML=temp；
document.getElementById（“myTable”）.rows[bposr].cells[bposc].style.backgroundColor='#dcdc'；
document.getElementById（“myTable”）.rows[bposr]。cells[bposc+1]。style.backgroundColor='#ffffff'；
bposc++；
}
else如果（ieKey==38&&bposr！=0）{//用于下移
temp=document.getElementById（“myTable”）.rows[bposr-1]。cells[bposc]。innerHTML；
document.getElementById（“myTable”）.rows[bposr-1]。cells[bposc]。innerHTML=document.getElementById（“myTable”）.rows[bposr]。cells[bposc]。innerHTML；
document.getElementById（“myTable”）.rows[bposr].cells[bposc].innerHTML=temp；
document.getElementById（“myTable”）.rows[bposr].cells[bposc].style.backgroundColor='#dcdc'；
document.getElementById（“myTable”）.rows[bposr-1]。cells[bposc]。style.backgroundColor='#ffffff'；
bposr--；
}
}
函数start（）{
document.onkeydown=按键；
}
1.
2.
3.
4.
5.
6.
7.
8.
9
10
11
12
13
14
15
移动条件中存在一些逻辑错误，而且代码工作正常

var Table=document.getElementById（“myTable”）；
var bposr=3；//空白位置：行
var bposc=3；//空白位置：列
功能按键（ieKey）{
var ieKey=event.keyCode；
var Table=document.getElementById（“myTable”）；
控制台日志（表）；
控制台日志（ieKey）；
如果（ieKey==40&&bposr！=0）{//用于向下移动
控制台日志（bposr）；
temp=Table.rows[bposr-1]。单元格[bposc]。innerHTML；
Table.rows[bposr-1]。单元格[bposc]。innerHTML=Table.rows[bposr]。单元格[bposc]。innerHTML；
Table.rows[bposr].cells[bposc].innerHTML=temp；
Table.rows[bposr].cells[bposc].style.backgroundColor='#dcdc'；
Table.rows[bposr-1]。单元格[bposc]。style.backgroundColor='#ffffff'；
bposr--；
}如果（ieKey==39&&bposc！=0）{//向右移动
控制台日志（bposc）；
temp=Table.rows[bposr].cells[bposc-1].innerHTML；
Table.rows[bposr]。单元格[bposc-1]。innerHTML=Table.rows[bposr]。单元格[bposc]。innerHTML；
Table.rows[bposr].cells[bposc].innerHTML=temp；
Table.rows[bposr].cells[bposc].style.backgroundColor='#dcdc'；
Table.rows[bposr].cells[bposc-1].style.backgroundColor='#ffffff'；
bposc--；
}else如果（ieKey==37&&bposc！=3）{//向左移动
控制台日志（bposc）；
temp=Table.rows[bposr]。单元格[bposc+1]。innerHTML；
Table.rows[bposr]。单元格[bposc+1]。innerHTML=Table.rows[bposr]。单元格[bposc]。innerHTML；
Table.rows[bposr].cells[bposc].innerHTML=temp；
Table.rows[bposr].cells[bposc].style.backgroundColor='#dcdc'；
Table.rows[bposr]。单元格[bposc+1]。style.backgroundColor='#ffffff'；
bposc++；
}else如果（ieKey==38&&bposr！=3）{//用于向上移动
控制台日志（bposr）；
temp=Table.rows[bposr+1]。单元格[bposc]。innerHTML；
Table.rows[bposr+1]。单元格[bposc]。innerHTML=Table.rows[bposr]。单元格[bposc]。innerHTML；
Table.rows[bposr].cells[bposc].innerHTML=temp；
Table.rows[bposr].cells[bposc].style.backgroundColor='#dcdc'；
Table.rows[bposr+1]。单元格[bposc]。style.backgroundColor='#ffffff'；
bposr++；
}
}
函数start（）{
document.onkeydown=按键；
}
表格，td{
边框：纯黑；
文本对齐：居中；
背景色：#DCDC；
}
运输署{
宽度：20px；
}

1.
2.
3.
4.
5.
6.
7.
8.
9
10
11
12
13
14
15
谢谢你的随机代码。在我完成之前，我会看看它是否可以打败。

有什么错误？它应该做什么？我需要一个空的白块，以便能够在顺序中移动，我正在尝试随机启动它，并且你在设定数字的状态下获胜。我只是在设置撞击墙壁时的边界时遇到了麻烦。举个例子，如果我按左键k