Question

Javascript：

$(document).ready(function(){
  let currentKey = {};
  let Player = {
        character: "<span class='player'>&times;</span>"
  };

  let World = {
      x: 1,
      y: 3,
      map: [
        [0,0,0,0,0,0,0,0,0],
        [0,0,0,0,0,0,0,0,0],
        [0,0,0,0,0,0,0,0,0]]
        ,

      drawMap: function(){
        var grid = "<table align='center'>";
        for(var i = 0; i < this.map.length; i++) {
          grid += "<tr>";
          for(var j = 0; j < this.map[i].length; j++){
            grid += `<td class='square' data-x="${this.map[i]}">`;
              this.map[World.x][World.y] = Player.character;
              if(this.map[i][j] !== 0){
                 grid += this.map[i][j];
              }
            grid += "</td>";
          }
          grid += "</tr>";
        }
          grid += "</table>";
        $('#map').append(grid);
      }
  };

    World.drawMap();

    $('.square').click(function(){
       console.log(World.x);
    });
});

HTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"

<html>
<head>
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
    <script type="text/javascript">
    </script>

<link rel="stylesheet" type="text/css" href="css/style.css">
<link href='https://fonts.googleapis.com/css?family=Roboto:400,300italic,300,100italic,100,400italic,500,500italic,700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,400italic,300italic' rel='stylesheet' type='text/css'>
</head>
<body>

    <div id='map'>
    </div>

    <div class="console">
        <span>Command: Player has click coordinate [0][2] 2:25PM</span>
    </div>



</body>
</html>

我想根据您单击的正方形来检索[x] [y]坐标。这样做之后，我想分别将Player.character移到该位置。这样该人就会移到您单击的位置。

在使用PHP之前，我已经很容易地做到了这一点，并且我能够基于坐标在网格中移动玩家。但是我却迷失了如何使用Javascript。

获取X / Y坐标并从2D阵列网格移动播放器

0 个答案: