html射击游戏代码

HTML射击游戏代码详解

HTML结构

<div class="game-container">
  <canvas id="gameCanvas" width="400" height="600"></canvas>
</div>

说明：使用<canvas>元素创建游戏画布，设置宽高属性定义游戏区域大小。

CSS样式

.game-container {
  display: flex;
  justify-content: center;
  margin-top: 50px;
}
#gameCanvas {
  background: #000;
  border: 2px solid #333;
}

说明：通过Flex布局使画布居中，设置黑色背景模拟太空场景，添加边框增强视觉效果。

JavaScript核心逻辑

const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
// 玩家飞船
const player = {
  x: canvas.width / 2,
  y: canvas.height 50,
  width: 40,
  height: 30,
  color: 'white',
  speed: 5
};
// 子弾数组
let bullets = [];
// 敌机数组
let enemies = [];
// 键盘控制变量
let keys = {};
// 敌机生成定时器
setInterval(() => {
  const enemy = {
    x: Math.random()  (canvas.width 30),
    y: -30,
    width: 30,
    height: 30,
    color: 'red',
    speed: 3
  };
  enemies.push(enemy);
}, 1500); // 每1.5秒生成一个敌机
// 动画主循环
function animate() {
  ctx.clearRect(0, 0, canvas.width, canvas.height); // 清除画布
  // 绘制玩家
  ctx.fillStyle = player.color;
  ctx.fillRect(player.x, player.y, player.width, player.height);
  // 处理玩家移动
  if (keys['ArrowLeft']) player.x -= player.speed;
  if (keys['ArrowRight']) player.x += player.speed;
  // 限制玩家移动范围
  player.x = Math.max(0, Math.min(player.x, canvas.width player.width));
  // 绘制并更新子弾
  bullets.forEach(bullet => {
    bullet.y -= 5; // 子弾向上移动
    ctx.fillStyle = 'yellow';
    ctx.fillRect(bullet.x, bullet.y, bullet.width, bullet.height);
    // 移除超出画布的子弾
    if (bullet.y < 0) {
      bullets.shift();
    }
  });
  // 绘制并更新敌机
  enemies.forEach((enemy, index) => {
    enemy.y += enemy.speed;
    ctx.fillStyle = enemy.color;
    ctx.fillRect(enemy.x, enemy.y, enemy.width, enemy.height);
    // 碰撞检测：子弾与敌机
    bullets.forEach((bullet, bIndex) => {
      if (bullet.x < enemy.x + enemy.width && 
          bullet.x + bullet.width > enemy.x &&
          bullet.y < enemy.y + enemy.height &&
          bullet.y + bullet.height > enemy.y) {
        // 删除子弾和敌机
        bullets.splice(bIndex, 1);
        enemies.splice(index, 1);
      }
    });
    // 移除超出画布的敌机
    if (enemy.y > canvas.height) {
      enemies.splice(index, 1);
    }
  });
  requestAnimationFrame(animate); // 循环调用动画函数
}
// 监听键盘事件
window.addEventListener('keydown', (e) => {
  keys[e.key] = true;
  if (e.key === 'Space') { // 空格键发射子弾
    const bullet = {
      x: player.x + player.width / 2 2,
      y: player.y 10,
      width: 4,
      height: 10
    };
    bullets.push(bullet);
  }
});
window.addEventListener('keyup', (e) => {
  keys[e.key] = false;
});
// 启动游戏循环
animate();

功能模块说明表

相关问题与解答

问题1：如何增加敌机数量和速度？
解答：

1. 修改setInterval的时间间隔（如改为1000毫秒）以加快生成频率。
2. 在敌机对象中增加speed属性，例如enemy.speed = Math.random() 5 + 2;实现不同敌机速度。

问题2：如何让子弾自动消失？
解答：
在子弾绘制逻辑中添加条件判断：

if (bullet.y < 0 || bullet.y > canvas.height) {
  bullets.splice(i, 1); // 删除超出屏幕的子弾
}

或在主循环开始时过滤子弾数组：

bullets = bullets.filter(b => b.y >= 0 && b.y <= canvas.height