在一个2D泡泡龙游戏中如何实现底部发射基座跟随鼠标位置进行旋转？如何实现瞄准线？给出代码

要实现底部发射基座跟随鼠标位置进行旋转，可以使用鼠标事件来获取鼠标位置，然后根据鼠标位置计算旋转角度，并将底部发射基座进行旋转。

以下是一个示例代码：

// 获取画布元素和绘图上下文
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

// 底部发射基座的位置和尺寸
var baseX = canvas.width / 2;
var baseY = canvas.height - 50;
var baseWidth = 100;
var baseHeight = 20;

// 瞄准线的长度和角度
var aimLength = 100;
var aimAngle = 0;

// 监听鼠标移动事件
canvas.addEventListener("mousemove", function(event) {
  // 获取鼠标相对于画布的位置
  var mouseX = event.clientX - canvas.offsetLeft;
  var mouseY = event.clientY - canvas.offsetTop;
  
  // 计算底部发射基座的旋转角度
  aimAngle = Math.atan2(mouseY - baseY, mouseX - baseX);
  
  // 重新绘制画布
  draw();
});

// 绘制画布
function draw() {
  // 清除画布
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  
  // 绘制底部发射基座
  ctx.save();
  ctx.translate(baseX, baseY);
  ctx.rotate(aimAngle);
  ctx.fillStyle = "blue";
  ctx.fillRect(-baseWidth / 2, -baseHeight / 2, baseWidth, baseHeight);
  ctx.restore();
  
  // 绘制瞄准线
  ctx.beginPath();
  ctx.moveTo(baseX, baseY);
  ctx.lineTo(baseX + Math.cos(aimAngle) * aimLength, baseY + Math.sin(aimAngle) * aimLength);
  ctx.strokeStyle = "red";
  ctx.lineWidth = 2;
  ctx.stroke();
}

// 初始化画布
function init() {
  canvas.width = 800;
  canvas.height = 600;
  draw();
}

// 初始化
init();

在上述代码中，我们通过mousemove事件监听鼠标移动，获取鼠标位置，并计算底部发射基座的旋转角度。然后在draw函数中，根据旋转角度绘制底部发射基座和瞄准线。最后在init函数中初始化画布，并调用draw函数进行绘制