使用js和canvas实现简单的网页打砖块小游戏

玩法介绍

点击开始游戏后，使用键盘上的←→控制移动，小球会不停移动，板子触碰小球时会反弹，碰撞到砖块时会摧毁砖块，如果没有用板子接住小球就游戏失败
在这里插入图片描述

代码实现

代码比较简单，直接阅读注释即可，复制即用

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Breakout Game</title><style>body {margin: 0;overflow: hidden;}canvas {display: block;position: absolute;top: 0;left: 0;z-index: 1;background-color: #000;}.start-screen {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.8);color: white;text-align: center;z-index: 2;display: flex;align-items: center;justify-content: center;font-size: 24px;}button {font-size: 24px;padding: 10px 20px;cursor: pointer;}</style>
</head>
<body><div class="start-screen"><h1>Breakout Game</h1><button id="startButton">Start Game</button></div><canvas id="gameCanvas" width="800" height="600"></canvas><script>const canvas = document.getElementById('gameCanvas');const ctx = canvas.getContext('2d');// 设置 Canvas 为全屏canvas.width = window.innerWidth;canvas.height = window.innerHeight;// 游戏状态let paddle = { x: canvas.width / 2 - 50, y: canvas.height - 50, width: 200, height: 10 };let ball = { x: canvas.width / 2, y: canvas.height - 100, radius: 10, dx: 2, dy: -2 };let bricks = [];let score = 0;// 初始化砖块function initBricks() {const brickWidth = 70;const brickHeight = 20;const brickCount = 5;const brickRow = 10;for (let row = 0; row < brickRow; row++) {for (let col = 0; col < brickCount; col++) {bricks.push({x: col * (brickWidth + 10) + 150,y: row * (brickHeight + 5) + 50,width: brickWidth,height: brickHeight});}}}// 绘制砖块function drawBricks() {bricks.forEach(brick => {ctx.fillStyle = '#0f0';ctx.fillRect(brick.x, brick.y, brick.width, brick.height);});}// 绘制拍子function drawPaddle() {ctx.fillStyle = '#0f0';ctx.fillRect(paddle.x, paddle.y, paddle.width, paddle.height);}// 绘制球function drawBall() {ctx.beginPath();ctx.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2);ctx.fillStyle = '#f00';ctx.fill();ctx.closePath();}// 检查碰撞function checkCollision() {// 检查球是否撞到砖块bricks.forEach((brick, index) => {if (ball.x + ball.radius > brick.x &&ball.x - ball.radius < brick.x + brick.width &&ball.y + ball.radius > brick.y &&ball.y - ball.radius < brick.y + brick.height) {ball.dy = -ball.dy;bricks.splice(index, 1);score++;}});// 检查球是否撞到墙壁if (ball.x + ball.radius > canvas.width || ball.x - ball.radius < 0) {ball.dx = -ball.dx;}if (ball.y - ball.radius < 0) {ball.dy = -ball.dy;}// 检查球是否撞到拍子if (ball.x + ball.radius > paddle.x &&ball.x - ball.radius < paddle.x + paddle.width &&ball.y + ball.radius > paddle.y &&ball.y - ball.radius < paddle.y + paddle.height) {ball.dy = -ball.dy;}// 检查球是否掉出屏幕if (ball.y + ball.radius > canvas.height) {alert('Game Over!');location.reload();}}// 更新游戏状态function update() {ball.x += ball.dx;ball.y += ball.dy;}// 渲染游戏画面function draw() {ctx.clearRect(0, 0, canvas.width, canvas.height);drawBricks();drawPaddle();drawBall();}// 游戏主循环function gameLoop() {update();checkCollision();draw();requestAnimationFrame(gameLoop);}// 键盘事件function handleKeyPress(event) {if (event.key === 'ArrowLeft') {paddle.x -= 15;}if (event.key === 'ArrowRight') {paddle.x += 15;}}// 开始按钮事件document.getElementById('startButton').addEventListener('click', () => {const startScreen = document.querySelector('.start-screen');startScreen.style.display = 'none';// 添加键盘事件监听document.addEventListener('keydown', handleKeyPress);initBricks();gameLoop();});// 游戏结束时移除键盘事件监听window.addEventListener('beforeunload', () => {document.removeEventListener('keydown', handleKeyPress);});</script>
</body>
</html>