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

Question

我需要帮助来修复我的移动代码。我不是那么 javascript 友好。我只是在使用老式的 table 技术和 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>

Answer 1

你的运动条件逻辑有些错误，而且你的代码运行正常。

var Table = document.getElementById("myTable");

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

function keypress(ieKey) {

 var ieKey = event.keyCode;

 var Table = document.getElementById("myTable");

 console.log(Table);

 console.log(ieKey);

 if (ieKey == 40 && bposr != 0){ // for moving down

  console.log(bposr);

  temp = Table.rows[bposr - 1].cells[bposc].innerHTML;
  Table.rows[bposr - 1].cells[bposc].innerHTML = Table.rows[bposr].cells[bposc].innerHTML;
  Table.rows[bposr].cells[bposc].innerHTML = temp;
  Table.rows[bposr].cells[bposc].style.backgroundColor = '#DCDCDC';
  Table.rows[bposr - 1].cells[bposc].style.backgroundColor = '#ffffff';
  bposr--;

 } else if (ieKey == 39 && bposc != 0){  // for moving right

  console.log(bposc);

  temp = Table.rows[bposr].cells[bposc - 1].innerHTML;
    Table.rows[bposr].cells[bposc - 1].innerHTML = Table.rows[bposr].cells[bposc].innerHTML;
    Table.rows[bposr].cells[bposc].innerHTML = temp;
    Table.rows[bposr].cells[bposc].style.backgroundColor = '#DCDCDC';
    Table.rows[bposr].cells[bposc - 1].style.backgroundColor = '#ffffff';
    bposc--;

 } else if (ieKey == 37 && bposc != 3){  // for moving left

  console.log(bposc);

  temp = Table.rows[bposr].cells[bposc + 1].innerHTML;
    Table.rows[bposr].cells[bposc + 1].innerHTML = Table.rows[bposr].cells[bposc].innerHTML;
    Table.rows[bposr].cells[bposc].innerHTML = temp;
    Table.rows[bposr].cells[bposc].style.backgroundColor = '#DCDCDC';
    Table.rows[bposr].cells[bposc + 1].style.backgroundColor = '#ffffff';
    bposc++;

 } else if (ieKey == 38 && bposr != 3){ // for moving up

  console.log(bposr);

  temp = Table.rows[bposr + 1].cells[bposc].innerHTML;
  Table.rows[bposr + 1].cells[bposc].innerHTML = Table.rows[bposr].cells[bposc].innerHTML;
  Table.rows[bposr].cells[bposc].innerHTML = temp;
  Table.rows[bposr].cells[bposc].style.backgroundColor = '#DCDCDC';
  Table.rows[bposr + 1].cells[bposc].style.backgroundColor = '#ffffff';
  bposr++;

  }

}

function start(){
 document.onkeydown = keypress;
}

table, td {
  border:  solid black;
  text-align: center;
  background-color: #DCDCDC;
}

td {
  width: 20px;

}

<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>
</center>

Answer 2

感谢您提供随机化代码。打完之前我看看能不能打得过

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

Trying to implement my movement with left down right and up arrow keys for 15 puzzle game

javascript

sliding-tile-puzzle