Question

我目前正在创建一个基本的javascript汽车赛车，其中汽车是一个放在td中的HTML tr元素。我想要的是，当我按下“e”键时，一个人将移动，如果按下“d”键，则玩家2将移动。我想通过使用eventListener来实现这一点，当按下键时，汽车将从其原始的td元素移动到下一个td元素并从前一个移除汽车。这将使它看起来像汽车已经移动。我不知道如何使用按键移动此元素，但我的代码如下。谢谢你的帮助！

    document.addEventListener('DOMContentLoaded', function() {
  //run the code


	function move = function(player){
		/*
		psuedo code:
		
		if Keypressed = "E"
		then move first car forward
		else d move second car forward
		
		if player1 has moved to the end
		then end the game
		
		else for player 2
		
		set a var to add up the total moves, user can then easily adapted the length of the road and have it match
		the var total. 
		*/
	}

	function keyPress = function(e){
		if (e.charCode == "e"){
			//move player one
		} 
		else if (e.charCode == "d"){
			//move player 2
		}
		else{
			alert("Invalid key stroke");
		}
	}
	
    })

.racer_table td {
  background-color: white;
  height: 50px;
  width: 50px;
  border: 5px;
  border-color: black;
}

.racer_table td.active {
  background-color: black;
}

    <link rel="stylesheet" type = "text/css" href="style.css">
    <script type="text/javascript" src="racer.js"> </script>
    <body>
	  <table class="racer_table">
	  <tr id="player1_strip">
		<td class="active"></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
	  </tr>
	  <tr id="player2_strip">
		<td class="active"></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
	  </tr>
	</table>
</body>

</html>

Answer 1

我会在对象中设置一个var，然后使用jquery的'next'函数为兄弟对象。如果您添加此按钮<button id="x1"/>，这将作为示例：

$("#x1").click(function() {
            var active = $("#player1_strip").children(".active");
              active.next().addClass("active");
              active.removeClass("active");
    });

Answer 2

没有jQuery解决方案。可能还有一些其他的解决方案，不需要id，但我认为这个更干净。您为每个<td>添加了一个ID，例如'tile1e'，'tile2e'等。然后，您的keypress函数将如下所示：

function keyPress = function(e){
    if (e.charCode == "e"){
        var tile = document.querySelector("#player1_strip > .active");  // get player tile
        var nextTile = 'tile' + (tile.id[4] + 1) + 'e';  // get id of the next tile
        tile.className = "";
        document.getElementById(nextTile).className = "active";

    } 
    else if (e.charCode == "d"){
        var tile = document.querySelector("#player2_strip > .active");  // get player tile
        var nextTile = 'tile' + (tile.id[4] + 1) + 'd';  // get id of the next tile
        tile.className = "";
        document.getElementById(nextTile).className = "active";

    }
    else{
        alert("Invalid key stroke");
    }
}

和表格类似

<table class="racer_table">
  <tr id="player1_strip">
    <td id='tile0e' class="active"></td>
    <td id='tile1e'></td>
    <td id='tile2e'></td> <!-- move active to the next empty td element -->
    <td id='tile3e'></td>
    <td id='tile4e'></td>
    <td id='tile5e'></td>
    <td id='tile6e'></td>
    <td id='tile7e'></td>
    <td id='tile8e'></td>
    <td id='tile9e'></td>
  </tr>
  <tr id="player2_strip">
    <td id='tile0d' class="active"></td>
    <td id='tile1d'></td>
    <td id='tile2d'></td>
    <td id='tile3d'></td>
    <td id='tile4d'></td>
    <td id='tile5d'></td>
    <td id='tile6d'></td>
    <td id='tile7d'></td>
    <td id='tile8d'></td>
    <td id='tile9d'></td>
  </tr>
</table>

我希望你能理解这一点。

但是如果您对此感到满意，可以随意使用jQuery解决方案，它会更加简单。

使用JavaScript移动html td元素

2 个答案: