使用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>