[canvas2D] 使用 canvas 实现吃鸡游戏小地图缩圈效果-五八三

什么是“缩圈”

吃鸡类型游戏中，为了增加游戏的紧张感和刺激感，通常会设置一个“缩圈”的机制。每隔一段时间，游戏地图上的安全区域会逐渐缩小，只有在安全区内的玩家才能保证自身的健康值。玩家需要根据小地图上的圆形范围来判断自己是否在安全区内，以避免被淘汰。本文将介绍如何通过代码实现吃鸡游戏中的小地图缩圈效果。

效果展示

码上掘金-仿吃鸡游戏小地图缩圈效果

代码实现

1. 创建一个 canvas 元素

<!DOCTYPE html>

<html lang="zh-CN">

  <head>

    <meta charset="UTF-8" />

    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>吃鸡游戏小地图缩圈效果</title>
    <style>

      canvas {

        background-color: #161823;
      }

    </style>

  </head>

  <body>

    <canvas id="canvas" width="400" height="400"></canvas>

  </body>
</html>

2. 初始化 Canvas

const canvas = document.getElementById('canvas')
const ctx = canvas.getContext('2d')

3. 分析动画效果

缩圈效果可以拆分为两步：

大圈的半径逐渐缩小到和小圈相等
大圈的圆心逐渐往小圈的方向移动

因此，我们需要定义两个圆：

const bigCircle = {
    x: 200,
    y: 200,
    radius: 100
}

const smallCircle = {
    x: 220,
    y: 240,
    radius: 40
}

以及缩圈的时间：

// 缩圈时间(单位：秒)
const DURATION = 5

接下来，我们需要实现缩圈效果：

let startTime // 动画开始时间

function draw(currentTime) {
    // 如果动画开始时间戳未定义，则设置为当前时间戳
    if (!startTime) {
      startTime = currentTime
    }

    // 计算动画进度百分比
    const progress = (currentTime - startTime) / 1000 / DURATION // 除以1000将毫秒转换为秒

    // 如果动画未完成，则继续动画
    if (progress < 1) {
      // 计算当前点的位置
      const currentPoint = {
        x: bigCircle.x + (smallCircle.x - bigCircle.x) * progress,
        y: bigCircle.y + (smallCircle.y - bigCircle.y) * progress
      }


      const currentRadius = bigCircle.radius + (smallCircle.radius - bigCircle.radius) * progress

      // 清除画布并绘制圆形
      ctx.clearRect(0, 0, canvas.width, canvas.height)
      // 绘制大圆
      ctx.beginPath()
      ctx.arc(currentPoint.x, currentPoint.y, currentRadius, 0, Math.PI * 2)
      ctx.strokeStyle = '#00f'
      ctx.stroke()
      // 绘制小圆
      ctx.beginPath()
      ctx.arc(smallCircle.x, smallCircle.y, smallCircle.radius, 0, Math.PI * 2)
      ctx.strokeStyle = '#000'
      ctx.stroke()

      // 继续动画
      requestAnimationFrame(draw)
    }
}

requestAnimationFrame(draw)

最后，我们将所有代码整合起来：

<!DOCTYPE html>

<html lang="zh-CN">

  <head>

    <meta charset="UTF-8" />

    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>仿吃鸡游戏小地图缩圈效果</title>
    <style>

      canvas {

        border: 1px solid #000;
      }

    </style>

  </head>

  <body>

    <canvas id="canvas" width="400" height="400"></canvas>

    <script>
      const canvas = document.getElementById('canvas')
      const ctx = canvas.getContext('2d')


      // 当前安全区(大圈)
      const bigCircle = {
        x: 200,
        y: 200,
        radius: 100
      }

      // 下一个安全区(小圈)
      const smallCircle = {
        x: 220,
        y: 240,
        radius: 40
      }

      // 缩圈时间(单位：秒)
      const DURATION = 5

      let startTime // 动画开始时间

      function draw(currentTime) {
        // 如果动画开始时间戳未定义，则设置为当前时间戳
        if (!startTime) {
          startTime = currentTime
        }

        // 计算动画进度百分比
        const progress = (currentTime - startTime) / 1000 / DURATION // 除以1000将毫秒转换为秒

        // 如果动画未完成，则继续动画
        if (progress < 1) {
          // 计算当前点的位置
          const currentPoint = {
            x: bigCircle.x + (smallCircle.x - bigCircle.x) * progress,
            y: bigCircle.y + (smallCircle.y - bigCircle.y) * progress
          }

          const currentRadius = bigCircle.radius + (smallCircle.radius - bigCircle.radius) * progress

          // 清除画布并绘制圆形
          ctx.clearRect(0, 0, canvas.width, canvas.height)
          // 绘制大圆
          ctx.beginPath()
          ctx.arc(currentPoint.x, currentPoint.y, currentRadius, 0, Math.PI * 2)
          ctx.strokeStyle = '#00f'
          ctx.stroke()
          // 绘制小圆
          ctx.beginPath()
          ctx.arc(smallCircle.x, smallCircle.y, smallCircle.radius, 0, Math.PI * 2)
          ctx.strokeStyle = '#000'
          ctx.stroke()

          // 继续动画
          requestAnimationFrame(draw)
        }
      }

      requestAnimationFrame(draw)
    </script>
  </body>
</html>