Question

好的，我在这里。

我正在使用javascript和jquery为网络浏览器制作一个bug对战游戏。

这个想法是你点击一个div，因为它在一个竞技场周围移动以造成“伤害”。它。

最后一级，我想要一只蜈蚣。

具体来说，当他们在竞技场中移动时，我想要4个或6个跟随的div，类似于游戏 snake 。

我的问题是我如何使用可用的语言来做到这一点？ （html，css，javascript，jquery）有可能吗？任何帮助都将非常感激。

Answer 1

这是有意识的流，我有点累，但是我们可以试一试！

我认为你最好的选择是你必须手动管理所有方块的位置。很烦人，但因为这是一个非常非html的布局，这是你最好的选择。

对于控件，您的HTML将是这样的。基本上是一个有6个div的容器，代表蛇的身体部位。在我的情况下，0是头。

<div class="container">
  <div class="snakePart0" onclick="moveSnake()"><div>
  <div class="snakePart1"><div>
  <div class="snakePart2"><div>
  <div class="snakePart3"><div>
  <div class="snakePart4"><div>
  <div class="snakePart5"><div>
</div>

现在css就是这样的，这样当你设置每个蛇形部分的左侧和顶部时，它就会定位到位。

.container {
  position: relative; // allows top and left on the child elements to work
}
.snakePart0,
.snakePart1,
.snakePart2,
.snakePart3,
.snakePart4,
.snakePart5,{
   box-sizing: border-box;
   position: absolute;
   width: 10px;
   height: 10px;
   border: 1px solid black;
}

最后你的javascript会是这样的：

var snakePosition = [{0,0},{0,10},{0,20},{0,30},{0,40},{10,40}];
function moveSnake() {
    // removes the last element from the snake since we are moving it
    snakePosition.splice(-1,1);

    // Do some math to make sure your new position of the front of the head doesn't overlap another portion of the snake
    snakePosition.splice(0, 0, {
        top: snakePosition[0].top + math;
        left: snakePosition[0].left + math;
    });        

    // finally rerender the whole snake
    for (var i = 0; i < snakePosition.length; i++) {
       $(".snakePart"+i).top(snakePosition.top);
       $(".snakePart"+i).left(snakePosition.left);
    }
}

显然你必须在这里找出初始化状态，但渲染基本上应该保持不变。

此外，你的数学可能需要调整容器的大小，并确保蛇不会超出它的范围，但这应该是一个很好的起点。