跟踪播放器对象构造函数中的Javascript键盘事件

Question

为了学习，我正在做一个简单的JS 2D棋盘游戏。我很难确保玩家的动作被箭头键盘的输入正确地跟踪在控制台上。

假设，我只想限制自己使用左箭头键跟踪任何运动：

下面是相应的构造函数，用于预先定义在板上进行移动的player对象(就像我说的，暂时只在左边)：

​

function Player(name, posY, posX, currentTurn, numberMoves, weapon, previousWeapon) {

  this.name = name;

  this.posY = posY;

  this.posX = posX;

  this.currentTurn = currentTurn;

  this.numberMoves = numberMoves; // counting the number of moves player has made.

  this.weapon = weapon;

  this.locatePosition = function() {

    var l = 0;

    var m = 0;



    for (l = 0; l < mapArray.length; l++) {

      for (m = 0; m < mapArray.length; m++) {



        if ((mapArray[l][m]) === this.number) {

          this.posY = [l];

          this.posX = [m];

          console.log("Player Position Y: " + this.posY + " + position X: " + this.posX);

        }

      }

    }

  }

  //

  this.movement = function() {

    document.onkeydown = (e) => {

      switch (e.which) {

        case 37: // left - 1

          this.numberMoves += 1;

          console.log("player's number of moves made:" + this.numberMoves);

          this.posX = parseInt((this.posX) - 1);

          this.newPosY = this.posY;

          this.newPosX = this.posX;

          console.log("new position: " + this.newPosY + ", " + this.newPosX);

          break;
      }
    }

  };

}

​

但是，稍后，当创建一个对象并尝试使用左键将其移动到板上时，我得到了这个console.message：

新职位:未定义，NaN

为什么？

对于正在进行的这项工作的完整代码：

​

// * / constructor function pre-defining the player objects

function Player(name, posY, posX, currentTurn, numberMoves, weapon, previousWeapon) {
  this.name = name;
  this.posY = posY;
  this.posX = posX;
  this.currentTurn = currentTurn;
  this.numberMoves = numberMoves;
  this.weapon = weapon;
  this.locatePosition = function() {
    var l = 0;
    var m = 0;

    for (l = 0; l < mapArray.length; l++) {
      for (m = 0; m < mapArray.length; m++) {

        if ((mapArray[l][m]) === this.number) {
          this.posY = [l];
          this.posX = [m];
          console.log("Player Position Y: " + this.posY + " + position X: " + this.posX);
        }
      }
    }
  }
  //
  this.movement = function() {
    document.onkeydown = (e) => {
      switch (e.which) {
        case 37: // left - 1
          this.numberMoves += 1;
          console.log("player's number of moves made:" + this.numberMoves);
          this.posX = parseInt((this.posX) - 1);
          this.newPosY = this.posY;
          this.newPosX = this.posX;
          console.log("new position: " + this.newPosY + ", " + this.newPosX);
          break;
      }

    }
  };

}

// * creating two Player Objects
var player1 = new Player("Red Sonja");
var player2 = new Player("Robin");

// array that will be useful for a function that answers the question: "Whose turn is it?": determineInitialTurn
var turnArray = [player1, player2];

//* function that picks a random element of an array, a function we use in determineInitialTurn
function shuffleArray(array) {
  for (var i = array.length - 1; i > 0; i--) {
    var j = Math.floor(Math.random() * (i + 1));
    var temp = array[i];
    array[i] = array[j];
    array[j] = temp;
  }
  return array;
};

function determineInitialTurn() {
  shuffleArray(turnArray);
  turnArray[0].currentTurn = true; // this player will have the first turn.
  turnArray[1].currentTurn = false;
  console.log("Is it " + (turnArray[0].name) + "'s turn? :" + turnArray[0].currentTurn);
};
//constructor for weapon objects
function Weapon(name, posY, posX, force) {

  this.name = name;
  this.posY = posY;
  this.posX = posX;
  this.force = force;
  this.locatePositionWeapon = function() {
    var l = 0;
    var m = 0;
    for (l = 0; l < mapArray.length; l++) {
      for (m = 0; m < mapArray.length; m++) {
        if ((mapArray[l][m]) === 6) {
          this.posY = [l];
          this.posX = [m];
          console.log(this.position + " posY: " + this.posY + " + posX: " + this.posX);
        }
      }
    }
  }
};
// we create 4 weapon objects
var weapon1 = new Weapon("Tank", 10);
var weapon2 = new Weapon("Molotov", 8);
var weapon3 = new Weapon("Gun", 6);
var weapon4 = new Weapon("Bomb", 14);

// simple array where the weapons are listed. needed later in defining movement function.
var weapons = [weapon1, weapon2, weapon3, weapon4];


/*
bi-dimensional array with an initial distribution of elements.
Each number stands for an element in the game:
0 - empty
1 - rocktexture
 */

var mapArray = [ // bi-dimensional array with an initial distribution of elements (each number stands for an element in the game ()
  [0, 1, 0, 0, 0, 0, 0, 0, 0, 0],
  [0, 1, weapon1, 0, player1, 0, 0, 0, 0, 0],
  [0, 1, weapon2, 0, 0, 0, 0, 0, 0, 0],
  [0, 1, 0, 0, 0, 0, 0, 0, 0, 0],
  [0, 1, weapon3, 0, 0, 0, 0, 0, 0, 0],
  [0, 1, 0, 0, player2, 0, 0, 0, 0, 0],
  [0, 1, 0, 0, 0, 0, 0, 0, 0, 0],
  [0, 1, 0, 0, 0, 0, 0, 0, 0, 0],
  [0, 1, 1, weapon4, 0, 0, 0, 0, 0, 0],
];


// function that allows to shuffle the initial distribution of elements to create a random map.
function shuffleMap() {

  function fisherYates(myArray) {
    var i = myArray.length,
      j, tempi, tempj;
    if (i === 0) return false;
    while (--i) {
      j = Math.floor(Math.random() * (i + 1));
      tempi = myArray[i];
      tempj = myArray[j];
      myArray[i] = tempj;
      myArray[j] = tempi;
    }
  }

  mapArray.forEach(fisherYates);
};

// for each number in the array there is a div and we drap the map accordingly.
function drawMap() {

  for (v = 0; v < mapArray.length; v++) {
    for (w = 0; w < mapArray.length; w++) {

      switch ((mapArray[v][w])) {

        case weapon1:
          $('#container').append('<div class="weapon1"></div>');
          break;
        case weapon2:
          $('#container').append('<div class="weapon2"></div>');
          break;
        case weapon3:
          $('#container').append('<div class="weapon3"></div>');
          break;
        case weapon4:
          $('#container').append('<div class="weapon4"></div>');
          break;
        case player1:
          $('#container').append('<div class="player1"></div>');
          break;
        case player2:
          $('#container').append('<div class="player2"></div>');
          break;
        case 0:
          $('#container').append('<div class="empty"></div>');
          break;
        case 1:
          $('#container').append('<div class="rock"></div>');;
          break;
      }
    }
  }
};

// the program

$('document').ready(function() {
  shuffleMap();
  drawMap();
  determineInitialTurn();
  player1.locatePosition();
  player2.locatePosition();
  player1.movement();
  player2.movement();
});

#container {
  width: 40em;
  height: 40em;
  border: 1px solid black;
  background-color: antiquewhite;
}

.empty {
  height: 4em;
  width: 4em;
  position: relative;
  float: left;
  background-color: lawngreen;
}

.rock {
  height: 4em;
  width: 4em;
  position: relative;
  float: left;
  background-image: url("http://img.hb.aicdn.com/91fd74edefe009c9058249832093409b505306dd65e1-h1FZVz_fw658");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 4em;
}

.weapon1 {
  height: 4em;
  width: 4em;
  position: relative;
  float: left;
  background-image: url("https://image.flaticon.com/icons/svg/544/544497.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 4em;
  z-index: 90;
}

.weapon2 {
  height: 4em;
  width: 4em;
  position: relative;
  float: left;
  background-image: url('https://image.flaticon.com/icons/svg/544/544497.svg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: 4em;
  z-index: 90;
}

.weapon3 {
  height: 4em;
  width: 4em;
  position: relative;
  float: left;
  background-image: url("https://image.flaticon.com/icons/svg/544/544497.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 4em;
  z-index: 90;
}

.weapon4 {
  height: 4em;
  width: 4em;
  position: relative;
  float: left;
  background-image: url("https://image.flaticon.com/icons/svg/544/544497.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 4em;
  z-index: 90;
}

.player1 {
  height: 4em;
  width: 4em;
  position: relative;
  float: left;
  background-image: url("https://cdn2.iconfinder.com/data/icons/many-people-flat-icons/128/wonder-women-512.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 4em;
  z-index: 100;
}

.player2 {
  height: 4em;
  width: 4em;
  position: relative;
  float: left;
  background-image: url("https://cdn2.iconfinder.com/data/icons/many-people-flat-icons/128/superman-128.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 4em;
  z-index: 100;
}

<!doctype html>

<html lang="en">

<head>
  <meta charset="utf-8">

  <title>Boarderino</title>
  <meta name="description" content="a simple JS board-game">
  <meta name="author" content="">

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.min.js"></script>
  <script src="js/main.js"></script>
  <link rel="stylesheet" href="css/styles.css">

<!--[if lt IE 9]>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
<![endif]-->
</head>
<body>
  <div id="container"></div>

</body>

</html>

​

Answer 1

this.posX、this.posY、this.numberMoves、this.weapon的值从未给出过值。是的，它们在Person构造函数中被分配了一个值，但是您不传递参数，所以它们仍然是undefined。

当你做的时候你会得到一些东西：

var player1 = new Player("Red Sonja", 0, 0, false, 0);
//                                  ^^^^^^^^^^^^^^^^

...etc。

在您的代码中需要修改/修复更多的内容，但是要列出的太多了。只有几件事：

• 当您已经拥有了locatePosition ( posX，posY )时，函数posY似乎毫无用处。当您知道项目的坐标在哪里时，在整个数组中查找项目是浪费时间的。
• 在基于回合的游戏中，每个玩家的移动次数不应该单独存储，而应该只存储一次。通常存储"ply“号而不是移动号，即单独移动的计数:0表示player1移动，1表示player2移动，2表示player 1移动，...etc。
• 同样，您也不应该在自己的属性中存储这一事实，这是否是一个球员的回合。这应该是一个单独的变量，并且只有一个变量，甚至更好的是从ply (ply % 2)派生出来。
• 在构造函数中，您不应该接受这么多参数。这是不实际的，而且往往也没有必要。相反，为某些属性提供默认值。