这里提供一个打砖块小游戏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>
