🎮ArcadeLab

简易坦克大战

by PlasmaHero52
129 lines3.8 KB
▶ Play
arcadelab.ai/publish<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
<title>简易坦克大战（触屏版）</title>
<style>
*{margin:0;padding:0;box-sizing:border-box}
body{background:#111;color:#fff;touch-action:none;overflow:hidden}
#game{display:block;margin:10px auto;background:#000;border:2px #444 solid;max-width:95vw}
.ctrl{position:fixed;bottom:30px;left:20px;display:grid;grid-template-columns:60px 60px 60px;gap:8px}
.btn{width:60px;height:60px;background:#333;border-radius:8px;text-align:center;line-height:60px;font-size:24px;user-select:none}
.fire{position:fixed;bottom:40px;right:30px;width:80px;height:80px;border-radius:50%;background:#c22;text-align:center;line-height:80px;font-size:16px}
</style>
</head>
<body>
<canvas id="game" width="420" height="420"></canvas>
<div class="ctrl">
<div></div>
<div class="btn" data-dir="up">↑</div>
<div></div>
<div class="btn" data-dir="left">←</div>
<div></div>
<div class="btn" data-dir="right">→</div>
<div></div>
<div class="btn" data-dir="down">↓</div>
<div></div>
</div>
<div class="fire" id="fireBtn">发射</div>
<script>
const canvas = document.getElementById('game');
const ctx = canvas.getContext('2d');
const SIZE = 28;
const W = canvas.width / SIZE;
const H = canvas.height / SIZE;

const player = {
  x: 2 * SIZE,
  y: (H - 3) * SIZE,
  dir: 'up',
  speed: 2.2,
  color: "#0f0"
};
let bullets = [];
let enemies = [];
let bricks = [];
const keyDir = {up:false,down:false,left:false,right:false};

for(let i=0;i<24;i++){
  bricks.push({
    x: Math.floor(Math.random()*(W-2))*SIZE,
    y: Math.floor(Math.random()*(H-6))*SIZE
  })
}
enemies.push({x: W/2*SIZE, y: SIZE, dir:'down', speed:1.1, color:'#f33'});

document.querySelectorAll('.btn').forEach(b=>{
  const d = b.dataset.dir;
  b.addEventListener('touchstart',()=>keyDir[d]=true);
  b.addEventListener('touchend',()=>keyDir[d]=false);
})
document.getElementById("fireBtn").addEventListener("touchstart",()=>{
  bullets.push({
    x:player.x+SIZE/2,
    y:player.y+SIZE/2,
    dir:player.dir,
    speed:5
  })
})

function moveTank(tank){
  let nx = tank.x, ny = tank.y;
  if(tank.dir==='up') ny -= tank.speed;
  if(tank.dir==='down') ny += tank.speed;
  if(tank.dir==='left') nx -= tank.speed;
  if(tank.dir==='right') nx += tank.speed;
  if(nx <0 || ny<0 || nx+SIZE>canvas.width || ny+SIZE>canvas.height) return;
  tank.x = nx; tank.y = ny;
}

function draw(){
  ctx.fillStyle="#000";
  ctx.fillRect(0,0,canvas.width,canvas.height);
  ctx.fillStyle="#b72";
  bricks.forEach(b=>ctx.fillRect(b.x,b.y,SIZE,SIZE));

  ctx.fillStyle=player.color;
  ctx.fillRect(player.x,player.y,SIZE,SIZE);
  ctx.fillStyle="#fff";
  if(player.dir==='up') ctx.fillRect(player.x+11,player.y-7,6,9);
  if(player.dir==='down') ctx.fillRect(player.x+11,player.y+25,6,9);
  if(player.dir==='left') ctx.fillRect(player.x-7,player.y+11,9,6);
  if(player.dir==='right') ctx.fillRect(player.x+25,player.y+11,9,6);

  enemies.forEach(e=>{
    ctx.fillStyle=e.color;
    ctx.fillRect(e.x,e.y,SIZE,SIZE);
  })
  ctx.fillStyle="#fff";
  bullets.forEach(b=>{
    ctx.beginPath();
    ctx.arc(b.x,b.y,3,0,Math.PI*2);
    ctx.fill();
  })
  ctx.fillStyle="#fd0";
  ctx.fillRect(W/2*SIZE, (H-1)*SIZE, SIZE, SIZE);
}

function update(){
  if(keyDir.up) player.dir='up',moveTank(player);
  if(keyDir.down) player.dir='down',moveTank(player);
  if(keyDir.left) player.dir='left',moveTank(player);
  if(keyDir.right) player.dir='right',moveTank(player);

  bullets = bullets.filter(b=>{
    if(b.dir==='up') b.y -= b.speed;
    if(b.dir==='down') b.y += b.speed;
    if(b.dir==='left') b.x -= b.speed;
    if(b.dir==='right') b.x += b.speed;
    return b.y>0 && b.y<canvas.height && b.x>0 && b.x<canvas.width;
  })
  draw();
  requestAnimationFrame(update);
}
update();
</script>
</body>
</html>

Game Source: 简易坦克大战

Creator: PlasmaHero52

Libraries: none

Complexity: moderate (129 lines, 3.8 KB)

The full source code is displayed above on this page.

Remix Instructions

To remix this game, copy the source code above and modify it. Add a ARCADELAB header at the top with "remix_of: game-plasmahero52" to link back to the original. Then publish at arcadelab.ai/publish.