使用brython做个迷宫游戏-3：监听键盘事件

本篇文章的核心点为使用brython来监听键盘事件，从而让控制游戏小点移动。

brython如何监听键盘事件

该段落主要的目的是写一个最简单的demo，不会过多的探讨键盘事件本身。

brython若要监听键盘事件，必须需要一个输入框，类似于input、textarea或者标签元素contenteditable为true的组件。

brython能够监听到的键盘事件为：

• keydown
• keypress
• keyup

整个流程为： 当按下键盘按键时，会触发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已经放到了【码上掘金】上，大家可以体验一下：

code.juejin.cn/pen/7157956…

游戏中如何控制走向

上述，我们已经学会了如何简单的使用键盘事件了，本段落将会将这个带进游戏中。将会学习到如何控制其走向。

在游戏中，我们使用的控制的按键是键盘上的 上下左右 按键，那么在keycode，按键是怎么样的呢？ 其中在brython中，上下左右对应的code如下：

• 上： ArrowUp
• 下：ArrowDown
• 左：ArrowLeft
• 右：ArrowRight

在监听到上述code后，我们将会判断目前的点位，是否满足其键值所对应的需求，例如：假设有地图如下，红色代码我们目前的点位：

假设目前我们的点位为(3,1),而届时收到了按键事件的code为ArrowDown（向下）的响应，那么我们会判断点位(4,1)是否是允许走动的呢？ 若是允许的，我们将其向下移动便可，那么图将为：

若此时又收到了ArrowRight的需求，但是点位(4,2)是不允许走动的，所以将会失败，即点位还在此处。

控制走动代码实现

此代码是基于之前的文章：使用brython做个迷宫游戏-2：制作地图 。 若还没看过之前的文章，建议先看文章，再回来继续学习。

还记得上一篇文章，我们还留了一个小题么？

聪明的你，能使用brython修改下代码，标注上起始点(红色)和终点(蓝色)么？

其实该起始点，就是我们要移动的点，起始点初始点位在(0,0)处，我们可以定义一个变量来记录当前的点位，而后将其传入到生产地图的方法中，该方法将该点位标记为红色即可。

结合上述方法，我们将生成地图代码改变如下：

这样就能将其点位给列到图上了，如执行后，截图如下：

关于这段代码，我也已经放到了【码上掘金】上了。

code.juejin.cn/pen/7157917…

看到这里，相信很多小伙伴已经看出来了，所谓的利用键盘走动，其实是我们监听键盘事件后，修改position列表的值，而后通过渲染将其表格给渲染到页面上而已。

整个代码不复杂，代码我已经放到【码上掘金】了，如下：

code.juejin.cn/pen/7157920…

总结

关于本系列的使用brython，我们已经将整体的核心实现过程讲解了，主要是地图的制作以及监听键盘事件，接下来你可以将这些核心技术组件一下，使用brython来实现自己的走迷宫小游戏了。

怎么样，好玩吧，快动动你的小手指来试试吧。