2.2　第二步：实现页面跳转

我们需要实现的功能是：在页面上展示一段带分支的剧情供玩家选择，选择之后就会跳转到显示游戏结局的相关页面了，可能是个好结局，也可能是个坏结局。先来处理剧情选择页面。编辑index.html文件，在id属性值为1的div元素中，将<q>标签删掉，把程序清单2.3中的粗体代码加进去。

程序清单2.3　实现剧情选择页面所用的代码

这段代码里包含指向其他页面的链接，我们在外围的<div>元素里新建一个<div>，并将其class属性设为slide-text，并在其中放入3个<p>标签。稍后就会设定这个新<div>元素的样式。现在先用程序清单2.4中的代码替换掉id属性值为2和3的那两个div元素。通过下面这段代码可以看出，玩家在执行了选择操作之后，游戏会分别跳转到哪两个页面。

程序清单2.4　实现游戏结局页面所用的代码

在这段代码中，我们略微调整了第二个与第三个页面。由于要用impress.js来展示，所以需要为这两个div元素添加data-x属性。如果不加此属性，那么所有幻灯片都会叠在一起，这就使得三张幻灯片在展示时的优先级相同，而用户只要一点击网页，游戏就会直接调到最后一个页面。在不加此属性的情况下，可以试着把.impress-enabled.step样式中的opacity属性设为1，这样的话，一打开游戏，还没等用户点击鼠标，直接就跳到第三张幻灯片了，而这张幻灯片并不是游戏开始时应该显示的那张。设置好data-x属性后，第二张幻灯片就会置于第一张右侧，而第三张幻灯片则会置于第一张左侧。

与实现第一个页面时所用的代码相似，我们把这两个页面所要展示的主要文本也分别放在一个div元素中，并将其class设为slide-text。由于这两个页面都表示游戏结局，所以还要在页面下方再放一个div元素，将其class设为menu，并在里面添加一个链接，用以跳回到开始页面。

本游戏设计的这两个结局都不太有意思。你可以自己编写一些有趣的故事结局，不过笔者在这里想说的是，这种游戏制作方式之所以很热门，其原因之一就在于开发者很容易就能新增一种结局。只需再增加一张幻灯片，用文字描述出另一种故事结局即可。不需要再为这个结局重新制作一段带音乐的过场动画（cut scene） 。比如，SNES平台上有一款RPG叫做《Chrono Trigger》，该游戏就有许多种结局（而且在通关一次之后，还能以“NewGame+”模式 重玩），此游戏之所以成为经典，不仅因为其剧情、动画、音乐都设计得很精美，而且还因为它给铁杆粉丝们留下了广阔的探索空间。

用这种方式制作游戏时，很容易就能加入新的结局，这样就能在诸多“好结局”与“坏结局”之外，再提供一些平凡的结局留待玩家发现了。稍后就会讲到如何添加新结局，现在先来为刚刚加入的元素设定样式，把程序清单2.5中的代码加到main.css尾部。

程序清单2.5　为幻灯片内部的元素设定样式

这段代码使用的基本上都是标准的CSS。若是不确定某条规则的作用，可以修改其值，看看网页有何变化。要是想快一些尝试各种效果，可以通过Firefox浏览器的firebug或Chrome浏览器的开发者工具来编辑这些值。这段代码除了调整一些简单的视觉样式之外，主要用途是把菜单与页面中的故事区隔开。对于目前这一步来说，在显示故事结局的幻灯片中，菜单里只有一个“START OVER”按钮，不过稍后也可以将这里定义好的样式运用在其他菜单项中。