function spawnEnemy(n) { setInterval(() => { for (let idx = 0; idx < n; idx++) { let radius = Math.random() * (20 - 4) + 8; let x = Math.random() * canvas.width - radius; let y = Math.random() * canvas.height + radius; let color = hsl(${Math.floor(Math.random() * 360)},70%,50%); let angle = Math.atan2(player.y - y, player.x - x); let vector = { x: Math.cos(angle) * 2, y: Math.sin(angle) * 2, }; let enemyObj = new Enemy(x, y, radius, color, vector); enemyArrays.push(enemyObj); } }, 1000); } function animate() { if (!gameStarted) { // 如果游戏未开始，不执行游戏逻辑 return; } player.draw(ctx); ctx.fillStyle = "rgba(0,0,0,0.2)"; // ctx.clearRect(0,0,canvas.width,canvas.height); ctx.fillRect(0, 0, canvas.width, canvas.height); enemyArrays.forEach((enemy, idx) => { enemy.draw(ctx); enemy.update(); // 判断,从enemyArrays数组中删除 if (enemy.x <= 0 || enemy.x >= canvas.width || enemy.y <= 0 || enemy.y >= canvas.height) { enemyArrays.splice(idx, 1); } }); //shell shellArrays.forEach((shell, idx) => { shell.draw(ctx); shell.update(); enemyArrays.forEach((enemy, j) => { // 碰撞判断 let distance = Math.hypot(shell.x - enemy.x, shell.y - enemy.y); if (distance < 20) { enemyArrays.splice(j, 1); shellArrays.splice(idx, 1); createParticle(particleNum, enemy.x, enemy.y, enemy.color); score += 10; scoreText.innerHTML = 'Score: ' + score; } }); // 范围判断 if (shell.x <= 0 || shell.x >= canvas.width || shell.y <= 0 || shell.y >= canvas.height) { shellArrays.splice(idx, 1); } }); // 粒子 particleArrays.forEach((particle, idx) => { particle.draw(ctx); particle.update(); if (particle.alpha <= 0.1) { particleArrays.splice(idx, 1); } }); window.requestAnimationFrame(animate); } // 创建粒子 function createParticle(n, x, y, color) { for (let i = 0; i < n; i++) { let vector = { x: Math.random() * 3 - 1.5, y: Math.random() * 3 - 1.5, }; particleArrays.push(new Particle(x, y, 3, color, 1, vector)); } } function handleClick() { window.addEventListener("click", (e) => { let x = e.clientX; let y = e.clientY; let color = "white"; let radius = 10; let radian = Math.atan2(y - player.y, x - player.x); let vector = { x: Math.cos(radian) * 6, y: Math.sin(radian) * 6, }; let shell = new Shell(player.x, player.y, radius, color, vector); shellArrays.push(shell); }) } 子弹和敌人的运动方向是怎么产生的

子弹和敌人的运动方向都是由一个向量(vector)来确定的。在生成敌人时，先计算出敌人所在位置和玩家位置的夹角(angle)，然后用 Math.cos 和 Math.sin 函数计算出 x 和 y 方向上的速度分量，最终得到一个向量。这个向量就是敌人的运动方向。在生成子弹时，点击鼠标事件获取鼠标位置(x,y)，再计算出鼠标位置和玩家位置的夹角(radian)，同样用 Math.cos 和 Math.sin 函数计算出 x 和 y 方向上的速度分量，最终得到一个向量。这个向量就是子弹的运动方向。

相关问题

web前端开发打地鼠小游戏HTML+CSS+JS

好的，我可以为您提供一些简单的代码示例来实现打地鼠小游戏。

HTML 部分：

<div class="game-container">
  <div class="score">得分：<span id="score">0</span></div>
  <div class="hole hole1"></div>
  <div class="hole hole2"></div>
  <div class="hole hole3"></div>
  <div class="hole hole4"></div>
  <div class="hole hole5"></div>
  <div class="hole hole6"></div>
</div>

CSS 部分：

.game-container {
  width: 600px;
  height: 400px;
  margin: 0 auto;
  position: relative;
  background-color: #8bc34a;
  border-radius: 10px;
  overflow: hidden;
}

.hole {
  width: 100px;
  height: 100px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-image: url('https://i.imgur.com/m8I4Xfa.png');
  background-size: cover;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}

.hole1 {
  top: 10%;
  left: 10%;
}

.hole2 {
  top: 10%;
  left: 50%;
}

.hole3 {
  top: 10%;
  right: 10%;
}

.hole4 {
  bottom: 10%;
  left: 10%;
}

.hole5 {
  bottom: 10%;
  left: 50%;
}

.hole6 {
  bottom: 10%;
  right: 10%;
}

.hole:hover {
  transform: scale(1.2);
}

.score {
  position: absolute;
  top: 10px;
  left: 10px;
  font-size: 24px;
  color: #fff;
}

JavaScript 部分：

const holes = document.querySelectorAll('.hole');
const scoreBoard = document.getElementById('score');
let score = 0;

function randomTime(min, max) {
  return Math.round(Math.random() * (max - min) + min);
}

function randomHole() {
  const idx = Math.floor(Math.random() * holes.length);
  const hole = holes[idx];
  if (hole === lastHole) {
    return randomHole();
  }
  lastHole = hole;
  return hole;
}

function peep() {
  const time = randomTime(200, 1000);
  const hole = randomHole();
  hole.classList.add('up');
  setTimeout(() => {
    hole.classList.remove('up');
    if (!timeUp) peep();
  }, time);
}

function bonk(e) {
  if (!e.isTrusted) return;
  score++;
  this.classList.remove('up');
  scoreBoard.textContent = score;
}

holes.forEach(hole => hole.addEventListener('click', bonk));

let lastHole;
let timeUp = false;
let countDown = 30;
const timer = setInterval(() => {
  countDown--;
  if (countDown < 0) {
    clearInterval(timer);
    timeUp = true;
    alert(`时间到了！你的得分是 ${score} 分！`);
  }
}, 1000);

peep();

以上是一个简单的打地鼠小游戏的实现，希望能对您有所帮助。