打砖块小游戏html小游戏

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