10.6 本章小结

  在本章中,我们介绍了如何编写想要让其运行时才会运行的JavaScript。对于实现延迟之后或者间隔特定时间之后运行的代码,setTimeout函数和setInterval函数都是很不错的。如果想要用户在浏览器中执行了某些动作之后再运行代码,可以使用诸如click或mousemove的事件,但JavaScript中还有很多其他的事件。

在下一章中,我们将介绍如何使用学过的知识来创建一个游戏。

10.7 编程挑战

  下面的这些挑战可以探索使用交互编程的多种方式。

#1 :跟随单击移动

  修改前面的mousemove程序,让标题不再跟着鼠标移动,而只是在单击后才会移动。无论单击页面的什么位置,标题都会移动到单击的位置。

#2:创建自己的动画

  使用setInterval实现h1标题元素在页面上以正方形轨迹移动的动画效果。它应该向右移动200个像素,向下移动200个像素,向左移动200个像素,向上移动200个像素,然后回到起点。提示:需要记录当前的方向(前、后、左、右),才能够知道是否向左或向下增加或减少标题的offset。当到达正方形的一角时,还需要修改这个方向 。

#3:用click取消动画

  在挑战#2的基础上继续构建,为移动的h1元素添加一个单击事件处理程序,以取消这个动画。提示:你可以使用clearInterval函数来取消interval。

#4:创建一个“Click the Header”游戏

  修改挑战#3,以便玩家每次单击标题时,不再停止。而是加速标题的运动,以便越来越难单击它。记录单击标题的次数,并且更新标题文本以显示这个数字。当玩家的单击达到10次时,停止动画,并且把标题文本改为:“You Win”。提示:为了加速,你必须要取消当前的interval,然后开始一个更短时间的interval。