<template>
  <div>
  <div class="container">
    <canvas ref="canvas" width="800" height="600"></canvas>
  </div>

  <div class="controls">
    <label>速度: <input v-model.number="aircraft.speed" type="range" min="1" max="5"></label>
    <label>轨迹长度: <input v-model.number="maxTrail" type="range" min="20" max="100"></label>
  </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      aircraft: {
        x: 400,   // 初始X坐标
        y: 300,   // 初始Y坐标
        speed: 2, // 移动速度
        angle: 0, // 移动角度（弧度）
        size: 8   // 显示大小
      },
      trail: [],    // 轨迹点数组
      maxTrail: 50, // 最大轨迹点数
      ctx: null     // Canvas上下文
    }
  },
  mounted() {
    this.initCanvas()
    this.updatePosition()
    this.animate()

    // 在mounted中添加
    this.$refs.canvas.addEventListener('click', (e) => {
      const rect = e.target.getBoundingClientRect()
      const targetX = e.clientX - rect.left
      const targetY = e.clientY - rect.top

      // 计算新方向角度
      this.aircraft.angle = Math.atan2(
        targetY - this.aircraft.y,
        targetX - this.aircraft.x
      )
    })
  },
  methods: {
    initCanvas() {
      const canvas = this.$refs.canvas
      this.ctx = canvas.getContext('2d')
      // 设置抗锯齿
      this.ctx.imageSmoothingEnabled = true
    },
    // 更新飞行器位置和轨迹
    updatePosition() {
      this.aircraft.angle += 0.02 // 角度渐变
      this.aircraft.x += Math.cos(this.aircraft.angle) * this.aircraft.speed
      this.aircraft.y = 300 + Math.sin(this.aircraft.x * 0.05) * 50

      // 通过三角函数计算新位置
      //this.aircraft.x += Math.cos(this.aircraft.angle) * this.aircraft.speed
      //this.aircraft.y += Math.sin(this.aircraft.angle) * this.aircraft.speed

      // 边界反弹（超出画布时反转角度）
      if (this.aircraft.x < 0 || this.aircraft.x > 800) {
        this.aircraft.angle = Math.PI - this.aircraft.angle
      }
      if (this.aircraft.y < 0 || this.aircraft.y > 600) {
        this.aircraft.angle = -this.aircraft.angle
      }

      // 添加新轨迹点（带时间衰减）
      this.trail.push({
        x: this.aircraft.x,
        y: this.aircraft.y,
        alpha: 1  // 初始透明度
      })

      // 保持轨迹长度不超过最大值
      if (this.trail.length > this.maxTrail) {
        this.trail.shift()
      }

      // 逐渐降低轨迹点透明度
      this.trail.forEach(point => point.alpha *= 0.97)
    },
    // 绘制飞行器
    drawAircraft() {
      this.ctx.save()
      this.ctx.translate(this.aircraft.x, this.aircraft.y)
      this.ctx.rotate(this.aircraft.angle) // 根据移动方向旋转

      // 绘制三角形飞行器
      this.ctx.beginPath()
      this.ctx.moveTo(this.aircraft.size, 0)
      this.ctx.lineTo(-this.aircraft.size/2, this.aircraft.size/2)
      this.ctx.lineTo(-this.aircraft.size/2, -this.aircraft.size/2)
      this.ctx.closePath()
      this.ctx.fillStyle = '#e74c3c'
      this.ctx.fill()

      this.ctx.restore()
    },
    // 绘制轨迹线
    drawTrail() {
      if (this.trail.length < 2) return

      this.ctx.beginPath()
      this.trail.forEach((point, index) => {
        if (index === 0) {
          this.ctx.moveTo(point.x, point.y)
        } else {
          // 根据透明度设置线条样式
          const prev = this.trail[index - 1]
          const gradient = this.ctx.createLinearGradient(
            prev.x, prev.y, point.x, point.y
          )
          gradient.addColorStop(0, `rgba(52, 152, 219, ${prev.alpha})`)
          gradient.addColorStop(1, `rgba(52, 152, 219, ${point.alpha})`)

          this.ctx.strokeStyle = gradient
          this.ctx.lineWidth = 2
          this.ctx.lineTo(point.x, point.y)
          this.ctx.stroke()
        }
      })
    },
    // 动画循环
    animate() {
      this.ctx.clearRect(0, 0, 800, 600) // 清空画布

      // 绘制星空背景
      this.ctx.fillStyle = '#2c3e50'
      this.ctx.fillRect(0, 0, 800, 600)

      this.updatePosition()
      this.drawTrail()
      this.drawAircraft()

      requestAnimationFrame(this.animate)
    }
  }
}
</script>

<style scoped>
.container {
  background: #1a1a1a;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

canvas {
  border: 1px solid #34495e;
  border-radius: 4px;
  box-shadow: 0 0 20px rgba(0,0,0,0.3);
}
</style>
