持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第6天，点击查看活动详情
本篇文章是使用brython做个迷宫小游戏的第三篇，若还没有看过之前的文章，建议先看下后再看本文章，文章如下:
-
使用brython做个迷宫游戏-1：规划/技术栈/创建项目：juejin.cn/post/715585…
-
使用brython做个迷宫游戏-2：制作地图：juejin.cn/post/715624…
本篇文章的核心点为使用brython来监听键盘事件，从而让控制游戏小点移动。
brython如何监听键盘事件
该段落主要的目的是写一个最简单的
demo，不会过多的探讨键盘事件本身。
brython若要监听键盘事件，必须需要一个输入框，类似于input、textarea或者标签元素contenteditable为true的组件。
brython能够监听到的键盘事件为：
keydownkeypresskeyup
整个流程为： 当按下键盘按键时，会触发keydown事件，而后是keypress事件，最后在按键释放时候会触发keyup事件。
那么如何监听键盘事件呢？ 我们可以来写一个demo：
import browser
browser.document <= browser.html.INPUT(id="userInput")
def keydown(ev):
browser.console.log("监听到的键值为: " , ev.code)
browser.document["userInput"].bind("keydown",keydown)
如上代码，我们先定义了一个input标签，使其id为userInput，而后我们将其绑定到一个键盘事件keydown上，绑定的方法为: testKeydownFunction(注意: brython下的方法必须要传入一个event才行哦)。接着在函数中，我们输出键的类型和值。
运行后，我们可以在控制台查看输入的键值信息，例如：
上述demo已经放到了【码上掘金】上，大家可以体验一下：
游戏中如何控制走向
上述，我们已经学会了如何简单的使用键盘事件了，本段落将会将这个带进游戏中。将会学习到如何控制其走向。
在游戏中，我们使用的控制的按键是键盘上的 上下左右 按键，那么在keycode，按键是怎么样的呢？ 其中在brython中，上下左右对应的code如下：
- 上：
ArrowUp - 下：
ArrowDown - 左：
ArrowLeft - 右：
ArrowRight
在监听到上述code后，我们将会判断目前的点位，是否满足其键值所对应的需求，例如：假设有地图如下，红色代码我们目前的点位：
假设目前我们的点位为(3,1),而届时收到了按键事件的code为ArrowDown（向下）的响应，那么我们会判断点位(4,1)是否是允许走动的呢？ 若是允许的，我们将其向下移动便可，那么图将为：
若此时又收到了ArrowRight的需求，但是点位(4,2)是不允许走动的，所以将会失败，即点位还在此处。
控制走动代码实现
此代码是基于之前的文章：使用brython做个迷宫游戏-2：制作地图 。 若还没看过之前的文章，建议先看文章，再回来继续学习。
还记得上一篇文章，我们还留了一个小题么？
聪明的你，能使用brython修改下代码，标注上起始点(红色)和终点(蓝色)么？
其实该起始点，就是我们要移动的点，起始点初始点位在(0,0)处，我们可以定义一个变量来记录当前的点位，而后将其传入到生产地图的方法中，该方法将该点位标记为红色即可。
结合上述方法，我们将生成地图代码改变如下：
这样就能将其点位给列到图上了，如执行后，截图如下：
关于这段代码，我也已经放到了【码上掘金】上了。
看到这里，相信很多小伙伴已经看出来了，所谓的利用键盘走动，其实是我们监听键盘事件后，修改position列表的值，而后通过渲染将其表格给渲染到页面上而已。
整个代码不复杂，代码我已经放到【码上掘金】了，如下：
总结
关于本系列的使用brython，我们已经将整体的核心实现过程讲解了，主要是地图的制作以及监听键盘事件，接下来你可以将这些核心技术组件一下，使用brython来实现自己的走迷宫小游戏了。
怎么样，好玩吧，快动动你的小手指来试试吧。
