11.5 综合应用

  现在,我们将所有的代码段组合为一个完整的脚本。

《javascript-少儿编程》第11章单击事件处理程序之综合应用

《javascript-少儿编程》第11章单击事件处理程序之综合应用

《javascript-少儿编程》第11章单击事件处理程序之综合应用

  首先,getRandomNumber、getDistance和getDistanceHint这3个函数,我们已经介绍过了。然后,在❶处,设置了所需的变量,width、height和clicks。此后,在❷处,为宝藏创建了随机的位置。

  在❸处,创建了map元素上的单击事件处理程序。这里所做的第一件事情,是给clicks变量加1。然后,在❹处,计算出了event(单击位置)和target(宝藏位置)之间的距离。在❺处,使用函数getDistanceHint将这个距离转换为表示距离的一个字符串(”Cold”、”Warm”等)。在❻处,更新了显示,以便玩家看到距离目标有多远。最后,在❼处,检查距离是否小于8,如果是的,告诉玩家他们获胜了以及用了多少次单击。

  这是游戏的完整的JavaScript代码。如果将这些代码添加到treasure.html中的第二个<script>标签中,应该可以在浏览器中玩这个游戏了!你用了多少次单击才找到宝藏?