JS简单贪吃蛇逻辑

废话开篇：贪吃蛇小 demo

一、展示效果

二、实现步骤

1、屏幕刷新

利用浏览器的 requestAnimationFrame 方法进行刷新重置

2、对象封装

// 位置类
class Rect

这里的 Rect 类会存位置信息，显示出来元素的位置信息都会保存起来，在进行移动或者检测是否吃到食物，都可以用 Rect 对象进行操作。

// 身体类
class Body

身体类主要是处理吃到食物后进行的身体增长操作。

// 食物类
class Food

食物类随机创建散落在屏幕中的食物

这里可以用 static 修饰创建一个类方法，实现随机创建100个食物

// 类方法，创建随机食物
static scatterFoods(){
    let foods = []
    let count = 0;
    while(count < 100) {
        // 要执行的操作
        foods.push(new Food())
        count++;
    }
    return foods;
}

// 蛇类
class Snake

主要是通过屏幕刷新 requestAnimationFrame 事件进行贪吃蛇的移动，在移动过程中进行各种检测

// 移动
move(){
    requestAnimationFrame(() => {
        if(!this.isPause){
            //根据摇杆方向设置下一个蛇头的位置
            this.setNewHeaderDirection()
            //移动
            this.move()
            //检测是否吃到了食物
            this.collisionDetection()
            //检测是否游戏结束或完成
            this.checkIsSucceeded()
        }
    });
}

// 摇杆控制类
class EleOption
class BallOption

通过摇杆控制类实现控制蛇头的行进方向转换。

// 启动
let snake = new Snake()
snake.begin()

三、总结

将功能划分为 “类”，让各自的对象去处理各自的任务，实现起来逻辑就会清晰。主要是用“摇杆”控制方向，利用浏览器的 requestAnimationFrame 方法进行刷新。元素都是 div 标签。