JavaScript“if”条件不起作用

时间：2016-12-23 11:05:37

标签： javascript jquery html if-statement dom

我目前正在使用HTML / SCSS和jQuery / JavaScript创建游戏。

我有一个字符div在使用jQuery按键盘箭头时移动。这适用于if语句，该语句定义了玩家可以移动的位置，因此无法摆脱较大的div。

我想创建一个纯JavaScript版本的游戏，玩家可以四处移动，除非我放置if语句，因此它不会离开边界。

这是我的CodePen

这是我的游戏（到目前为止）与jQuery：

var jQueryVersion = function() {
  var game_anim = function() {

    var level = [
      [0, 1, "l", 1, 1, 1, 1, 0, 0, 0, 1, 1, 1, "l", "l", 1],
      [0, 0, 0, 0, 2, 2, 2, 2, 2, 2],
      [0, 0, 0, 0, 0, 3, 3, 0, 3],
    ];

    var $player = $("#player");
    var $game = $("#game");

    for (var i = 0; i < level.length; i++) {
      for (var j = 0; j < level[i].length; j++) {

        var n = level[i][j];

        if (n === 1) {
          $("<div>", {
            "class": "block stone ypos-0 xpos-" + [j]
          }).appendTo("#game");

        }

        if (n === 2) {
          $("<div>", {
            "class": "block stone ypos-1 xpos-" + [j]
          }).appendTo("#game");
        }
        if (n === 3) {
          $("<div>", {
            "class": "block stone ypos-2 xpos-" + [j]
          }).appendTo("#game");

        }

        if (n === 4) {
          $("<div>", {
            "class": "block stone ypos-3 xpos-" + [j]
          }).appendTo("#game");
        }

        if (n === "l") {
          $("<div>", {
            "class": "block lava ypos-" + [i] + " xpos-" + [j]
          }).appendTo("#game");
        }

      }
    }

    $(document).keydown(function(event) { // keycodes: left = 37, right = 39
      if (event.which == 39 || event.which == 68) { // right arrow or D
        if ($player.position().left < $game.width() - $player.width()) {
          $player.css("left", "+=10");
        }
      }
      if (event.which == 37 || event.which == 81 || event.which == 65) { // left arrow or Q on AZERTY or A on QWERTY
        if ($player.position().left > 0) {
          $player.css("left", "-=10");
        }
      }

      if (event.which == 38) {
        if ($player.position().top > 0) {
          $player.css("top", "-=10");
        }
      }
      if (event.which == 40) {
        if ($player.position().top < 500 - $player.height()) {
          $player.css("top", "+=10");
        }
      }

    });


  }

  $(document).ready(function() {

    game_anim();

  });
}
jQueryVersion();
#game {
  position: absolute;
  left: calc((100% - 800px)/2);
  height: 500px;
  width: 800px;
  border: 2px solid black;
}
.block {
  height: 50px;
  width: 50px;
  position: absolute;
}
.stone {
  background-color: black;
}
.lava {
  background-color: red;
}
#player {
  height: 50px;
  width: 50px;
  background-color: #3747C0;
  bottom: 0;
  position: absolute;
}
#player .eyes {
  border-radius: 50%;
  background-color: white;
  position: absolute;
  height: 10px;
  width: 10px;
}
#player .eye_R {
  left: 7px;
  top: 10px;
}
#player .eye_L {
  left: 32px;
  top: 10px;
}
#player .mouth {
  height: 8.5px;
  width: 32px;
  background-color: white;
  border-radius: 5px;
  left: calc((50px - 32px)/2);
  bottom: 10px;
  position: absolute;
}
.ypos-0 {
  bottom: 0px;
  position: absolute;
}
.ypos-1 {
  bottom: 50px;
  position: absolute;
}
.ypos-2 {
  bottom: 100px;
  position: absolute;
}
.ypos-3 {
  bottom: 150px;
  position: absolute;
}
.ypos-4 {
  bottom: 200px;
  position: absolute;
}
.ypos-5 {
  bottom: 250px;
  position: absolute;
}
.ypos-6 {
  bottom: 300px;
  position: absolute;
}
.ypos-7 {
  bottom: 350px;
  position: absolute;
}
.ypos-8 {
  bottom: 400px;
  position: absolute;
}
.xpos-0 {
  left: 0px;
  /*position: absolute;*/
}
.xpos-1 {
  left: 50px;
  /*position: absolute;*/
}
.xpos-2 {
  left: 100px;
  /*position: absolute;*/
}
.xpos-3 {
  left: 150px;
  /*position: absolute;*/
}
.xpos-4 {
  left: 200px;
  /*position: absolute;*/
}
.xpos-5 {
  left: 250px;
  /*position: absolute;*/
}
.xpos-6 {
  left: 300px;
  /*position: absolute;*/
}
.xpos-7 {
  left: 350px;
  /*position: absolute;*/
}
.xpos-8 {
  left: 400px;
  /*position: absolute;*/
}
.xpos-9 {
  left: 450px;
  /*position: absolute;*/
}
.xpos-10 {
  left: 500px;
  /*position: absolute;*/
}
.xpos-11 {
  left: 550px;
  /*position: absolute;*/
}
.xpos-12 {
  left: 600px;
  /*position: absolute;*/
}
.xpos-13 {
  left: 650px;
  /*position: absolute;*/
}
.xpos-14 {
  left: 700px;
  /*position: absolute;*/
}
.xpos-15 {
  left: 750px;
  /*position: absolute;*/
}
.xpos-16 {
  left: 800px;
  /*position: absolute;*/
}
.xpos-17 {
  left: 850px;
  /*position: absolute;*/
}
.xpos-18 {
  left: 900px;
  /*position: absolute;*/
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="game">
  <div id="player">
    <div class="eyes eye_R"></div>
    <div class="eyes eye_L"></div>
    <div class="mouth"></div>
  </div>
</div>

正如您所看到的，角色/玩家可以四处移动，而无需开箱即用。

为什么我的纯JavaScript不能正常工作？

这是与JavaScript相同的项目：

var javascriptVersion = function() {

	var game_anim = function() {

		var level = [
			[0, 1, "l", 1, 1, 1, 1, 0, 0, 0, 1, 1, 1, "l", "l", 1],
			[0, 0, 0, 0, 2, 2, 2, 2, 2, 2],
			[0, 0, 0, 0, 0, 3, 3, 0, 3],
		];

		var player = document.getElementById('player');
		var game = document.getElementById("game");

		var left = 0;
		var top = 0;

		for (var i = 0; i < level.length; i++) {
			for (var j = 0; j < level[i].length; j++) {

				var n = level[i][j];

				if (n === 1) {

					var blocks = document.createElement("div");
					blocks.classList.add("block", "stone", "ypos-0", "xpos-" + j);
					game.appendChild(blocks);

				}

				if (n === 2) {
					var blocks = document.createElement("div");
					blocks.classList.add("block", "stone", "ypos-1", "xpos-" + j);
					game.appendChild(blocks);
				}
				if (n === 3) {
					var blocks = document.createElement("div");
					blocks.classList.add("block", "stone", "ypos-2", "xpos-" + j);
					game.appendChild(blocks);
				}

				if (n === 4) {
					var blocks = document.createElement("div");
					blocks.classList.add("block", "stone", "ypos-3", "xpos-" + j);
					game.appendChild(blocks);
				}

				if (n === "l") {
					var blocks = document.createElement("div");
					blocks.classList.add("block", "lava", "ypos-0", "xpos-" + j);
					game.appendChild(blocks);
				}

			}
		}

		document.addEventListener('keydown', function(event) { // keycodes: left = 37, right = 39
			if (event.keyCode == 39 || event.keyCode == 68) { // right arrow or D
				if (player.style.left < game.style.width - player.style.width) {
					left += 10;
					player.style.left = (parseInt(left) + left) + "px";
				}
			}
			if (event.keyCode == 37 || event.keyCode == 81 || event.keyCode == 65) { // left arrow or Q on AZERTY or A on QWERTY
				if (player.style.left > 0) {
					left -= 10;
					player.style.left = (parseInt(left) + left) + "px";
				}
			}

			if (event.keyCode == 38) {
				if (player.style.top > 0) {
					top -= 10;
					player.style.left = (parseInt(top) + top) + "px";
				}
			}
			if (event.keyCode == 40) {
				if (player.style.top < (500 - player.style.height)) {
					top += 10;
					player.style.left = (parseInt(top) + top) + "px";
				}
			}

		});

	}
	game_anim();
}

javascriptVersion();
#game {
  position: absolute;
  left: calc((100% - 800px)/2);
  height: 500px;
  width: 800px;
  border: 2px solid black;
}

.block {
  height: 50px;
  width: 50px;
  position: absolute;
}

.stone {
  background-color: black;
}

.lava {
  background-color: red;
}

#player {
  height: 50px;
  width: 50px;
  background-color: #3747C0;
  bottom: 0;
  position: absolute;
}
#player .eyes {
  border-radius: 50%;
  background-color: white;
  position: absolute;
  height: 10px;
  width: 10px;
}
#player .eye_R {
  left: 7px;
  top: 10px;
}
#player .eye_L {
  left: 32px;
  top: 10px;
}
#player .mouth {
  height: 8.5px;
  width: 32px;
  background-color: white;
  border-radius: 5px;
  left: calc((50px - 32px)/2);
  bottom: 10px;
  position: absolute;
}

.ypos-0 {
  bottom: 0px;
  position: absolute;
}

.ypos-1 {
  bottom: 50px;
  position: absolute;
}

.ypos-2 {
  bottom: 100px;
  position: absolute;
}

.ypos-3 {
  bottom: 150px;
  position: absolute;
}

.ypos-4 {
  bottom: 200px;
  position: absolute;
}

.ypos-5 {
  bottom: 250px;
  position: absolute;
}

.ypos-6 {
  bottom: 300px;
  position: absolute;
}

.ypos-7 {
  bottom: 350px;
  position: absolute;
}

.ypos-8 {
  bottom: 400px;
  position: absolute;
}

.xpos-0 {
  left: 0px;
  /*position: absolute;*/
}

.xpos-1 {
  left: 50px;
  /*position: absolute;*/
}

.xpos-2 {
  left: 100px;
  /*position: absolute;*/
}

.xpos-3 {
  left: 150px;
  /*position: absolute;*/
}

.xpos-4 {
  left: 200px;
  /*position: absolute;*/
}

.xpos-5 {
  left: 250px;
  /*position: absolute;*/
}

.xpos-6 {
  left: 300px;
  /*position: absolute;*/
}

.xpos-7 {
  left: 350px;
  /*position: absolute;*/
}

.xpos-8 {
  left: 400px;
  /*position: absolute;*/
}

.xpos-9 {
  left: 450px;
  /*position: absolute;*/
}

.xpos-10 {
  left: 500px;
  /*position: absolute;*/
}

.xpos-11 {
  left: 550px;
  /*position: absolute;*/
}

.xpos-12 {
  left: 600px;
  /*position: absolute;*/
}

.xpos-13 {
  left: 650px;
  /*position: absolute;*/
}

.xpos-14 {
  left: 700px;
  /*position: absolute;*/
}

.xpos-15 {
  left: 750px;
  /*position: absolute;*/
}

.xpos-16 {
  left: 800px;
  /*position: absolute;*/
}

.xpos-17 {
  left: 850px;
  /*position: absolute;*/
}

.xpos-18 {
  left: 900px;
  /*position: absolute;*/
}
<div id = "game">
	<div id = "player">
		<div class = "eyes eye_R"></div>
		<div class = "eyes eye_L"></div>
		<div class = "mouth"></div>
	</div>
</div>

感谢您的帮助！

2 个答案:

答案 0 :(得分：1)

正如 Danny Drinkwater 所指出的那样，player.style.left与$player.position().left不同。 javascript等效项为element.offsetLeft。还有一些地方你没有得到与jquery相同的价值。

以下是vanilla js中实现的keydown处理程序示例。

document.addEventListener('keydown', function(event) {
  event.preventDefault();
  if (event.keyCode == 39 || event.keyCode == 68) { // right arrow or D
    if (player.offsetLeft < game.getBoundingClientRect().width - player.getBoundingClientRect().width) {
      left = player.offsetLeft + 10;
      player.style.left = left.toString() + "px";
    }
  }
  if (event.keyCode == 37 || event.keyCode == 81 || event.keyCode == 65) { // left arrow or Q on AZERTY or A on QWERTY
    if (player.offsetLeft > 0) {
      left = player.offsetLeft - 10;
      player.style.left = left.toString() + "px";
    }
  }
  if (event.keyCode == 38) {
    if (player.offsetTop > 0) {
      top = player.offsetTop - 10;
      player.style.top = top.toString() + "px";
    }
  }
  if (event.keyCode == 40) {
    if (player.offsetTop < (500 - player.getBoundingClientRect().height)) {
      top = player.offsetTop + 10;
      player.style.top = top.toString() + "px";
    }
  }
});

答案 1 :(得分：0)

您是否在每个事件监听器的 if 语句中检查了要检查的变量值的 console.log ，以确保值你的jQ和JS版本之间是一样的吗？

例如：

JS版本中的 player.style.left 是否会在jQ版本中返回与 $ player.position（）。left 相同的值？

此外， event.which 会在两个版本之间返回与 event.keyCode 相同的值，例如。

相关问题
最新问题