第11章 寻找埋藏的宝藏

  让我们把目前已经学到的知识很好地利用起来,来开发一款游戏。这款游戏的目标是找到埋藏的宝藏。在游戏中,Web页面将显示一张藏宝图。在地图中,游戏将会选取一个单个的像素位置,这表示埋藏保障的地方。每次玩家单击地图,Web页面都会告诉他距离宝藏有多近。当他们单击到宝藏的位置(或者距离宝藏很近),游戏就会祝贺他们找到了宝藏,并且指出用了多少次单击才找到宝藏。图11-1展示了在玩家单击地图之后游戏的样子。

《javascript-少儿编程》第11章寻找埋藏的宝藏之设计游戏

图11-1 寻找埋藏的宝藏的游戏

11.1 设计游戏

  在开始编写代码之前,先将游戏的整体结构分析一遍。要构建这款游戏,需要有一些步骤,这样当玩家单击藏宝图的时候,游戏才会响应。

  1、 创建一个Web页面,它带有一幅图像(藏宝图)以及一个向玩家显示消息的地方。

  2、 在地图图片上选取一个随机的点来埋藏宝藏。

  3、 创建一个单击事件处理程序。每次玩家单击地图,这个单击事件处理程序都会如下的事情:

  a. 将单击计数加。

  b. 计算单击位置距离宝藏位置有多远。

  c. 在Web页面上显示一条消息,告诉玩家他们是热还是冷。

  d. 如果玩家在宝藏上单击或者距离宝藏很近,恭喜玩家,并且显示他们用了多少次单击找到了宝藏。

  我将展示如何实现游戏中的这些功能的每一项,然后,再来浏览完整的代码。