双人打僵尸小游戏开发--canvas(三..2)

 

下面，我们一步步的来实现上述的七点需求。

(1): 游戏的开始，我们需要一个函数initCanvas

来初始化游戏世界。具体包括，获取画布，创建并显示人物。代码如下：

 

    // 初始化游戏世界
    const initCanvas = () => {
      const canvasRole: any = document.getElementsByClassName('canvasRole')[0]
      cRole = canvasRole.getContext('2d')
      drawRole(role.x, role.y)
      // const canvasAmmun: any = document.getElementsByClassName('canvasAmmun')[0]
      // cAmmun = canvasAmmun.getContext('2d')
    }

我们所要控制的人物，很显然有着众多的属性，如人物名称、武器、血量、速度、位置.....

在初始化游戏世界的时候，我们会调用drawRole函数，该函数就是根据当前人物role这个对象的属性值，在对应的区域画出人物。为此，我们初始化了一个role对象，游戏界面的信息展示，则直接使用的role的值展示就好了。代码如下：

    const role: Role = {
      name: 'hhvcg',
      x: 100,
      y: 400,
      step: 10,
      blood: 100,
      direction: 'up'
    }
/////////

    // 根据设定坐标，绘制人物

    const drawRole = (x: number, y: number) => {

      if (role.x - role.step < -10 || role.x + role.step > 410 || role.y - role.step < -10 || role.y + role.step > 810) {

        alert('越界')

      } else {

        role.x = x

        role.y = y

        cRole.clearRect(0, 0, WIDTH, HEIGHT)

        cRole.fillStyle = 'black'

        cRole.fillRect(x, y, 20, 20)

      }

    }

其中，Role是我预先定义的一个接口，因为目前本代码所在项目是基于ts版本的。