1小时开发贪吃蛇，原来编程如此简单

本系列实例教程第二趴，作者仅仅想通过一些实际案例，带领大家了解编程，编程其实如此简单。

在学习本教程之前，需要有两个准备，首先，您需要有一点点的编程基础，比如什么是变量、条件判断、循环等。其次，请先玩一玩贪吃蛇这个游戏，如果没有玩过，是不太容易理解其中的一些算法的。

当然，也可以先学习一下第一趴 1小时开发2048，原来游戏如此简单。

我能给您的保证就是，通过本文，您一定可以自己手动编码一个贪吃蛇的游戏，如果不行，请在评论区轰炸我~

材料准备

1. 开发环境准备
2. 代码基础准备
3. 涉及到的样式

1. 开发环境准备

首先，您需要先有一台电脑，如果是手机查看，就算了。。。然后，一个代码编辑器，可以是记事本，也可以是IDEA。这里推荐使用visual studio code编辑器和chrome浏览器。至于visual studio code是啥，请自行百度了。
就是这么简单，开发环境已经准备好了。

2. 代码基础准备

• 完全没有基础的同学，可以先看看w3school关于html的教程、CSS的教程、JS的教程。比较不是仅仅写个hello world，还有需要有一丢丢基础的。
• 教程中，不是使用的原生js，而是基于Jquery进行的编码，使用了一些Jquery的语法，请参考：Jquery的教程

3. 涉及到的样式说明

• width 宽度

• height 高度

• background-color 设置背景颜色

• float 浮动模式

• .content 代表某个标签下class属性为content，是一个css选择器，以下是例子：

<div class="content"></div>

好了，我们开始进入正题，进入编码环节

正式编码，一共分为

1. 页面基础框架编写
2. 样式编写
3. 通过数组展示
4. 向右移动第一颗
5. 通过方向控制移动
6. 多颗如何移动（第一种方法）
7. 多颗如何移动（第二种方法）
8. 随机出现食物
9. 吃到食物如何处理
10. 解决随机出现食物bug
11. 判断游戏失败：出边界
12. 判断游戏失败：撞到自己
13. 处理一些其他bug

1. 页面基础框架编写

详见上图，这是一个最基础的html代码，分为三块，页面、css样式、js逻辑，请参考图中的注释。直接浏览器打开本文件，即可看到效果。（可按F12，调出chrome的控制台）
再次说明，html基础标签和结构，请参考html的教程

2. 样式编写

我们设置整个幕布大小是400px * 400px，每个小块是10 * 10，每行每列就是40个块，一共1600个 。分别定义出蛇身体颜色黑色、蛇头颜色红色、食物颜色绿色。整体样式设置较为交单，具体请参考代码注释，刷新运行，查看效果。

3. 通过数组展示

3.1 思路

多说几句，关于这个小标题，通过数组展示，其实具有了编程思维的同学，应该很好理解，但是对于没有基础的同学，就有点难了，先看这张图：

游戏中贪吃蛇，就是一条蜿蜒的小蛇，沿着自己走过的路，一步一步往前挪动。我们理解其位在一个二维数组中，连续的一系列方格代表蛇。感觉自己没说清楚，但是不理解也没有关系，编程就是，编着编着就会了。先往下看。

3.2 老实孩子的写法

之前通过样式，我们已经清楚了，我们一共是一个40*40，一共1600个格子的二维数组。先来直观的感受下，有多少。

每一行40个0，一共40行，代码冗余了，反正我是看不下去，所以简化它。

3.3 通过循环来初始化

这里我们先定义了一个总的gameArr变量，用于存放所有块，是一个二维数组。Array(40)代表生成了一个40位长度的数组。然后，我们遍历这个数据，目前这个数组还是一维的，里面所有元素都是null&#