一.预览
二.代码
<!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>
