2.5　第五步：添加历史记录导航功能

游戏现在看上去还不错，但是其导航功能很有限，因为玩家当前只能按照预订好的流程往下玩。而“历史记录导航” 这一功能则是想把玩家所看过的幻灯片记录下来，以便其可以返回原来那些页面。为实现此功能，我们还得调整impress.js库的源代码，并加入一些html/css代码。不过与上面两步相比，这一步简单多了。

首先需要对impress.js略加修改。这一版看上去和原来差不多，但是updateAfterStep方法会多出来一些代码。添加程序清单2.21中的粗体代码到impress.js文件中。

程序清单2.21　修改impress.js文件，以实现历史记录导航功能

原来我们是把当前这张幻灯片直接加到数组里，而修改后的方法则是新建一个li元素，并于其中创建指向当前幻灯片的链接，然后把这个li元素加到历史记录列表的顶端。

index.html文件中还有两个地方需要略微改动。首先，添加一个名为stepsTaken的列表。然后修改链接，令其直接刷新页面。由于我们已经把道具及道具栏处理好了，所以无须把UI和背景中的所有物件都清理干净，直接刷新页面会更简单些。程序清单2.22中的粗体代码就是要修改的地方。

程序清单2.22　修改index.html文件，以实现历史记录导航功能

本步骤最后要做的，就是把程序清单2.23这段CSS加入main.css之中。

程序清单2.23　历史记录导航列表所用的CSS

修改完这些代码后，用浏览器打开index.html，在浏览过几张幻灯片之后，页面就会像图2.4这个样子，其右侧是历史记录导航列表。

图2.4　已经实现好的历史记录导航功能