VUE+Canvas实现上吊火柴人猜单词游戏

在网上偶尔看到上吊火柴人猜单词游戏，游戏很简单，首先单词是隐藏的，用户开始键盘输入字母，如果包含这个字母，就显示出来，如果猜错了，上吊的小人就画出一笔，直到小人全部画完整了时还没猜出单词的全部，就算输。

游戏简单，其实实现也很简单，这里就用vue+canvas来实现，当然了，用JQ或者SVG实现都可以，大同小异~~

主体当然分为2块：1、分步骤画出上吊的小人   2、随机单词伴随用户输入的显示

这里就先来实现画上吊的火柴人：

（1）上吊的架子：

吊小人的架子很简单，就是几条直线，注意canvas的（0,0）坐标是在左上角，然后根据长宽画出自己想要的架子就行了，这里作为初始化代码写入函数init()中

<canvas id="canvas" width="500" height="500"></canvas>
....
init() {
      this.step = 0;
      this.wrongWordsArr = [];
      this.rightWordsArr = [];
      let container = document.getElementById("canvas");
      let ctx = container.getContext("2d");
      ctx.clearRect(0,0,500,500);
      ctx.strokeStyle = "#FFF";
      ctx.lineWidth = 5;
      ctx.lineCap = "round";
      ctx.beginPath();
      ctx.moveTo(100, 450);
      ctx.lineTo(200, 450);
      ctx.moveTo(150, 450);
      ctx.lineTo(150, 50);
      ctx.lineTo(300, 50);
      ctx.lineTo(300, 100);
      ctx.stroke();

      this.createWords();
},

接下来就是画上吊的火柴人，因为是输错了字母就得画一笔，所以要把笔数拆分到switch-case中，用step计数当前应画的笔数步骤：

drawMan() {
      let container = document.getElementById("canvas");
      var ctx = container.getContext("2d");
      ctx.strokeStyle = "#FFF";
      ctx.lineWidth = 5;
      ctx.lineCap = "round";
      ctx.beginPath();
      switch (this.step) {
        case 0: 
          ctx.arc(300, 140, 40, 0, 2 * Math.PI);
          ctx.stroke();