用 js 写个自动寻路的贪吃蛇

gaara 发布于2019-08-22 10:45 / 1094人阅读

摘要：前言偶尔看到两年前写的贪吃蛇，当时没把自动寻路的算法写好，蛇容易挂，周末找了个时间把当年的坑填上，写了个不会挂的贪吃蛇。

前言

偶尔看到两年前写的贪吃蛇，当时没把自动寻路的算法写好，蛇容易挂，周末找了个时间把当年的坑填上，写了个不会挂的贪吃蛇。

两年前的版本_点击查看

这次更新的版本_点击查看

代码比较简单,使用 canvas 完成游戏的画图，抛开 A* 算法的实现，整个 html 代码在 300 行以内~
源码：
https://github.com/myfjdthink...

原理说明 不死的方法

首先要找出一个模式可以保持蛇不挂，这个模式就是
“跟着尾巴跑”

如果蛇头和蛇尾是可以连通的，那么就不会挂。
所以只要保证任意时刻蛇头和蛇尾能连通即可。
寻路的伪代码如下：

if(head to  flood){ // 蛇头能连通食物
    模拟蛇吃到食物后的状态
    if(newHead to tail){   // 吃到食物后还能连接尾巴 安全
        eat flood
    }  else {
        // 吃到食物后无法连接尾巴 放弃
        flow tail
    }
} else {
    flow tail   // 跟着尾巴跑
}

在吃食物之前，需要模拟吃到食物后蛇的状态，判断此时蛇是否还能连接尾巴，由此决定是否吃掉食物。

如何找到最短路径

使用 A* 算法可以快速找到俩点之间的最短路径，网上找了个实现，就直接扒下来使用啦。
http://devpro.it/examples/ast...

TODO

目前只是实现了不死，在某些条件下，程序还是会陷入一个循环，这个有空在改进吧，欢迎提 PR。

混合云云服务器 js贪吃蛇视频 js贪吃蛇教学 js贪吃蛇代码视频 js贪吃蛇视频教程

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/91207.html

小白成长日记：写个贪吃蛇

摘要：贪吃蛇并不是通过操作来完成移动的，而是通过记录贪吃蛇的路径来将身体渲染出来。目前没有内置的操作符判断对象的内容是否相同。还是用的vue，本来以为不合适，但想法错了。贪吃蛇并不是通过操作dom来完成移动的，而是通过记录贪吃蛇的路径来将身体渲染出来。一般移动元素，我们都是变动它的css达到目的，但我在写贪吃蛇的时候发现这样很难以实现，参考了网上的资源，发现大部分人是通过记录贪吃蛇的路径...

archieyang 2019-08-21 17:55 评论0 收藏0
SegmentFault 技术周刊 Vol.24 - “游戏” 已启动：Are you ready?

摘要：仅支持开发游戏，因为专注，所以高效。游戏相关的一些概念画布一般来说，做游戏的话基于会比基于性能要好很多，尤其是涉及大量动画的情况下。游戏即将开始这一节我们来完成游戏最核心的场景。我们首先布置了游戏场景，加入了背景音乐。 showImg(https://segmentfault.com/img/bVOxvd?w=900&h=385); 今天是六一国际儿童节，祝小伙伴们六一快乐！本期技术周...

dockerclub 2019-08-05 11:19 评论0 收藏0
用jquery写贪吃蛇

需要具备知识：1.html、css基础2.jquery基础具体实现方法：创建游戏界面 .bts { display: flex; } .bt { width: 60px; height: 24px; line-height: 24px...

gitmilk 2019-08-02 13:59 评论0 收藏0
用jquery写贪吃蛇

需要具备知识：1.html、css基础2.jquery基础具体实现方法：创建游戏界面 .bts { display: flex; } .bt { width: 60px; height: 24px; line-height: 24px...

h9911 2019-08-23 14:20 评论0 收藏0
JS用原型对象写的贪吃蛇，很粗糙的代码

摘要：贪吃蛇类默识贪吃蛇速度，毫秒地图轴分为多少单位地图轴分为多少单位贪吃蛇运动速度贪吃蛇每节身体和食物的宽高地图轴分为多少单位初始化贪吃蛇属性蛇移动方向食物和食物的坐标游戏开始创建地图初始化食物初始化贪吃蛇绑定键盘方向更改贪吃蛇方向移动贪吃蛇创 /** 贪吃蛇类 @author 默识 @param {int} speed 贪吃蛇速度，毫秒 @param {int} x 地图x轴分...

YanceyOfficial 2019-08-20 16:05 评论0 收藏0