评论

贪吃蛇大作战!蛇移动的思考与实现! Cocos Creator!

贪吃蛇大作战!蛇移动的思考与实现! Cocos Creator!

【本文使用图文素材转载自微信公众号: 白玉无冰,作者 白玉无冰

效果预览

摇杆控制器的实现就不多说了,可以参考KUOKUO写的 摇杆控制器!Cocos Creator ! 我稍微修改了下,改成typescript版本了。

先分析需求,蛇移动有什么特点?

蛇身每次移动的轨迹,都是蛇头移动的轨迹。

以我们小时候在诺基亚玩的贪吃蛇为例,可以看到,移动后,每个蛇身的位置刚好是该蛇身前面一节的位置

所以只要移动到前一个蛇身的位置就可以了?

可惜并不是。

那么为什么会觉得好像是移动一个位置呢?

因为诺基亚上的贪吃蛇每次移动刚好是一个格子(一节蛇身的长度)。

看起来,蛇身的位置和每次移动的距离有关!

所以,可以用一个数组记录所有身体要经过的位置点。

假设,蛇的初始状态是竖直的。

可以根据蛇的总长度,每次移动的距离,求出所有的移动位置点。


// 蛇总长度
const snake_length = SNAKE_CELL_SIZE * this._node_snake_body.length;
// 每次移动的距离
const snake_move_delta = SNAKE_SPEED * CELL_TIME;
// 总共点数
const snake_pos_count = Math.ceil(snake_length / snake_move_delta) + 1;
this._snake_pos = [];
// 初始化位置信息,按照蛇头的位置往下排
for (let index = 0; index < snake_pos_count; index++) {
    this._snake_pos.push(cc.v2(this.node_snake_head.x, this.node_snake_head.y - index * snake_move_delta));
}

如何确定某个蛇身的位置?根据索引和移动距离以及身体的大小关系可以求出。


// 每次移动的距离
const snake_move_delta = SNAKE_SPEED * CELL_TIME;
this._node_snake_body.forEach((s, i) => {
    // 计算当前身体在位置中的索引
    const pos_index = Math.floor((i + 1) * SNAKE_CELL_SIZE / snake_move_delta);
    const pos = this._snake_pos[pos_index];
    s.x = pos.x;
    s.y = pos.y;
})

每次移动后,把移动节点的位置信息放在位置点信息数组的最前端,再重新计算蛇身位置就可以了。


this.node_snake_head.x += this._snake_vector.x * SNAKE_SPEED * dt;
this.node_snake_head.y += this._snake_vector.y * SNAKE_SPEED * dt;
this._snake_pos.unshift(cc.v2(this.node_snake_head.x, this.node_snake_head.y));
this.updateSnakeBodyPos();
this._snake_pos.pop();

完整项目  https://github.com/baiyuwubing/cocos-creator-examples/tree/master/snake

【本文使用图文素材转载自微信公众号: 白玉无冰,作者 白玉无冰

最后一次编辑于  03-17  
点赞 0
收藏
评论
登录 后发表内容