这里提供一个打砖块小游戏html代码，有需要的小伙伴可以自己试试。
body内容
点击查看代码
<select id="difficulty"><option value="easy">简单</option><option value="medium">中等</option><option value="hard">困难</option>
</select>
<button onclick="startGame()">开始游戏</button>
<canvas id="brickGame" width="480" height="320"></canvas>
js代码
点击查看代码
<script>const canvas = document.getElementById('brickGame');const ctx = canvas.getContext('2d');let ballRadius = 10;let x, y, dx, dy;const paddleHeight = 10;const paddleWidth = 75;let paddleX;let rightPressed = false;let leftPressed = false;let brickRowCount, brickColumnCount, bricks = [];let score = 0;let level = 0;let timeLimit, elapsedTime = 0;function initializeGame(difficulty) {if (difficulty === 'easy') {brickRowCount = 3 + level;brickColumnCount = 5 + level;dx = 2 + level;dy = -2 - level;} else if (difficulty === 'medium') {brickRowCount = 5 + level;brickColumnCount = 7 + level;dx = 3 + level;dy = -3 - level;} else {brickRowCount = 7 + level;brickColumnCount = 9 + level;dx = 4 + level;dy = -4 - level;}x = canvas.width / 2;y = canvas.height - 30;paddleX = (canvas.width - paddleWidth) / 2;bricks = [];for (let c = 0; c < brickColumnCount; c++) {bricks[c] = [];for (let r = 0; r < brickRowCount; r++) {bricks[c][r] = { x: 0, y: 0, status: 1, type: Math.random() < 0.2 }; // 20% 概率生成特殊砖块}}score = 0;timeLimit = 30; // 每关 30 秒elapsedTime = 0;}function startGame() {const difficulty = document.getElementById('difficulty').value;initializeGame(difficulty);document.addEventListener('keydown', keyDownHandler, false);document.addEventListener('keyup', keyUpHandler, false);draw();}function keyDownHandler(e) {if (e.key === 'Right' || e.key === 'ArrowRight') {rightPressed = true;} else if (e.key === 'Left' || e.key === 'ArrowLeft') {leftPressed = true;}}function keyUpHandler(e) {if (e.key === 'Right' || e.key === 'ArrowRight') {rightPressed = false;} else if (e.key === 'Left' || e.key === 'ArrowLeft') {leftPressed = false;}}function collisionDetection() {for (let c = 0; c < brickColumnCount; c++) {for (let r = 0; r < brickRowCount; r++) {const b = bricks[c][r];if (b.status === 1) {if (x > b.x && x < b.x + 75 && y > b.y && y < b.y + 20) {dy = -dy;b.status = 0;score++;if (b.type) {score += 2; // 特殊砖块额外得分}if (score === brickRowCount * brickColumnCount) {level++;alert('恭喜！进入第 ' + (level + 1) + ' 关！');startGame();}}}}}}function drawBall() {ctx.beginPath();ctx.arc(x, y, ballRadius, 0, Math.PI * 2);ctx.fillStyle = '#4CAF50';ctx.fill();ctx.closePath();}function drawPaddle() {ctx.beginPath();ctx.rect(paddleX, canvas.height - paddleHeight, paddleWidth, paddleHeight);ctx.fillStyle = '#4CAF50';ctx.fill();ctx.closePath();}function drawBricks() {for (let c = 0; c < brickColumnCount; c++) {for (let r = 0; r < brickRowCount; r++) {if (bricks[c][r].status === 1) {const brickX = c * (75 + 10) + 30;const brickY = r * (20 + 10) + 30;bricks[c][r].x = brickX;bricks[c][r].y = brickY;ctx.beginPath();ctx.rect(brickX, brickY, 75, 20);ctx.fillStyle = bricks[c][r].type ? '#FF5733' : '#4CAF50'; // 特殊砖块颜色不同ctx.fill();ctx.closePath();}}}}function drawScore() {ctx.font = '16px Arial';ctx.fillStyle = '#4CAF50';ctx.fillText('分数: ' + score, 8, 20);ctx.fillText('关卡: ' + (level + 1), canvas.width - 100, 20);ctx.fillText('剩余时间: ' + (timeLimit - Math.floor(elapsedTime)), canvas.width / 2 - 50, 20);}function draw() {ctx.clearRect(0, 0, canvas.width, canvas.height);drawBricks();drawBall();drawPaddle();drawScore();collisionDetection();if (x + dx > canvas.width - ballRadius || x + dx < ballRadius) {dx = -dx;}if (y + dy < ballRadius) {dy = -dy;} else if (y + dy > canvas.height - ballRadius) {if (x > paddleX && x < paddleX + paddleWidth) {dy = -dy;} else {alert('游戏结束！');document.location.reload();}}if (rightPressed && paddleX < canvas.width - paddleWidth) {paddleX += 7;} else if (leftPressed && paddleX > 0) {paddleX -= 7;}x += dx;y += dy;// 更新时间elapsedTime += 1 / 60; // 假设每帧约 1/60 秒if (elapsedTime >= timeLimit) {alert('时间到！游戏结束！');document.location.reload();}requestAnimationFrame(draw);}
</script>
css代码
点击查看代码
<style>body {display: flex;flex-direction: column;justify-content: center;align-items: center;height: 100vh;background-color: #f0e5d3;margin: 0;font-family: Arial, sans-serif;}canvas {border: 2px solid #4CAF50;background-color: #ffffff;}select {margin-bottom: 20px;padding: 5px;}</style>
实例可以参考：http://diuta.com/app/dzk.html
