打砖块

[goldEli]

打砖块游戏

学习目的

• 如何面向搜索引擎编程
• 代码重构，练习抽象思维
• 熟悉 canvas 使用

Note

• 看完视频后写代码，不要边看边写，或者说直接抄代码。
• 每天结束后，在本 issue 写总结。

学习资料

第一天 直播编程写游戏 - 1

第二天 直播编程写游戏 - 2

第三天 直播编程写游戏 - 3

第四天 直播编程写游戏 - 4

第五天 直播编程写游戏 - 5（场景抽象）

第六天 直播编程写游戏 - 6（面向对象重构）

[CONNLY-J]

第一天：打砖块游戏总结： 游戏和动画、电影原理类似，运动都是连续的，每秒60帧 思路总结： 1、通过canvas画画布，使用drawImage引入图片：canvas.drawImage(img,0,0) 2、添加键盘事件改变挡板x,y的坐标控制挡板左右移动（设置x,y坐标及移动速度） 3、定义小球x y坐标，默认小球不动，设置键盘事件使小球开始移动； 4、判断小球与四周碰撞，碰撞后速度方向改变实现反弹效果； 5、判断小球与挡板碰撞，实现反弹效果 学习到的点： 如何写好代码的原则：最外层只能有函数不能有变量，要有函数入口； 关于函数命名：不返回任何值执行动作的函数以描述这个动作的动词命名； 代码逻辑放在各自的地方，防止污染； 看了课程后学到老师写代码的逻辑，很清楚每一步该做什么样的事情，学习到写代码的这种抽象思维，还需加强锻炼，另外还学习到开发过程中的一些小技巧，了解canvas绘图。 视频课程中小球与挡板以及小球与四周的碰撞检测未从小球左右及上下边缘考虑而只单纯的从小球x，y坐标来检测碰撞，这样会出现小球超出一部分高度和宽度才进行反弹的问题。 代码需优化部分：挡板左右移动距离未考虑画布的边界即挡板左右移动时超出画布边界框 代码完成过程中提出问题：canvas引入图片的大小调节，解决办法：设置sheight或者swidth 小球与挡板碰撞时会出现抽搐移动的现象。

[CONNLY-J]

打砖块游戏第二天： 修改昨天挡板左右移动未限制的问题 新增滑动条控制小球移动速度 新增砖块 各功能逻辑代码应该分别存放，方便管理，使代码看起来简单明了， 今天学习到的点主要是代码bug修改：有bug很正常，修改代码的方法有很多种，可能会通过写很多其他的代码来解决一个bug，比如修复砖块和小球碰撞检测问题，就增加了速度控制，暂停控制等

[CONNLY-J]

学习到要尽量使函数内的变量短一点； 完成的内容主要是新增分数部分，每撞击一次装快score+= 200实现每撞击一次砖块就得200分，然后优化绘图问题； 分数部分比较简单，优化绘图部分要通过名字获取图片然后通过遍历数组的形式，将图片绘制出来，而不是每增加一个砖块就绘制一张图 学习到的点就是canvas获取图片，之前的drawImage方法只能获取当前路径下的图片； 写代码的过程中也出现了很多不细致导致的问题，要定位问题然后解决问题

[CONNLY-J]

为优化碰撞检测，需要检测小球碰撞的各个方向，因此实现对小球的拖拽功能 学习在元素上绑定mousedown、mouseup、mousemove事件 另外要找对学习路径，写代码不是因为所有知识点都会用而是不会的能找到资料然后学会用

[CONNLY-J]

打砖块游戏第五天： 学习到简单的代码重构，当代码量越来越大，逻辑功能越来越复杂的时候进行代码重构有助于开发人员对整个需求进行梳理，如果将所有的代码都写在一个文件夹中，后期要完善功能或者修复缺陷就很难定位到问题所在，进行代码重构之后别人看见代码也更容易理解； 具有相似逻辑功能的代码就可以进行整理，汇总在一起，一个文件中有太多方法也可以进行重构； 增加新功能：游戏结束的判断条件，当小球从底部飞出游戏框时游戏结束，还未考虑砖块消除完毕的情形；canvas中使用drawImage可以绘图，使用fillText可以绘制文本，拥有text，x，y参数，text指定绘制文本的内容，x y为绘制文本的坐标