你当前的代码是一个基于 `canvas` 的简单弹球游戏，使用键盘（A/D）控制底板移动。现在你要：
1
. **添加三个难度等级：简单、中等、困难
**
2. **为 canvas 添加背景图片
**
---
我们将
**不改变原有逻辑结构
**，只在现有代码基础上：
- 添加难度选择 UI（用按钮）
- 根据难度设置小球移动速度
- 给 canvas 添加背景图片（通过 JavaScript 绘制到 canvas 底层）
---
### ✅ 修改后的完整代码（含难度设置 + 背景图）
```
html
<!DOCTYPE
html>
<
html lang="en">
<head>
<meta charset="UTF-8">
<title>弹球游戏</title>
<style>
body {
text-align: center;
font-family: Arial, sans-serif;
}
#cans {
border: 1px solid blue;
margin-top: 10px;
}
button {
padding: 8px 16px;
margin: 0
5px;
font-size: 16px;
}
</style>
</head>
<body onkeydown="test
()">
<h
2>弹球游戏</h
2>
<p>使用 A 键向左，D 键向右</p>
<div>
<button onclick="setDifficulty
('easy')">简单</button>
<button onclick="setDifficulty
('medium')">中等</button>
<button onclick="setDifficulty
('hard')">困难</button>
</div>
<canvas id="cans" width="400" height="700"
style="border: 1px blue solid"></canvas>
<script>
var canvas = document
.getElementById
("cans"
);
var
cxt = canvas
.getContext
("
2d"
);
// 游戏变量
var ballX =
200;
var ballY = 300;
var direction = 0; // 0:右下, 1:左下,
2:左上, 3:右上
var r =
20;
var rectX = 100;
var length = 1
50;
var score = 0;
// 难度相关
var difficulty = 'medium'; // 默认难度
var speedMap = {
'easy':
2,
'medium': 3,
'hard': 4
};
var speed = speedMap[difficulty];
// 背景图片
var bgImage = new Image
();
bgImage
.src = 'https://images
.unsplash
.com/photo-1
506784983984-d0
5ad6a3de0
5?ixlib=rb-4
.0
.3&auto=format&fit=crop&w=800&q=80'; // 免费背景图示例
// 设置难度
function setDifficulty
(level) {
difficulty = level;
speed = speedMap[difficulty];
resetGame
();
alert
("难度已设置为：" + level + "，点击确定开始游戏"
);
}
// 重置游戏状态
function resetGame
() {
ballX =
200;
ballY = 300;
direction = 0;
rectX = 100;
score = 0;
}
// 绘制所有内容
function drawBall
() {
// 先绘制背景图
if
(bgImage
.complete && bgImage
.naturalWidth > 0) {
cxt.drawImage
(bgImage, 0, 0, canvas
.width, canvas
.height
);
} else {
// 如果图片未加载完成，填充一个备用背景色
cxt.fillStyle = '#f0f0f0';
cxt.fillRect
(0, 0, canvas
.width, canvas
.height
);
}
// 绘制小球
cxt.beginPath
();
cxt.arc(ballX, ballY, r, 0,
Math.PI * 2, false
);
cxt.fillStyle = 'blue';
cxt.fill
();
cxt.closePath
();
// 绘制底板
cxt.fillStyle = 'green';
cxt.fillRect
(rectX, 600, length, 10
);
// 绘制分数
cxt.font = "30px 华文彩云";
cxt.fillStyle = 'white';
cxt.fillText
("SCORE:" + score,
250, 30
);
}
// 键盘控制
function test
() {
var code = event
.keyCode; // A 左，D 右
if
(code == 6
5) { // A
rectX =
Math.max
(0, rectX - 1
5);
}
if
(code == 68) { // D
rectX =
Math.min
(400 - length, rectX + 1
5);
}
cxt.clearRect
(0, 0, 400, 700
);
drawBall
();
}
// 小球移动逻辑
function move
() {
// 根据方向和速度更新位置
if
(direction == 0) { // 右下
ballX += speed;
ballY += speed;
} else if
(direction == 1) { // 左下
ballX -= speed;
ballY += speed;
} else if
(direction ==
2) { // 左上
ballX -= speed;
ballY -= speed;
} else if
(direction == 3) { // 右上
ballX += speed;
ballY -= speed;
}
// 边界碰撞检测
if
(ballX >= 400 - r) { // 右边界
if
(direction == 0) direction = 1;
else if
(direction == 3) direction =
2;
}
if
(ballX <= r) { // 左边界
if
(direction == 1) direction = 0;
else if
(direction ==
2) direction = 3;
}
if
(ballY <= r) { // 上边界
if
(direction ==
2) direction = 1;
if
(direction == 3) direction = 0;
}
// 底板接球判断
if
(ballY >= 600 - r &&
ballX >= rectX &&
ballX <= rectX + length) {
score++;
if
(direction == 0) direction = 3;
else if
(direction == 1) direction =
2;
}
// 游戏结束判断
if
(ballY >= 700 - r) {
setTimeout
(() => {
alert
("游戏结束！你的得分: " + score
);
resetGame
();
}, 100
);
return;
}
// 清除画布并重新绘制
cxt.clearRect
(0, 0, 400, 700
);
drawBall
();
}
// 启动游戏循环
window
.setInterval
(move,
20
); // 每
20ms移动一次，更平滑
// 确保页面加载完成后开始
bgImage
.onload = function
() {
drawBall
(); // 初始绘制背景
};
// 错误处理
bgImage
.onerror = function
() {
console
.warn
("背景图片加载失败，使用默认背景"
);
drawBall
();
};
</script>
</body>
</
html>
```
---
### 🔍 主要改动说明：
#### ✅ 1
. 难度设置
- 添加了三个按钮：`简单`、`中等`、`困难`
- 使用 `speedMap` 控制小球每次移动的像素值（
2/3/4）
- `setDifficulty
()` 函数设置难度并重置游戏
#### ✅
2. 背景图片
- 使用 `new Image
()` 加载外部图片
- 在 `drawBall
()` 中优先绘制背景图
- 图片未加载时使用灰色备用背景
- 推荐替换 `bgImage
.src` 为你本地或自己的图片地址
#### ✅ 3
. 性能优化
- `setInterval
(move,
20)` 更合理（原 `1ms` 太快且浪费性能）
- 移动步长改为 `speed`，实现不同难度
#### ✅ 4
. 安全性增强
- 使用 `
Math.max/min` 限制底板移动范围
- 增加图片加载错误处理
---
### 📌 注意事项
- 背景图链接来自 Unsplash，可正常跨域使用。
- 若使用本地图片，请确保路径正确，或部署在服务器上避免 CORS。
- 字体“华文彩云”需系统支持，否则会 fallback。
---
本文介绍了如何使用cxt.arc()函数来绘制圆形和扇形。该函数通过指定圆心坐标、半径、起始角度、终止角度等参数来确定图形的位置和形状。适用于绘制饼图等需要扇形元素的应用场景。
扫一扫
666
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
