Question

所以我正在用jQuery，JavaScript和HTML创建一个平台游戏。我想用包含数字的数组创建每个级别。然后每个数字将成为平台游戏的“块”。

例如：

var level = ["10101"];

会创建3个不同的块，每个块都由一个空格分开。

然而，在平台游戏中，数组的每个数字都代表高度，因此2将位于1之上。

看看我要去哪里？

事情是，我不知道如何将一系列div附加到游戏中，以便他们有不同的x位置来填充.game div。

另外，我添加了一个for循环，其中包含一个名为j的变量，但是，如果我取消与j和循环本身有关的任何内容，则代码不起作用......为什么？

我在CodePen上有代码，但这是我到目前为止所做的事情（由于某种原因它在stackoverflow上不起作用）：

重要：CodePen使用SCSS，而不是CSS，我使用SassMeister转换了代码！

$(document).ready(function() {

  var level = ["1112222111111111111"];

  for (var i = 0; i < level.length; i++) {
    for (var j = 0; j < level[i].length; j++) {
      var n = level[i][j];
      var s = $(".block").width();

      if (n === "1") {
        $("<div>", {
          "class": "block pos1" //or any other logic applied to your borad
        }).appendTo(".game");
        $(this).css("left", i * s + "px")
      }

      if (n === "2") {
        $("<div>", {
          "class": "block pos2" //or any other logic applied to your borad
        }).appendTo(".game");
      }
    }
  }





});

.game {
  position: absolute;
  left: calc((100% - 800px)/2);
  height: 500px;
  width: 800px;
  border: 2px solid black;
}
.block {
  background-color: black;
  height: 50px;
  width: 50px;
  position: absolute;
  border: 0.5px solid red;
}
.pos1 {
  bottom: 0;
}
.pos2 {
  bottom: 50px;
}
.pos3 {
  bottom: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="game">

  <!-- examples of positions -->
  <!--<div class = "block pos1"></div>
	<div class = "block pos2"></div>
	<div class = "block pos5"></div>
	<div class = "block pos4"></div>-->

</div>

请帮忙！

谢谢！告诉我是否需要更清楚！

Answer 1

要使用jQuery附加元素，请替换

for(var each in level) {
    level[each].$(".game").append("<div class = 'block pos3'></div>");
}

带

for(var i = 0, length = level.length; i < length; i++){
    $("<div>", {
        "class": "block pos" + level[i] //or any other logic applied to your borad
    }).appendTo(".game");
}

此外，for(var i in obj)用于迭代对象的属性，不保证迭代的元素的序列。对于数组，您应该使用for(var i = 0; i < x; i++) Javascript for loop

从数组创建div

1 个答案: