前言

刚开始是学习前端那会，在熟悉 HTML+CSS+JS 后，我开始尝试去做贪吃蛇游戏。没想到在一顿瞎搞后还真搞出来了一个简陋版的贪吃蛇。哈哈！因为这是我刚开始学习前端的时候做的，所以代码有点简陋，甚至可能存在不合理的地方。大家看的时候须得留心。

实现思路概述

本项目实现思路是非常简单的。即在地图(也就是贪吃蛇可以活动的范围)上，找到一个点做坐标原点，然后将地图划分成一个坐标系。借助坐标系，就可以通过JS来控制HTML元素标签的移动，来实现贪吃蛇的上下左右的移动。此外，通过判断坐标XY值的是否相等实现碰撞判定。

以上就是，贪吃蛇这个游戏的基本实现思路了。

要点分析及大致实现思路讲解

接下来就是分析贪吃蛇这个游戏需要实现的要点。

思考模式

在讲解要点前，我们首先要确定一个思考模式。即：

所有看似很复杂的事物都是由各个较小的事物进行特定排序的组合而成的。

这个思考模式是非常重要的，是我们解决大多数问题的有效方法。就好比搭积木，通过对积木的有效组合(堆叠)，我们就可以搭建出各种各样形状出来。所以，要学会将大一个复杂的问题拆解成多个小的问题。如果小的问题还是很复杂，那就再进行拆解。

贪吃蛇的拆解

在拆解前，我们先要找出贪吃蛇游戏有什么？

贪吃蛇游戏大致上有：

1. 有一个给贪吃蛇活动的地图
2. 有一条可以活动的贪吃蛇
3. 有食物

上面这次查找就是一次拆解划分。当然啦！这是最初浅的拆解。接下来就是基于这3个部分进行拆解

基于地图的拆解

地图，也就是贪吃蛇活动的区域。

那这个区域具体是什么呢？因为这个项目是基于HTML+CSS+Javascript 来实现的。自然而然的，我们就想到在页面中划分一个区域就应该是一个 div 标签了。所以，我们只需要在HTML文件添加一个div标签就可以完成地图的基础构建了。

但是呢！这只是基础构建。上面我们说到，要将地图划分成一个坐标系。这又要怎么做呢？

坐标系的创建

想要创建坐标系就要明白坐标系有什么。

坐标系有：原点、X轴、Y轴

那HTML+CSS+Javascript 有这个三个东西吗？

有的！CSS里面有。

CSS 默认设置position属性的标签的左上角是其子元素标签的参照点。然后借助top、right、bottom和left可以对子元素标签进行移动。

这样，原点(左上角)、X轴(left或right)、Y轴(top或bottom)就出来了。

但在创建坐标系时我们还需要注意一点，这个坐标系是有边界的。这时就有一个问题出现了，这个边界有多宽。

前面我们说到，要基于坐标系来进行碰撞处理。而碰撞的判断标准就是坐标有没有重合。所以，就要保证边界的宽度一定是要蛇的一节蛇身长宽(注意，一节蛇身是一个正方形)的倍数。实际上就是将div划分成由许多个等大的小方格。

对贪吃蛇的拆解

蛇本身的拆解

蛇是由一节节蛇头加蛇身组成的。为了便于实现，我们将蛇头和每节蛇身拆解成一个个正方形，然后将它们首尾相连组成一条贪吃蛇。

蛇的行走

贪吃蛇的行走有一个特点：后一节蛇身跟着前一节蛇身走，第一节蛇身跟着蛇头走。

所以，在实现蛇的行走时需要记录行走前每节蛇身的坐标值，然后依次将前一节的蛇身坐标赋值给后一节的。

上下左右转向的实现

因为贪吃蛇行走的特点，所以控制贪吃蛇的转向只需要控制蛇头的转向就行了。至于蛇头的转向可以通过监听键盘事件来调用相应的转向函数来实现。

食物的拆解

食物本质上也是div。因为要保证碰撞的生效(也就是蛇能有效吃到食物)，所以食物div的大小要跟蛇头一样大。

碰撞的拆解

碰撞时贪吃蛇游戏非常重要的一点。贪吃蛇游戏所有的游戏规则都是通过碰撞来实现的。

碰撞的判定

碰撞的判定很简单，只需要判定蛇头的坐标和碰撞体的坐标是否重合进行。为了保证能准确判断坐标是否重合，我们需要保证的蛇的坐标生成规则、食物的生成规则已经墙壁(坐标系边界)的生成规则一致。

碰撞体

碰撞有三种，分别是：食物、墙壁和蛇身