个人中心
gpt4 book ai didi

javascript - 尝试使用左、右、上箭头键来实现 15 款益智游戏的移动

转载 作者：太空宇宙 更新时间：2023-11-04 15:48:08 25 4
gpt4 key购买 nike

我需要帮助来修复我的移动代码。我对 javascript 不太友好。我只是使用旧的时尚表技术和 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>

最佳答案

除了您的代码工作正常之外，您在运动条件中存在一些逻辑错误。

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>

关于javascript - 尝试使用左、右、上箭头键来实现 15 款益智游戏的移动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43384830/

25 4 0
文章推荐： c++ - ifstream 获取从 char 到 string 的行更改输出
文章推荐： javascript - 如何使用 Promise 获取多个 Ajax 请求
文章推荐： jquery - 使用 .scroll() 控制变换属性
文章推荐： css - 如何在网格显示的每一行中给出一个列空间
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com