今天心血来潮，想搞个简单的小游戏玩玩。你知道的，那种不用太复杂，随便点点就能玩的。然后我就想到HTML，这玩意儿我熟，平时工作也经常用到。于是我就开始动手。
准备工作
我得有个想法。做什么游戏？太复杂的肯定不行，我这水平也搞不定。想来想去，就决定是你，贪吃蛇！这游戏简单，而且小时候也经常玩，规则我都记得。
然后，我就打开我的编辑器， 新建一个HTML文件。 名字就叫... 叫"*" 好。
开始写代码
我先用<canvas>标签在页面上整个画布，就像这样：
小编温馨提醒：本站只提供游戏介绍，下载游戏推荐89游戏，89游戏提供真人恋爱/绅士游戏/3A单机游戏大全，点我立即前往》》》绅士游戏下载专区
<canvas id="myCanvas" width="400" height="400"></canvas>
这个画布就是贪吃蛇活动的舞台。有舞台，还得有演员。我又用JavaScript写点代码，用来画蛇和食物。
画蛇和食物，我一开始是用几个小方块表示的。 蛇的身体就是一个个小方块组成的数组， 食物就是一个单独的小方块。
- 第一步：先用JS获取到这个画布，就像这样：
var canvas = *("myCanvas");
var ctx = *("2d");
- 第二步： 我定义一些变量，用来表示蛇的初始位置、长度、移动方向等等。
- 第三步： 画蛇和食物。
我写两个函数，一个叫 drawSnake()，一个叫 drawFood()。drawSnake() 就是用循环把蛇的每个小方块画出来，drawFood() 就是把食物的那个小方块画出来。
让蛇动起来
光画出来还不行，得让蛇能动！这才是游戏的灵魂！
我又写一个 move() 函数。这个函数就是根据蛇的移动方向，改变蛇头的位置，然后把蛇的身体也跟着移动。 移动的时候，我用一个定时器setInterval()，每隔一段时间就调用一次 move() 函数和 draw()，这样蛇看起来就动起来。draw()就是把画布清空，再把蛇和食物重新画一遍。
我还加键盘事件监听，这样我就可以用上下左右键来控制蛇的移动方向。简单来说，就是按下哪个键，就把蛇的移动方向改成对应的方向。
游戏逻辑
蛇能动，接下来就是游戏逻辑。
- 我得判断蛇有没有吃到食物。 吃到食物，蛇的身体就变长，然后食物就随机出现在另一个位置。
- 然后，我得判断蛇有没有撞到墙或者撞到自己。撞到，游戏就结束。
这些判断我都写在 move() 函数里。每次移动之后，都判断一下。
收尾工作
游戏基本功能都有，我还加一点点修饰。
比如，我加一个计分功能，吃到一个食物就加一分。我还加一个游戏结束的提示，游戏结束的时候，会弹出一个框，显示“Game Over!”。
我还把代码稍微整理一下，让它看起来更整洁一些。虽然我写的代码比较粗糙，不过能跑起来就行，哈哈。
这回用HTML写贪吃蛇小游戏，感觉还是挺有意思的。虽然过程磕磕绊绊，中间也查些资料， 不过还是做出来，还是挺有成就感的。下次有空，我还想试试做点别的小游戏！
