坦克大战专注活动，软件，教程分享！GL云科技

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>经典坦克大战</title>
<style>
*{margin:0;padding:0;box-sizing:border-box;font-family:Arial}
body{background:#222;color:#fff;display:flex;flex-direction:column;align-items:center;padding:20px}
#game{border:3px solid #666;background:#000}
.info{margin-bottom:10px;font-size:18px}
.tip{margin-top:10px;color:#aaa;font-size:14px}
</style>
</head>
<body>
<div class="info">生命值：<span id="hp">3</span> | 消灭敌人：<span id="kill">0</span></div>
<canvas id="game" width="480" height="480"></canvas>
<div class="tip">WASD移动 | 空格发射子弹 | 消灭敌方坦克</div>

<script>
const canvas=document.getElementById('game');
const ctx=canvas.getContext('2d');
const hpEl=document.getElementById('hp');
const killEl=document.getElementById('kill');

// 格子大小
const size=30;
const row=canvas.height/size;
const col=canvas.width/size;

// 玩家坦克
let player={
  x:size*7,y:size*14,dir:0,speed:4,hp:3
};
// 方向 0上 1右 2下 3左
const dirs=[{x:0,y:-1},{x:1,y:0},{x:0,y:1},{x:-1,y:0}];

// 敌方坦克
let enemies=[
  {x:size*3,y:size*3,dir:2,speed:2},
  {x:size*12,y:size*3,dir:2,speed:2}
];
// 子弹
let bullets=[];
// 墙体
let walls=[
  {x:size*4,y:size*4},{x:size*5,y:size*4},
  {x:size*8,y:size*7},{x:size*9,y:size*7},
  {x:size*2,y:size*10},{x:size*3,y:size*10}
];
// 按键
let key={};
// 击杀数
let kill=0;

// 键盘监听
document.addEventListener('keydown',e=>{
  key[e.code]=true;
  if(e.code==='Space')shoot();
});
document.addEventListener('keyup',e=>key[e.code]=false);

// 发射子弹
function shoot(){
  let d=dirs[player.dir];
  bullets.push({
    x:player.x+size/2-4,
    y:player.y+size/2-4,
    dx:d.x*8,dy:d.y*8,isPlayer:true
  })
}

// 绘制方块
function drawRect(x,y,w,h,color){
  ctx.fillStyle=color;
  ctx.fillRect(x,y,w,h);
}

// 游戏循环
function loop(){
  // 清屏
  drawRect(0,0,canvas.width,canvas.height,'#000');

  // 玩家移动+转向
  if(key['KeyW']){player.dir=0;player.y-=player.speed}
  if(key['KeyS']){player.dir=2;player.y+=player.speed}
  if(key['KeyA']){player.dir=3;player.x-=player.speed}
  if(key['KeyD']){player.dir=1;player.x+=player.speed}

  // 边界限制
  player.x=Math.max(0,Math.min(canvas.width-size,player.x));
  player.y=Math.max(0,Math.min(canvas.height-size,player.y));

  // 绘制墙体
  walls.forEach(w=>drawRect(w.x,w.y,size,size,'#8b4513'));

  // 绘制玩家坦克（绿色）
  drawTank(player,'#0f0');

  // 敌方AI简单移动+随机射击
  enemies.forEach(e=>{
    e.x+=dirs[e.dir].x*e.speed;
    e.y+=dirs[e.dir].y*e.speed;
    // 边界反弹
    if(e.x<=0||e.x>=canvas.width-size)e.dir=e.dir===1?3:1;
    if(e.y<=0||e.y>=canvas.height-size)e.dir=e.dir===2?0:2;
    // 随机发射
    if(Math.random()<0.01){
      let d=dirs[e.dir];
      bullets.push({
        x:e.x+size/2-4,y:e.y+size/2-4,
        dx:d.x*6,dy:d.y*6,isPlayer:false
      })
    }
    drawTank(e,'#f00');
  })

  // 更新子弹
  bullets=bullets.filter(b=>{
    b.x+=b.dx;b.y+=b.dy;
    // 出界删除
    if(b.x<0||b.x>canvas.width||b.y<0||b.y>canvas.height)return false;

    // 子弹打墙体
    for(let w of walls){
      if(checkHit(b,w.x,w.y,size,size))return false;
    }

    // 玩家子弹打敌人
    if(b.isPlayer){
      for(let i=enemies.length-1;i>=0;i--){
        let e=enemies[i];
        if(checkHit(b,e.x,e.y,size,size)){
          enemies.splice(i,1);
          kill++;killEl.innerText=kill;
          return false;
        }
      }
    }else{
      // 敌人子弹打玩家
      if(checkHit(b,player.x,player.y,size,size)){
        player.hp--;hpEl.innerText=player.hp;
        if(player.hp<=0)alert('游戏结束！你输了！');
        return false;
      }
    }
    return true;
  })

  // 绘制子弹
  bullets.forEach(b=>drawRect(b.x,b.y,8,8,'#ff0'));

  // 胜利：消灭所有敌人
  if(enemies.length===0)alert('恭喜！你胜利了！');

  requestAnimationFrame(loop);
}

// 绘制坦克
function drawTank(t,color){
  drawRect(t.x,t.y,size,size,color);
  // 炮管
  ctx.fillStyle='#333';
  let cx=t.x+size/2-3,cy=t.y+size/2-3;
  if(t.dir===0)drawRect(cx,cy-10,6,12,'#333');
  if(t.dir===1)drawRect(cx,cy,12,6,'#333');
  if(t.dir===2)drawRect(cx,cy,6,12,'#333');
  if(t.dir===3)drawRect(cx-10,cy,12,6,'#333');
}

// 碰撞检测
function checkHit(b,x,y,w,h){
  return b.x<x+w&&b.x+8>x&&b.y<y+h&&b.y+8>y;
}

loop();
</script>
</body>
</html>