像蜈蚣一样跟随

Centipede-like div following

本文关键字：一样 跟随 蜈蚣      更新时间：2023-09-26

好了，让我离开这里。

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

这个想法是你点击一个div，当它在竞技场周围移动时，对它造成"伤害"。

最后一关我想要一只蜈蚣。

具体来说，我想要4或6个div 在周围移动时彼此跟随，类似于游戏snake。

我的问题是如何使用可用的语言来做到这一点?(html, css, javascript, jquery)这是可能的吗?如有任何帮助，不胜感激。

这是意识流，我有点累了，但让我们试一试!

我认为你最好的办法是手动管理所有方块的位置。很烦人，但因为这是一个非常非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);
    }
}

显然，你必须弄清楚这里的初始化状态，但渲染基本上应该保持不变。

你可能还需要计算容器的大小，并确保蛇不会超出它的范围，但这应该是一个很好的起点。

相关文章：