今天练习了一下JS，写了一个吃豆人的小demo

首先定义一个div，用来存放吃豆人的一些元素，我们给他加一个id="game"，然后我们在这div里面添加我们要写的标签。

在这里我们向game里面添加了3堵墙，然后再来编写一下css代码:

css部分用了absolute绝对定位，向浏览器左侧以及顶部隔离50%，然后通过transform属性使其自身反方向移动50%，就可以不用通过设置game的宽高，然后再用margin-left和margin-top的方式来将#game居中。

浏览器效果

接着我们用一个br标签换行，来写第二行和第三行：

把金币和吃豆人的CSS补上去

发现重复的代码有很多，可以简化一下，将#game下面的所有的div标签都设置为行块元素，再设置宽高:

现在，我们在浏览器里面看一下效果：

这样，我们最简单的一个吃豆人小地图就做好了，如果需要更多的墙以及金币的话，都可以通过添加div来实现，但是这种方法很不便捷，并且也不好阅读，下面我们就可以通过js来动态的创建我们的吃豆人地图。

那么如何通过JS来创建吃豆人中元素呢，我们知道，吃豆人中有墙壁，吃豆人，金币以及怪物。比方说，我们通过数组的方式来存放这些元素，1就是墙壁，2就是金币，3当作空白处的背景，4就是吃豆人。(这里我们不涉及到怪物monster)

首先我们定义一个数组:

然后我们通过for循环将数组里面的内容渲染出来：

在上面的代码中，首先定义了一个空的字符串，然后获取到game元素，通过for循环和if判断将对应的元素渲染到页面中。

看一下浏览器的效果：

总所周知，数组里面可以存放任何元素，那么我们可以往数组里面加数组，用一个二维数组的形式，将吃豆人地图弄出来。然后再用for循环将其渲染。

由于我们吃豆人空白背景定义的是黑色，所以我们也将body背景设置为黑色，这样看起来就不突兀。

然后我们在浏览器里面看一下效果：

接下来我们就要实现吃豆人上下左右的移动以及吃掉豆子。

首先我们要弄清楚吃豆人该如何移动，比方说现在吃豆人的位置是在第5行，第6列，如果向右边移动那么就是第5行，第7列，向左边移动就是第5行，第5列。以此类推，左右移动就是行不变，列改变； 上下移动就是列不变，行改变。根据这个思路，我们来写一下代码：

首先要将当前吃豆人的位置获取到

然后我们来创建键盘事件 需要注意的是我们在改变吃豆人位置的时候又会将页面重新渲染，所以我们可以将上面利用for循环渲染的页面的代码写成一个函数

将for循环这段代码写成函数

键盘点击事件

吃豆人的移动加入了边界值的判断，如果说吃豆人的周围都是强的话，是不能再移动的，如果不加这个边界值，那么吃豆人就会超出墙壁，十分无敌。

在移动时，我们在吃豆人的div里面添加了"pacman-right"然后通过改变这个CSS属性去改变吃豆人移动时的状态，相应的，我们也要在CSS里面添加对应的代码:

不用写pacman-right是因为吃豆人默认就是朝向右边。

到这里，我们的吃豆人简单小游戏就制作完成了，我们也可以再添加一些其他的东西，比如说monster幽灵，通过一个计时器来回移动形成对吃豆人的阻挡，也可以通过一定的算法让幽灵去追踪吃豆人。