经典街机游戏！用挡板反弹小球，消除所有彩色砖块即可获胜。支持鼠标和触屏双操控。
📋 完整源码（复制保存为 breakout.html）
<!DOCTYPE html>
<html lang="zh">>
<head><meta charset="UTF-8">>
<title>打砖块 - HTML小游戏</title>
<style>
*{margin:0;padding:0;box-sizing:border-box}
body{background:#0d1b2a;display:flex;justify-content:center;align-items:center;min-height:100vh;font-family:"Segoe UI",sans-serif;color:#eee;flex-direction:column}
h1{margin-bottom:10px;color:#f72585}
#hud{display:flex;gap:30px;font-size:18px;margin-bottom:10px}span{color:#4cc9f0}
canvas{border:2px solid #f72585;border-radius:8px;background:#1b263b;cursor:none}
button{background:#f72585;color:white;border:none;padding:10px 24px;font-size:16px;border-radius:6px;cursor:pointer;margin-top:12px}
</style></head>
<body>
<h1>🧱 打砖块</h1>
<div id="hud">>得分：<span id="score">>0</span> 生命：<span id="lives">>3</span></div>
<canvas id="g" width="480" height="400"></canvas>
<button onclick="init()">开始/重开</button>
<script>var c=document.getElementById("g"),x=c.getContext("2d");
var W=480,H=400,ball,paddle,bricks,score,lives,dx,dy,anim;
var brickRows=5,brickCols=8,bW=50,bH=18,bP=8,bTop=40;
var bLeft=(W-brickCols*(bW+bP)+bP)/2;
var colors=["#f72585","#b5179e","#7209b7","#560bad","#480ca8"];
function init(){ball={x:W/2,y:H-60,r:6,speed:4};paddle={x:W/2-40,y:H-25,w:80,h:10};
dx=ball.speed*(Math.random()>0.5?1:-1);dy=-ball.speed;
score=0;lives=3;document.getElementById("score").textContent=0;document.getElementById("lives").textContent=3;bricks=[];for(var r=0;r<brickRows;r++){bricks[r]=[];for(var cl=0;cl<brickCols;cl++){bricks[r][cl]={x:bLeft+cl*(bW+bP),y:bTop+r*(bH+bP),s:1};}}if(anim)cancelAnimationFrame(anim);loop();}
function loop(){x.clearRect(0,0,W,H);drawBricks();moveBall();
if(ball.y+ball.r>H){lives--;document.getElementById("lives").textContent=lives;
if(lives===0){x.fillStyle="rgba(0,0,0,0.7)";x.fillRect(0,0,W,H);x.fillStyle="#f72585";x.font="bold 32px sans-serif";x.textAlign="center";x.fillText("游戏结束! 得分:"+score,W/2,H/2);return;}
ball.x=W/2;ball.y=H-60;dy=-ball.speed;dx=ball.speed*(Math.random()>0.5?1:-1);}
var allGone=true;for(var r=0;r<brickRows;r++)for(var cl=0;cl<brickCols;cl++)if(bricks[r][cl].s===1)allGone=false;
if(allGone){x.fillStyle="rgba(0,0,0,0.7)";x.fillRect(0,0,W,H);x.fillStyle="#4cc9f0";x.font="bold 32px sans-serif";x.textAlign="center";x.fillText("通关! 得分:"+score,W/2,H/2);return;}
anim=requestAnimationFrame(loop);}
function drawBricks(){for(var r=0;r<brickRows;r++)for(var cl=0;cl<brickCols;cl++){if(bricks[r][cl].s===1){x.fillStyle=colors[r%colors.length];x.fillRect(bricks[r][cl].x,bricks[r][cl].y,bW,bH);}}}
function drawPaddle(){x.fillStyle="#4cc9f0";x.fillRect(paddle.x,paddle.y,paddle.w,paddle.h);}
function moveBall(){
ball.x+=dx;ball.y+=dy;if(ball.x+ball.r>W||ball.x-ball.r<0)dx=-dx;if(ball.y-ball.r<0)dy=-dy;
if(ball.y+ball.r>paddle.y&&ball.x>paddle.x&&ball.x<paddle.x+paddle.w){dy=-Math.abs(dy);var hp=(ball.x-paddle.x)/paddle.w;dx=ball.speed*(hp-0.5)*3;}
for(var r=0;r<brickRows;r++)for(var cl=0;cl<brickCols;cl++){var b2=bricks[r][cl];if(b2.s===1&&ball.x>b2.x&&ball.x<b2.x+bW&&ball.y>b2.y&&ball.y<b2.y+bH){dy=-dy;b2.s=0;score+=10*(brickRows-r);document.getElementById("score").textContent=score;}}
drawPaddle();x.beginPath();x.arc(ball.x,ball.y,ball.r,0,Math.PI*2);x.fillStyle="white";x.fill();}
c.addEventListener("mousemove",function(e){var rect=c.getBoundingClientRect();paddle.x=e.clientX-rect.left-paddle.w/2;paddle.x=Math.max(0,Math.min(W-paddle.w,paddle.x));});
c.addEventListener("touchmove",function(e){e.preventDefault();var rect=c.getBoundingClientRect();paddle.x=e.touches[0].clientX-rect.left-paddle.w/2;},{passive:false});
init();</script></body></html>🎯 玩法说明
- 鼠标移动 / 手指滑动：控制挡板左右移动
- 反弹小球消除砖块，每行分值不同（越高越值钱）
- 有3条命，球掉落就减1条
🔧 核心技术点
| 技术 | 说明 |
|---|---|
| requestAnimationFrame | 60FPS流畅游戏循环 |
| 物理碰撞检测 | 球与挡板、砖块的AABB碰撞 |
| 反射角度计算 | 根据球击中挡板的位置改变反弹方向 |
📥 保存为 breakout.html，双击用浏览器打开即可开玩！
原文链接：https://www.rmbxz.com/6535/，转载请注明出处。
请先 ！