今天学习《前端篇》第3章完成交互功能的第8课，监听用户事件，让挡板动起来。
学习目标
- 学习控制游戏元素移动；
- 学习监听用户输入，使用鼠标控制游戏元素移动；
- 学习逻辑运算符；
- 学习添加游戏反馈；
- 学习模板字符串。
主要知识点/技能点
- 自闭合的独立标签写法用在诸如img这样的标签上都是合法的，例如但
<img />，用在script标签上却不可以，例如<script>。(会影响一些功能的正常运转) - 动画就是不断改变数据，然后不停重绘。
- 在HTML5中，addEventListener方法用于向指定元素添加事件句柄（event handler，事件句柄是指事件发生时要进行的代码操作，又称事件处理函数），被添加的事件句柄不会覆盖已存在的事件句柄，可以向一个元素添加多个事件句柄。调用语法：
element.addEventListener(event, callback, useCapture)
- Canvas对象的getBoundingClientRect 方法返回画布 Canvas 的四边相对浏览器视窗的位置对象，这个结果是一个 BoundingClientRect 对象，该对象有 6 个属性：top、left、bottom、right、width和 height。
- JS 有 3 种逻辑运算符，包括逻辑与、逻辑非、逻辑或。
- 在多行代码中批量声明变量时，用作分隔符的逗与在多行中宜放在行首。
- 及时反馈在游戏设计中十分重要，可让用户随时了解当前的游戏状态。
- 加号（+）是开发中非常常见的一个操作符，它不仅可以用于四则运算，还可以用于字符串的连接。
- 使用键盘左上角的反引号键（`）将内容括起来，中间使用${xxxXxx}这样的形式插入变量，这是ES6 新增的模板字符串写法。例如：
const sys
实践疑难点
无
小结
使用addEventListener添加事件监听时要注意，添加的监听在不再需要时，要及时移除。
