搖桿與蛇移動的結合！文章底部附完整代碼！前端
效果預覽node
搖桿控制器的實現就很少說了，能夠參考KUOKUO寫的 搖桿控制器！Cocos Creator ！ 我稍微修改了下，改爲typescript版本了。git
先分析需求，蛇移動有什麼特色？github
蛇身每次移動的軌跡，都是蛇頭移動的軌跡。typescript
以咱們小時候在諾基亞玩的貪吃蛇爲例，能夠看到，移動後，每一個蛇身的位置恰好是該蛇身前面一節的位置。編程
因此只要移動到前一個蛇身的位置就能夠了？數組
惋惜並非。微信
那麼爲何會以爲好像是移動一個位置呢？app
由於諾基亞上的貪吃蛇每次移動恰好是一個格子(一節蛇身的長度)。flex
看起來，蛇身的位置和每次移動的距離有關！
因此，能夠用一個數組記錄全部身體要通過的位置點。
假設，蛇的初始狀態是豎直的。
能夠根據蛇的總長度，每次移動的距離，求出全部的移動位置點。
// 蛇總長度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();
以上爲白玉無冰使用 Cocos Creator v2.2.2 開發"搖桿與蛇移動"的技術分享。有什麼想法歡迎留言交流（QQ交流羣 859642112 ）！若是這篇對你有點幫助，歡迎分享給身邊的朋友。
原創不易！轉載請保留文末二維碼和完整代碼獲取方式
完整項目 https://github.com/baiyuwubing/cocos-creator-examples/tree/master/snake
點擊「閱讀原文」查看完整項目
我就知道你「在看」▼
本文分享自微信公衆號 - 白玉無冰（lamyoung-com）。
若有侵權，請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。