基于排序二叉树的简单游戏

游戏描述

打外星人游戏。外星人坐标记录在排序二叉树上。游戏要求输入想要开炮的横纵坐标，以判断能否击中飞机。如果在10发炮弹限制之内可以击中飞机，则赢。如果不能，失败（外星人步步逼近，最终侵略地球）。游戏过程中，将显示一些信息（如炮弹数目），游戏结束之后也会显示输赢情况。

文件结构

游戏界面设计

  • 大体上分为3个div："title"/"stage"/"pannel"/，分别对应游戏标题、游戏界面、游戏输入输出控制区域。
  • stage为游戏界面，position:relative。游戏主体飞机、外星人、炮弹都在这个div中，且position:absolute。处理相应坐标top/left。
  • 坐标处理考虑图片本身的像素数，简单的计算。
  • 为了使界面居中，对class="center"的选择器添加规则。具体的width在具体选择器中再进行设置：margin-left: auto;margin-right:auto;

游戏逻辑实现

一些知识点

  • querySelector()：Selector API Leve1核心的两个方法之一。可以通过Document或者Element实例调用它们。querySelector()接收一个CSS选择器，返回第一个匹配的元素，如果没有则返回null。详情见《JavaScript高级程序设计》第十一章 DOM扩展部分。
  • addEventListener()/removeEventListener()：DOM2级事件处理，见《JS高程》第十三章。
  • Math.random()方法可生成0到1的伪随机数；Math.floor()方法向下取整。

外星人坐标的处理

  • 设计三个变量处理外星人的坐标
  1. binaryTree对象：排序二叉树的实例。
  2. nodesForAlien数组：数组中每个元素是一个对象存储：key, selected属性。其中selected用于表示当前外星人横坐标是否选中，以表示当前显示的外星人位置横坐标，默认为false。
  3. keys数组：用于存储nodesForAlien的对应坐标信息。以便于随机选取外星人的坐标（总共有20个）。
  • 生成排序二叉树的过程：Math.random()任意生成横坐标数值key；调用binaryTree.insert(key)将其插入到排序二叉树中，与此同时将该值push给nodesForAlien和keys数组。为了使二叉树节点结构和nodesForAlien的基本一致，调用preOrderTraverse(callback)方法遍历二叉树，并创建callback()函数处理得到的节点，为每个节点增加selected属性，默认值为false。
  • 生成第一个外星人的位置：在0到20间选取默认值，通过binaryTree.search(keys[索引]).selected=true;将节点标记为已选择，同时nodesForAlien相应位置也该标记为已选择。接下来改变外星人的位置的操作基本相同，但要记得将已选择状态切换为未选择。

函数

  • clickHandler()/keydownHandler()分别对应click和keydown事件。二者在按下按钮和输入回车的时候触发。调用validateInput()函数。

  • validateInput()函数：验证输入是否合法，即必须是数字且输入坐标不能大于500。若不合法，重新输入；合法，调用playgame()函数。

  • playgame()函数：顾名思义。

    • 监测当前状态并进行处理（改变或者判断）：
      1.剩余子弹数：shotsRemaining
      2.已用子弹数：shotsUsed；
      3.游戏状态gameState：一条综合上述两个信息的字符串。
      4.用户输入坐标X、Y；游戏状态
    • 用户输入坐标的逻辑处理
      1.赋给guessX和guessY
      2.在二叉树上查询guessX
      a.若存在，且该节点被选中，且guessY在适当坐标范围内。则游戏胜利。gameWon=true。进入函数endGame()函数
      b. 若没有击中，且子弹数shotsRemaining耗尽，则游戏失败，进入endGame()函数。
      c. 否则，继续游戏。
    • 继续游戏的逻辑：
      • 改变外星人的坐标值：设外星人有10个候选横坐标在树中，任意选中一个。并适当改变其y坐标，使其接近“地球”。
      • 调用render()函数：重新绘制游戏界面。
      • 当然，可以考虑在控制台输出外星人坐标。

  • render()函数：调用以绘制界面：
    1.游戏进行中：改变外星人、大炮、炮弹的位置。
    2.游戏胜利：外星人图标改成爆炸图标。外星人、炮弹不可见。
    3.注意到：render()必然会运行，因为不在if-else中。且endGame()执行完毕后会有返回的操作。

  • endGame()函数：
    1.显示游戏结果：胜利、失败。
    2.移除事件监听程序。
    3.按钮和输入栏不可用。

链接

GitHub：基于二叉树的小游戏

posted @ 2017-11-11 13:14  nebulium  阅读(965)  评论(0)  编辑  收藏  举报