Canvas实现打砖块

最新推荐文章于 2024-11-04 17:05:06 发布

GIS小小白

最新推荐文章于 2024-11-04 17:05:06 发布

阅读量357

点赞数 3

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/weixin_73810008/article/details/136279424

版权

一.预览

二.代码

<!DOCTYPE html>
<html lang="en">
<head>
    <title>打砖块</title>
    <style>
        #myCanvas {
            background: #eee; /* 设置画布的背景颜色为浅灰色 */
            display: block;
            margin: 0 auto; /* 使画布在页面中居中显示 */
        }
    </style>
</head>
<body>
    <canvas id="myCanvas" width="480" height="320"></canvas> <!-- 创建一个画布用于绘制游戏 -->
    <script>
        const canvas = document.getElementById('myCanvas'); // 获取画布元素
        const ctx = canvas.getContext('2d'); // 获取2D绘图上下文
        let rightPressed = false; // 右移动键是否被按下
        let leftPressed = false; // 左移动键是否被按下
        let ballRadius = 10; // 小球的半径
        let score = 0; // 玩家得分
        let paddleHeight = 10; // 挡板的高度
        let paddleWidth = 75; // 挡板的宽度
        let paddleX = (canvas.width - paddleWidth) / 2; // 挡板的初始位置
        let x = canvas.width / 2; // 小球的初始x坐标
        let y = canvas.height - 30; // 小球的初始y坐标
        let dx = 2; // 小球在x轴方向的移动速度
        let dy = -2; // 小球在y轴方向的移动速度

        document.addEventListener("keydown", keyDownHandler, false); // 监听键盘按下事件
        document.addEventListener("keyup", keyUpHandler, false); // 监听键盘释放事件

        // 处理键盘按下事件
        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 drawBall() {
            ctx.beginPath();
            ctx.arc(x, y, ballRadius, 0, Math.PI * 2);
            ctx.fillStyle = "#0095DD"; // 设置小球颜色
            ctx.fill();
            ctx.closePath();
        }

        // 显示得分
        function drawScore() {
            ctx.font = '16px Arial'; // 设置字体大小和类型
            ctx.fillStyle = '#0095DD'; // 设置字体颜色
            ctx.fillText('Score: ' + score, 10, 20); // 绘制得分文本
        }

        // 绘制挡板
        function drawPaddle() {
            ctx.beginPath();
            ctx.rect(paddleX, canvas.height - paddleHeight, paddleWidth, paddleHeight);
            ctx.fillStyle = '#0095DD'; // 设置挡板颜色
            ctx.fill();
            ctx.closePath();
        }

        // 游戏主循环函数
        function draw() {
            ctx.clearRect(0, 0, canvas.width, canvas.height); // 清除画布内容
            drawBall(); // 绘制小球
            drawPaddle(); // 绘制挡板
            drawScore(); // 显示得分

            // 检测小球碰撞边界
            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; // 如果小球碰到挡板，则垂直方向反弹
                    score++; // 增加得分
                }
                else {
                    alert("GAME OVER"); // 如果小球触底，则游戏结束
                    document.location.reload(); // 重新加载页面，重置游戏
                }
            }

            // 挡板移动
            if (rightPressed && paddleX < canvas.width - paddleWidth) {
                paddleX += 7; // 右移
            }
            else if (leftPressed && paddleX > 0) {
                paddleX -= 7; // 左移
            }

            x += dx; // 更新小球位置
            y += dy; // 更新小球位置
            requestAnimationFrame(draw); // 请求下一帧绘制
        }
        draw(); // 开始游戏循环
    </script>
</body>
</html>