上一篇《完成简单的HTML5的2D突围赛之二：让球动起来》，我们看到小球跑出可视区域了，今天，我们就让它留在可视区域，来回跑跳。如何实现呢？我们先从检测球是否与边缘碰撞了。

此图片来自网络

简单的碰撞检测

为了检测碰撞，我们要看一下球是否到canvas边缘了，如果这样，就改变它的运动轨迹。

为了计算方便，我们定义一个变量，来作为绘制圆形的半径，代码如下：

var ballRadius=10;

ctx.arc(x, y, ballRadius, 0, Math.PI*2);

我们知道，有四个墙壁来反弹球，我们需要获取球在顶部、底部、左右的条件信息。

我们之前定义的dx, dy 是纵坐标和横坐标的偏移量，如果y+dy<0，则说明球在顶部；如果y+dy>canvas.height，则说明球在底部；同样的x+dx<0，则说明球在左边；x+dx>canvas.width，则说明球在右边。

综上所述，实际效果运行时，会发现，球藏进墙里一部分，说明，球的半径，我们没有处理，需要把ballRadius计算进去。

完整的实例代码

具体的反弹墙的代码

从完整的代码上，我们可以看出，只是修改了一点上节中的代码，就实现了球在canvas的范围里运动的效果。我们来看一下运行结果：

在画布中运行的小球，遇到墙反弹的效果

至此，就介绍完了今天的小节，如果你觉得本文章对你有点帮助，就请关注我吧。更多信息及时获取。

作为一个小游戏，肯定要有人参与进来的，那么鼠标、键盘和小游戏，是怎么互动的呢？欢迎留意下节。

下节预告：键盘操作。（基于此小游戏的系列文章，关注度不高，可能会有调整，敬请期待）

也欢迎大家，评论、转发、收藏。

端开发的火爆兴起，吸引很多人开始学习HTML5，但很多人总是不得其法，学习起来有很多困难。学习不是一蹴而就的，我们不但要花费足够的时间、流下足够的汗水，更重要的是需要有合适的方法。

合理的学习方法能够事半功倍，而不科学的学习方法很可能导致竹篮打水一场空。

零基础学习HTML5在有些人看起来，可能觉得很困难，根本不可能做到，因为自己之前根本没有接触过这方面的知识。其实大家只要找到方法，认真学习，一切知识都是有规律可循的。

大家在学习的过程中，首先应该搭建一个知识框架，它的知识体系是什么？有那些分支？好比搭建一座房子，我们得知道它大概有那些零件，像屋顶、墙壁、柱子、窗户、门等等！

HTML5体系同样如此，在学习HTML和CSS时，会涉及到网页的搭建，我们就可以采用“由全局到细节”、“由整体到部分”、“由外及内”的方法，先搭建一个大的体系再一步步往里面增加细节。

刚开始学习的时候千万不要一直抓着一个细节不放，纠结其中，我们要有整体意识，可以联系前后内容进行融汇贯通。

其次，在学习的时候注意知识的汇总整理，当发现相似的知识点时，一方面是做好辨析工作，另一方面就是可以进行类比学习，寻找相似点，这样学起来可以事半功倍。例如在学习如strong与em，块元素与行元素，同步与异步就可以采用这种方法。

第三，学习过程中要注意知识的积累，各种酷炫的效果都是点滴小程序效果聚集的再放大，所以我们要打好基础，才能做到融汇贯通。 最后，要注重理论联系实际，可以借助生活中的事物去理解抽象的知识点，这样可以帮助我们更好的理解吸收知识，利用生活中实际的事物去辅助抽象知识的学习，能够让我们更好更快的理解和吸收知识。并且要不断实践，理论知识固然重要，但将其运用在具体操作中才是关键，更是我们的目的。前端开发工作本来就是一个将理论转化为现实作品的过程，我们必须做到大量实践联系，才能更好的掌握，写出出色的作品。

自学固然可行，但是一个人孤军作战，总是比不上团队作战。不但耗时长，效果差，而且可能产生很大失误。千锋替你做好学习规划，全程100%面授，让你无忧~