我的第一个使用canvas+vue实现一个小游戏（持续更新）

<template>
  <view class="compute">
    <canvas
      style="width: 100%; height: 110px; background: #e0e0e0"
      canvas-id="CanvasCompute"
      id="CanvasCompute"
    ></canvas>
    <canvas
      style="width: 100%; height: 10px; background: #e0e0e0"
      canvas-id="CanvasBan"
      id="CanvasBan"
    ></canvas>
    <view class="compute_btn">
      <view class="compute_btn_jump" @touchstart="handleJump">跳跃</view>
      <view
        class="compute_btn_jump"
        @touchstart="handleForward"
        @touchend="handleStop"
        >前进</view
      >
    </view>
  </view>
</template>

<script>
export default {
  name: 'compute',
  data() {
    return {
      ctx: '',
      jump: '',
      // 跳跃点的坐标
      jumpEvent: {
        x: 10,
        y: 100,
      },
      movetimer: '',
      jieliu: true,
      moveforwardtimer: '',
      stoptimer: '',
    }
  },
  onReady() {
    this.handleCreateGam()
  },
  methods: {
    handleCreateGam() {
      const ctx = uni.createCanvasContext('CanvasBan')
      const banArray = [100, 120, 80, 230, 150, 160, 100, 170, 90]
      let sum = 0
      banArray.forEach((item) => {
        ctx.fillRect(sum, 0, 100, 10)
        ctx.setFillStyle('black')
        ctx.draw(true)
        sum += item + 10
      })
      ctx.fillRect()
    },
    // 解释一下： name: canvas的canvas_id，(x1,y1)：出发点坐标，（x2,y2):结束点坐标，color：方框的颜色，（p1，p2）：控制点，width，height方框的高度
    handleCompute( name,  x1, y1, x2, y2, color, p1, p2, width, height, ctx, fun ) {
      ctx = uni.createCanvasContext(name)
      ctx.beginPath()
      ctx.fillRect(x1, y1, width, height)
      let horn = 0
      const timer = setInterval(() => {
        horn += 0.01
        const x = this.twoBezizer(x1, p1, x2, horn)
        const y = this.twoBezizer(y1, p2, y2, horn)
        ctx.setFillStyle(color)
        ctx.fillRect(x, y, width, height)
        ctx.draw()
        if (horn > 1) {
          clearInterval(timer)
          fun()
        }
      }, 10)
    },
    twoBezizer(p0, p1, p2, t) {
      const k = 1 - t
      return k * k * p0 + 2 * (1 - t) * t * p1 + t * t * p2
    },
    handleJump() {
      if (this.jieliu) {
        this.jieliu = false
        clearInterval(this.movetimer)
        clearInterval(this.stoptimer)
        this.handleCompute(
          'CanvasCompute',
          this.jumpEvent.x,
          this.jumpEvent.y,
          this.jumpEvent.x + 50,
          this.jumpEvent.y,
          'yellow',
          this.jumpEvent.x + 25,
          0,
          10,
          10,
          this.jump,
          () => {
            this.jumpEvent.x += 50
            const ctx = uni.createCanvasContext('CanvasCompute')
            ctx.fillRect(this.jumpEvent.x, this.jumpEvent.y, 10, 10)
            ctx.setFillStyle('yellow')
            this.movetimer = setInterval(() => {
              ctx.setFillStyle('yellow')
              ctx.fillRect(--this.jumpEvent.x, this.jumpEvent.y, 10, 10)
              ctx.draw()
              if (this.jumpEvent.x <= 0) {
                clearInterval(this.movetimer)
              }
            }, 10)
            this.jieliu = true
          }
        )
      }
    },
    handleForward() {
      if (this.jieliu) {
        clearInterval(this.movetimer)
        clearInterval(this.stoptimer)
        const ctx = uni.createCanvasContext('CanvasCompute')
        ctx.fillRect(this.jumpEvent.x, this.jumpEvent.y, 10, 10)
        ctx.setFillStyle('yellow')
        this.moveforwardtimer = setInterval(() => {
          ctx.setFillStyle('yellow')
          ctx.fillRect(this.jumpEvent.x++, this.jumpEvent.y, 10, 10)
          ctx.draw()
          if (this.jumpEvent.x >= 375) {
            clearInterval(this.moveforwardtimer)
          }
        }, 10)
      }
    },
    handleStop() {
      if (this.jieliu) {
        clearInterval(this.moveforwardtimer)
        const ctx = uni.createCanvasContext('CanvasCompute')
        ctx.fillRect(this.jumpEvent.x, this.jumpEvent.y, 10, 10)
        ctx.setFillStyle('yellow')
        this.stoptimer = setInterval(() => {
          ctx.setFillStyle('yellow')
          ctx.fillRect(--this.jumpEvent.x, this.jumpEvent.y, 10, 10)
          ctx.draw()
          if (this.jumpEvent.x <= 0) {
            clearInterval(this.stoptimer)
          }
        }, 10)
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.compute {
  .compute_btn {
    display: flex;
    justify-content: center;
    .compute_btn_jump {
      width: 20%;
      margin-top: 20rpx;
      height: 50rpx;
      background-color: #3e7cff;
      border-radius: 50rpx;
      text-align: center;
      line-height: 50rpx;
      color: #fff;
    }
  }
}
</style>